Designing usable web pages

1
Designing usable web pages
Dey AlexanderWeb DesignerInfrastructure
ServicesPh 990 54740
2
Usable web page design
Page design is the most immediately visible part
of web design. Jakob Nielsen, Designing Web
Usability, p. 17
3
Overview

• visual design layout

• use of screen real estate

• download times

• HTML techniques for layout

• interoperability

4
Eye flow design
there is a relationship between

• eye flow

• information processing

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
5
Minimise eye movement
Need to minimise eye movement is even more
important online

• users attention span is short

• harder to read from screen

• users dont read, they scan

6
Eye movement during reading
The way we are taught to read has implications
for how we scan a screen

• left to right

• top to bottom

7
Gutenberg diagram
POA primary optical area
TA terminal anchor
Wavy lines eye resistance
fallow areas
Source Colin Wheildon Type Layout, 1996.
8
Eye flow page elements
Elements on web pages create shapes

• blocks of text

• images

• bullets, input boxes, etc.

9
Eye movement and shapes
Position elements to minimise eye movement
SourceYale Style Manual
10
Shapes create grids
Draw imaginary lines to check grids

• grids help predict eye movement

• grids help us check placement alignment of
  page elements

11
Example page grid (1)
12
Example page grid (2)
13
Visual hierarchy
there is a relationship between

• visual depiction of hierarchical rships

• 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
14
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

15
Visual hierarchy example (1a)
16
Visual hierarchy example (1b)
17
Goals of visual hierarchy (2)
to show relationships between elements

• use positioning grouping, nesting, proximity

• use presentation styles size, colour,
  orientation, font

18
Visual hierarchy example (2a)
19
Visual hierarchy example (2b)
20
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

21
Visual hierarchy example (3a)
22
Visual hierarchy example (3b)
23
Text alignment
alignment options

• left

• right

• centred

• justified (limited)

• mixture of above

24
Text alignment and readability
Left alignment is most commonly used

• eye scans from left to right

• easier to read

25
Text alignment example (1)
26
Text alignment example (2)
27
Legibility

• Factors that affect legibility

• font size, face
• use of colours
• contrast

28
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

29
Font size and face (2)
tested for

• speed
• accuracy

tested between

• Arial vs Times New Roman
• 10 points vs 12 points
• anti-aliased vs dot matrix fonts

30
Test results (1)
no significant differences in detection of errors
31
Test results (2)
users didnt prefer fastest font
32
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
33
More on text
Text is harder to read when

• ITS ALL IN UPPERCASE

• it is blinking

• it is moving (marquee style)

• it is zooming

34
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
35
Contrast example (1)
colour contrast insufficient
36
Contrast example (2)

• busy background image
• insufficient colour contrast

37
Summary visual design (1)

• eye movement comprehension

elements create shapes on page
shapes create grids
align shapes, minimise grids

• visual hierarchy comprehension

show prominence
show relationships (similarity, parent/child)
aid visual scanning
38
Summary visual design (2)

• text alignment comprehension

left alignment works best

• legibility

larger default font is bestdont prevent user
adjusting font sizeblack text on white
background best contrastdont use busy
background images
39
Use of screen real estate

• Do users want

• to see whose products youre advertising?

• to evaluate your navigationsystem?

• to admire your graphic design skills?

40
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
41
Screen real estate (example 1a)
42
Screen real estate (example 1b)
43
Screen real estate (example 1c)
44
Screen real estate (example 1d)
45
Design above the fold
above the fold newspaper term
Make sure important informationcan be seen in
first screen view
46
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

47
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
48
Above the fold (example 1a)
49
Above the fold(example 1b)
50
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!
51
Placement of page elements
some 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)

52
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 gt 1yr (mean 3 yrs)

• primary surfing goal - education

53
User expectations study
54
Summary screen real estate

• content should dominate (50-80)

• important info above the fold

• place common page elements according to user
  expectations conventions

55
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
56
Critical time factors
Miller on response times (1968)still considered
valid
.01 second limit for system to appear to
beinstantaneous (ie applets for screen movement)
1 second limit before users flow of thought
isinterrupted (though delay would be noticed)
10 seconds limit for keeping the users
attentionfocused (so 10 seconds max. for a page
to load)
57
Factors affecting response times

• throughput of the server

• servers connection to the net

• users connection to the net

• bottlenecks on the net

All of these outside web authors control
58
Factors affecting response times

• browser rendering speeds - complex tables

• weight of page components - in kilobytes

Both of these are within web authors control
59
Complex tables
avoid them!

• reduce nesting (often produced by graphical
  authoring tools)

• break longer tables up (make first table small
  for fast loading)

60
Graphics multimedia

• mimimise use of graphics

• optimise images

• reuse images where possible

• careful use of multimedia

61
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
62
Page weight limits
1 second 10 seconds
modem 2Kb 34Kb
ISDN 8Kb 150Kb
T1 100Kb 2Mb
Jakob Nielsen, 2000
63
Page weight examples
Google 13Kb
Yahoo 29Kb
Hotmail - 18Kb
Amazon - 65Kb to 87Kb
64
Page weight examples
Monash Uni 28Kb
LaTrobe Uni - 55Kb
Melbourne Uni - 75Kb
Deakin Uni - 39Kb
65
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

66
HTML layout techniques
3 layout techniques

• stylesheets

• frames

• tables

2 page width options

• fixed width

• variable width

67
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

68
Stylesheets advice on use
Use stylesheets to

• handle all text formatting

• handle all table colours

Move to layout with CSS as soon as possible
69
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

70
Frames (example)
71
Frames user model
break users conceptual model (single page)

• one page made up of several pages

• one page made up of several URLs

• confusing to some users

72
Frames advice on use

• preferably, dont use them

• if you must use them

• ensure no orphan pages

• check on different displays to ensure all
  content fits

• enable bookmarking

• dont trap pages in your frames

73
Tables
Commonly used for layout

• can slow page download

• often badly coded (nesting)

• not accessible to all browsers

74
Tables advice on use
If you must use them for layout

• keep them simple

• use table summaries

75
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 hasnt
  overridden font size

• can be useful for containing text at
  readablepage width

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

76
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

77
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

78
Interoperability

• browsers

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

• operating systems

Windows, MacOS, Unix, Linux, etc.

• devices

PDAs, WAP-enabled phones, etc.
79
What to aim for
accessible to

• your target audience

• widest audience possible

80
Know your audience
what do you know about your users?

• target audience profiles - info on
  browser/platform usage

• intranet sites - SOE?

• special purpose sites - designed for specific
  device/os

81
Know your audience
82
Know your audience
make use of 3rd party statistics
www.nua.ie/surveys
statmarket.com
83
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

84
How to do it?

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

85
Test tools
Simulation of lynx text browserwww.delorie.com/we
b/lynxview.html Simulation of older
browserswww.delorie.com/web/wpbcv.html Strips
illegal HTML markup www.delorie.com/web/purify.ht
ml Disability access checkerwww.temple.edu/inst_
disabilities/piat/wave/
86
Summary

• visual design layout

• use of screen real estate

• download times

• HTML techniques for layout

• interoperability

87
References
Jakob NielsenDesigning Web Usability,
2000 Steve KrugDont 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/