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/