Designing usable web pages

Dey AlexanderWeb Designer

Infrastructure ServicesPh: 990 54740

Usable web page design

Page design is the most immediately visible part of web design.

Jakob Nielsen, Designing Web Usability, p. 17

Overview

• visual design & layout

• download times

• use of screen real estate

• HTML techniques for layout

• interoperability

Eye flow & design

“Good design is based on eye flow. The more eye movement required within a visual field, the less information can be received and processed.”

Duff & Mohler, 1996

there is a relationship between

• eye flow• information processing

Minimise eye movement

Need to minimise eye movement is even more important online:

• users’ attention span is short

• harder to read from screen

• users’ don’t read, they scan

Eye movement during reading

• left to right

• top to bottom

The way we are taught to read has implications for how we scan a screen:

Gutenberg diagram

POA: primary optical area

TA: terminal anchor

Wavy lines: eye resistance

+: fallow areas

Source: Colin WheildonType & Layout, 1996.

Eye flow & page elements

Elements on web pages create shapes:

• blocks of text

• images

• bullets, input boxes, etc.

Eye movement and shapes

Position elements to minimise eye movement

Source:Yale Style Manual

Shapes create grids

Draw imaginary lines to check grids:

• grids help predict eye movement

• grids help us check placement & alignment of page elements

Example page grid (1)

Example page grid (2)

Visual hierarchy

there is a relationship between:• visual depiction of hierarchical r’ships• information processing

One of the best ways to make a page easy to grasp in a hurry is to make sure that the appearance of things on the page… clearly and accurately portrays… which things are related and which things are part of other things…

Steve Krug, 2000

Goals of visual hierarchy (1)

to show importance or priority

• make important elements bigger, bolder

• position important elements nearer to the top of the page

• use whitespace around elements tomake them stand out

Visual hierarchy example (1a)

Visual hierarchy example (1b)

Goals of visual hierarchy (2)to show relationships between elements:

• use positioning:grouping, nesting, proximity

• use presentation styles:size, colour, orientation, font

Visual hierarchy example (2a)

Visual hierarchy example (2b)

Goals of visual hierarchy (3)to aid scanning and comprehension:

• create contrast between page elements

• use meaningful headings and sub-headings

• provide visual relief from densechunks of text

Visual hierarchy example (3a)

Visual hierarchy example (3b)

Text alignment

alignment options:

• left• right• centred

• justified (limited)

• mixture of above

Text alignment and readability

Left alignment is most commonly used:

• eye scans from left to right

• easier to read

Text alignment example (1)

Text alignment example (2)

Legibility

Factors that affect legibility

• font size, face

• use of colours

• contrast

Font size and face (1)

Study of font faces and sizes by Software Usability Research LabWichita State University, 2000

• 35 participants

• all 20/20 vision

• read 8 short passages of text

Font size and face (2)

• speed

• accuracy

• Arial vs Times New Roman

• 10 points vs 12 points

• anti-aliased vs dot matrix fonts

tested for

tested between

Test results (1)

no significant differences in detection of errors

Test results (2)

users didn’t prefer fastest font

What fonts do we use?

for users with good vision

- TNR vs Arial not critical- 10 vs 12 point not critical

but not all users have good vision

- 12 pt would be a safer default- allow user to override

More on text

Text is harder to read when

• IT’S ALL IN UPPERCASE

• it is blinking

• it is moving (marquee style)

• it is zooming

Colour and contrast

use colours with good contrast

- white on black (‘positive text’) is best

- black on white (‘negative text’) is next best

use plain backgrounds

Contrast – example (1)

colour contrast insufficient

Contrast – example (2)

• busy background image

• insufficient colour contrast

Summary: visual design (1)• eye movement & comprehension

• visual hierarchy & comprehension

elements create shapes on page

shapes create grids

show prominence

show relationships (similarity, parent/child)

aid visual scanning

align shapes, minimise grids

Summary: visual design (2)

• text alignment & comprehensionleft alignment works best

• legibilitylarger default font is bestdon’t prevent user adjusting font sizeblack text on white background best contrastdon’t use busy background images

Use of screen real estate

Do users want…

• to see whose products you’re advertising?

• to evaluate your navigationsystem?

• to admire your graphic design skills?

What do users want?

Why did user come to your site?

• for its content!

Jakob Nielsen recommends devoting 50-80% of screen real estate to content

Screen real estate (example 1a)

Screen real estate (example 1b)

Screen real estate (example 1c)

Screen real estate (example 1d)

Design ‘above the fold’

‘above the fold’ = newspaper term

Make sure important informationcan be seen in first screen view

Scrolling behaviour

Early studies (19954/5) showed that users would not scroll

Not true of users now, but…

• users will only scroll if they think they are on the right page

Variations in display

The location of the ‘fold’ can vary:

• different display resolutions (640x480, 800x600, 1024x768)

• browser toolbars take up space

Safe space = ~ 300 pixels

‘Above the fold’ (example 1a)

‘Above the fold’(example 1b)

Page length and scrolling

as a rule of thumb

level one page – one screenful

level two page – two screensful

beyond that – ok to be longer

Caution: pages can be directly accessed!

Placement of page elementssome design conventions exist

• navigation left or top of page(with text links repeated at bottom)

• logo top left or centre (as link to home page)

User expectations study

• conducted at Wichita State University usability research lab (2000)

• 304 participants (128 male, 183 female)

• age range 18-63 (average 20)

• Internet experience > 1yr (mean 3 yrs)

• primary surfing goal - education

User expectations study

Summary: screen real estate

• content should dominate (50-80%)

• important info ‘above the fold’

• place common page elements according to user expectations & conventions

Download times

“Every usability study I have conducted since 1994 has shown the same thing: users beg us to speed up download times”

Jakob Nielsen, 2000

Critical time factors

.01 second limit for system to appear to beinstantaneous (ie applets for screen movement)

1 second limit before user’s flow of thought isinterrupted (though delay would be noticed)

10 seconds limit for keeping the user’s attentionfocused (so 10 seconds max. for a page to load)

Miller on response times (1968)still considered valid:

Factors affecting response times• throughput of the server

• server’s connection to the net

• user’s connection to the net

All of these outside web author’s control

• bottlenecks on the net

Factors affecting response times• browser rendering speeds

- complex tables

• weight of page components - in kilobytes

Both of these are within web author’s control

Complex tables

avoid them!

• reduce nesting (often produced by graphical authoring tools)

• break longer tables up (make first table small for

fast loading)

Graphics & multimedia

• mimimise use of graphics

• optimise images

• reuse images where possible

• careful use of multimedia

Page weight limits

What is maximum acceptable weight of page?

• based on survey of top 50 web sites in July 1999

• top ten average size - 34.4Kb

• bottom ten average size - 61.3Kb• average size - 47.8Kb

Vincent Flanders, August 1999

Page weight limits

1 second 10 seconds

modem 2Kb 34Kb

ISDN 8Kb 150Kb

T1 100Kb 2Mb

Jakob Nielsen, 2000

Page weight examples

Google – 13Kb

Yahoo – 29Kb

Hotmail - 18Kb

Amazon - 65Kb to 87Kb

Page weight examples

Monash Uni – 28Kb

LaTrobe Uni - 55Kb

Melbourne Uni - 75Kb

Deakin Uni - 39Kb

Summary: download times

• response times consistently raised by users

• some response time issues outside our control

what we can do:• simplify tables

• rationalise and optimise multimedia

• aim for pages around 34Kb

HTML layout techniques

3 layout techniques:

• stylesheets• frames• tables

2 page width options:

• fixed width• variable width

Stylesheets

technically the ‘right’ way:

• separates content from presentation

• allows content to be accessible on multiple devices and browsers

however:

• problem with legacy browsers &different browser implementations

Stylesheets: advice on use

Use stylesheets to:

• handle all text formatting

• handle all table colours

Move to layout with CSS as soon as possible

Frames: implementation

Commonly used for layout, to maintain navigation bar on screen.Often poorly implemented:

• orphan pages

• frames too small for content

• bookmarking problems

• external link problems

Frames (example)

Frames: user model

break user’s conceptual model (single page)

• one page made up of several pages

• one page made up of several URLs

• confusing to some users

Frames: advice on use

• preferably, don’t use them• if you must use them:

• ensure no orphan pages

• check on different displays to ensure all content fits• enable bookmarking

• don’t trap pages in your frames

Tables

Commonly used for layout

• can slow page download

• often badly coded (nesting)

• not accessible to all browsers

Tables: advice on use

If you must use them for layout:

• keep them simple

• use table summaries

Page width: fixed

• can look lonely on high resolution displays- centering the design will help

• will hold content in place as designed- only in graphical browsers- only if user hasn’t overridden font size

• can be useful for containing text at readablepage width

• which width to use?- problems with printing over 600px wide- some users don’t know how to change display resolution

Page width: variable

• adjusts to users’ display resolution

• adjusts for printing- need to take care with width of images,

tables, form elements

• text chunks can be too wide to read- can be held in place by fixed width cell

Summary: HTML layout techniques

• use stylesheets wherever possible

• avoid use of frames

• use tables with care

• weigh up pros & cons of fixed vsvariable page widths

Interoperability

• browsersgraphical (IE, Netscape, Opera)non-graphical (Lynx, W3M)

• operating systemsWindows, MacOS, Unix, Linux, etc.

• devicesPDAs, WAP-enabled phones, etc.

What to aim for

accessible to

• your target audience

• widest audience possible

Know your audience

• target audience profiles- info on browser/platform usage

• intranet sites- SOE?

• special purpose sites- designed for specific device/os

what do you know about your users?

Know your audience

Know your audience

make use of 3rd party statistics

www.nua.ie/surveys

statmarket.com

How to do it?

• use standards- HTML/XHTML/CSS- Web Content Accessibility Guidelines

• validate- validator.w3.org- jigsaw.w3.org/css-validator/- cast.org/bobby

How to do it?

• test

- various graphical browser types- various browser versions- text browsers- multiple platforms

Test toolsSimulation of lynx text browserwww.delorie.com/web/lynxview.html

Simulation of older browserswww.delorie.com/web/wpbcv.html

Strips illegal HTML markup www.delorie.com/web/purify.html

Disability access checkerwww.temple.edu/inst_disabilities/piat/wave/

Summary

• visual design & layout

• download times

• use of screen real estate

• HTML techniques for layout

• interoperability

ReferencesJakob NielsenDesigning Web Usability, 2000

Steve KrugDon’t Make Me Think, 2001

Patrick J Lynch and Sarah HortonWeb Style Guide, 1999http://info.med.yale.edu/caim/manual

World Wide Web Consortiumhttp://www.w3c.org/