Download slides - Teaching Web Server

Designing usable web pages
(introduction to usability, part 2)
ISMT multimedia 2002
Dr. Vojislav B. Mišić
Usable web page design
 Why? Because page design is the most immediately
visible part of web design
 What are we going to talk about:
 Visual design & layout
 Use of screen real estate
 Download times
 HTML techniques for layout
 Interoperability
ISMT Multimedia: Introduction to Usability 2 slide 2 © 2002 Dr. Vojislav B. Mišić
How eye movement affects design
 Visual information processing is very much
dependent on eye flow
 The more eye flow is required within a visual field,
the less information can be received and processed
 The need to minimize eye movement is even more
important online, because



Users' attention span is short
It's harder to read from screen than from printed material
Users don't read – they scan
ISMT Multimedia: Introduction to Usability 2 slide 3 © 2002 Dr. Vojislav B. Mišić
Gutenberg diagram
 The way we're taught to
read affects our text
scanning (left-to-right,
top-to-bottom)

Of course, Chinese can be
read in other ways
 In the diagram:




POA is Primary Optical Area
TA is Terminal Anchor
Wavy lines denote eye
resistance
+ denotes the so-called fallow
areas
ISMT Multimedia: Introduction to Usability 2 slide 4 © 2002 Dr. Vojislav B. Mišić
Eye movement and shapes
Elements on web pages create visual shapes:
text, images,
buttons, icons,
input boxes, etc.
The rule is:
Position shapes so
as to minimize
eye movement
ISMT Multimedia: Introduction to Usability 2 slide 5 © 2002 Dr. Vojislav B. Mišić
Shapes create grids
 Draw imaginary lines to
check the grids and grid
alignment
 Grids help predict eye
movement
 Grids help us check
placement and
alignment of page
elements
ISMT Multimedia: Introduction to Usability 2 slide 6 © 2002 Dr. Vojislav B. Mišić
Example page grid (1)
ISMT Multimedia: Introduction to Usability 2 slide 7 © 2002 Dr. Vojislav B. Mišić
Example page grid (2)
ISMT Multimedia: Introduction to Usability 2 slide 8 © 2002 Dr. Vojislav B. Mišić
Visual Hierarchy
 There is a relationship between information
processing and visual depiction of hierarchical
relationships
 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… (Krug, 2000)
ISMT Multimedia: Introduction to Usability 2 slide 9 © 2002 Dr. Vojislav B. Mišić
Goals of visual hierarchy 1
 Make important elements bigger, bolder (i.e., stand
out)
 Position important elements close to the top of the
page
 Use whitespace around elements to make them stand
out
ISMT Multimedia: Introduction to Usability 2 slide 10 © 2002 Dr. Vojislav B. Mišić
Visual hierarchy example (1a)
ISMT Multimedia: Introduction to Usability 2 slide 11 © 2002 Dr. Vojislav B. Mišić
Visual hierarchy example (1b)
ISMT Multimedia: Introduction to Usability 2 slide 12 © 2002 Dr. Vojislav B. Mišić
Goals of visual hierarchy 2
 Show relationships between elements
 …through the use of positioning (grouping, nesting,
proximity)
 …through appropriate presentation styles (size, color,
orientation, font)
ISMT Multimedia: Introduction to Usability 2 slide 13 © 2002 Dr. Vojislav B. Mišić
Visual hierarchy example (2a)
ISMT Multimedia: Introduction to Usability 2 slide 14 © 2002 Dr. Vojislav B. Mišić
Visual hierarchy example (2b)
ISMT Multimedia: Introduction to Usability 2 slide 15 © 2002 Dr. Vojislav B. Mišić
Goals of visual hierarchy 3
 Help users' scanning and comprehension by
 …creating sufficient contrast between page elements
 …using meaningful headings and subheadings
 By providing occasional visual relief between dense
chunks of text
ISMT Multimedia: Introduction to Usability 2 slide 16 © 2002 Dr. Vojislav B. Mišić
Visual hierarchy example (3a)
ISMT Multimedia: Introduction to Usability 2 slide 17 © 2002 Dr. Vojislav B. Mišić
Visual hierarchy example (3b)
ISMT Multimedia: Introduction to Usability 2 slide 18 © 2002 Dr. Vojislav B. Mišić
Text alignment and readability
 Alignment options: left, right, centered, justified
(limited), or a mixture of these
 Left alignment is commonly used in Western
typography because of reading convention – since
we're used to scan the text from left to right, left
aligned text is easier to read
 Other alignment options are used less often
ISMT Multimedia: Introduction to Usability 2 slide 19 © 2002 Dr. Vojislav B. Mišić
Text alignment example (1)
ISMT Multimedia: Introduction to Usability 2 slide 20 © 2002 Dr. Vojislav B. Mišić
Text alignment example (2)
ISMT Multimedia: Introduction to Usability 2 slide 21 © 2002 Dr. Vojislav B. Mišić
Legibility
 Among the factors that affect legibility are
 …typeface and size of letters (font)
 …use of colors
 …contrast
 A recent study by Software Usability Research Lab,
Wichita State University, 2000: 35 participants, each
of them with a normal 20/20 vision, had to read eight
passages of text typeset in different ways, measuring
speed and accuracy



Typefaces used: Times New Roman and Arial
Font sizes: 10 and 12 pt
Fonts with or without anti-aliasing
ISMT Multimedia: Introduction to Usability 2 slide 22 © 2002 Dr. Vojislav B. Mišić
Test results (1)
 There were differences in speed, but no significant
differences in detection of errors
ISMT Multimedia: Introduction to Usability 2 slide 23 © 2002 Dr. Vojislav B. Mišić
Test results (2)
 Interestingly enough, users did not express
preference for the font that resulted in fastest
reading
ISMT Multimedia: Introduction to Usability 2 slide 24 © 2002 Dr. Vojislav B. Mišić
What fonts do we use?
 For users with good (normal) vision, there is little
difference in Times New Roman vs. Arial, and also
little difference in using 12- vs. 10-point font
 However, not all users have good vision, so maybe 12
pt would be a safer default
 Plus, users should be allowed to override this default
if they want to
ISMT Multimedia: Introduction to Usability 2 slide 25 © 2002 Dr. Vojislav B. Mišić
More on text
 Also, text is harder to read
 …WHEN IT'S ALL IN UPPERCASE
 …when it's blinking
 …when it's moving across the screen (marquee style)
 …when it's zooming (either way)
ISMT Multimedia: Introduction to Usability 2 slide 26 © 2002 Dr. Vojislav B. Mišić
Color and contrast
 Use colors with good contrast:
black on white ('positive text) is best
white on black ('negative text') is next best
 Use plain backgrounds
ISMT Multimedia: Introduction to Usability 2 slide 27 © 2002 Dr. Vojislav B. Mišić
Contrast – example (1)
color
contrast
insufficient
ISMT Multimedia: Introduction to Usability 2 slide 28 © 2002 Dr. Vojislav B. Mišić
Contrast – example (2)
• busy background image
• insufficient color contrast
ISMT Multimedia: Introduction to Usability 2 slide 29 © 2002 Dr. Vojislav B. Mišić
Summary of visual design
 Eye movement & comprehension:



Elements create shapes on page
Shapes create grids
Align shapes, minimize grids
 Visual hierarchy and comprehension



Show prominence
Show relationships (similarity, parent/child)
Aid visual scanning
 Legibility




Left alignment of text works best
Use larger default fonts, and allow the users to adjust font size
Use good contrast, preferably black on white
Don't use busy background images
ISMT Multimedia: Introduction to Usability 2 slide 30 © 2002 Dr. Vojislav B. Mišić
Use of screen real estate
 Do users want:
 …to see whose products you're advertising?
 …to evaluate your navigation system?
 …to admire your graphic design skills?
 Well, no: the users come to your site for CONTENT!
 Nielsen recommends that you devote 50 to 80% of
your screen area to content
ISMT Multimedia: Introduction to Usability 2 slide 31 © 2002 Dr. Vojislav B. Mišić
Screen real estate (example 1a)
ISMT Multimedia: Introduction to Usability 2 slide 32 © 2002 Dr. Vojislav B. Mišić
Screen real estate (example 1b)
ISMT Multimedia: Introduction to Usability 2 slide 33 © 2002 Dr. Vojislav B. Mišić
Screen real estate (example 1c)
ISMT Multimedia: Introduction to Usability 2 slide 34 © 2002 Dr. Vojislav B. Mišić
Screen real estate (example 1d)
ISMT Multimedia: Introduction to Usability 2 slide 35 © 2002 Dr. Vojislav B. Mišić
Design ‘above the fold’ and scrolling
 'above the fold' is, in fact, a newspaper term –
denoting the headings that can be seen when the
newspapers are folded and stacked for sale
 In web pages: make sure the important information
can be seen right away, i.e., in first screen view
 The location of the 'fold' may vary because of display
resolution: 640x480 is not common any more,
800x600 or 1024x768 is more standard these days
 Also, browser toolbars take up some space
 Safe bet: about 300 pixels
ISMT Multimedia: Introduction to Usability 2 slide 36 © 2002 Dr. Vojislav B. Mišić
‘Above the fold’ (example 1a)
ISMT Multimedia: Introduction to Usability 2 slide 37 © 2002 Dr. Vojislav B. Mišić
‘Above the fold’ (example 1b)
ISMT Multimedia: Introduction to Usability 2 slide 38 © 2002 Dr. Vojislav B. Mišić
Page length and scrolling
 With regards to scrolling: early studies have shown
that most users would not scroll the page down …
 Not true any more (users are more knowledgeable
now, they know when they can scroll)
 …but still: users WILL scroll only IF they think they're
on the right page AND there's something to look for
 Rule says: first page should have just one screen,
second one can have one or two, subsequent pages
can be longer
 But watch out: some pages may be accessed directly,
which makes THEM first ones 
ISMT Multimedia: Introduction to Usability 2 slide 39 © 2002 Dr. Vojislav B. Mišić
Placement of page elements
 Some design conventions exist, such as
 …navigation left or top of page, with text links
repeated at bottom
 …logo top left or center (as link to home page)
 Another user study at Wichita State U, with about
300 participants, mean surfing experience about
3yrs, main goal: education
ISMT Multimedia: Introduction to Usability 2 slide 40 © 2002 Dr. Vojislav B. Mišić
User expectations study
ISMT Multimedia: Introduction to Usability 2 slide 41 © 2002 Dr. Vojislav B. Mišić
Summary: screen real estate
 Content should dominate (take up 50-80% of the
screen area)
 Important information should be positioned 'above
the fold'
 Common page elements should be positioned
according to user expectations and, ultimately,
conventions
ISMT Multimedia: Introduction to Usability 2 slide 42 © 2002 Dr. Vojislav B. Mišić
Download times and time limits
 Every usability study I have conducted since 1994
has shown the same thing: users beg us to speed up
download times (Nielsen, 2000)
 Miller's findings about response times (1968) are still
considered valid:
 .01 second limit for system response to appear
instantaneous (i.e., applets for screen movement)
 1 second limit before user’s flow of thought is
interrupted (though delay would be noticed)
 10 seconds limit for keeping the user’s attention
focused (so 10 seconds max. for a page to load)
ISMT Multimedia: Introduction to Usability 2 slide 43 © 2002 Dr. Vojislav B. Mišić
Factors affecting response times
 Server response and throughput
 User's connection to the Internet
 Current traffic and congestion
 All of the above are beyond web designer's control –
but those below are not:
 Weight of page and page components (actually, just
the file sizes in KB)
 Screen content, esp. complex tables (may take long
to render)
ISMT Multimedia: Introduction to Usability 2 slide 44 © 2002 Dr. Vojislav B. Mišić
Graphics and multimedia content
 Minimize use of graphics
 Optimize images (use GIFs instead of JPEGs, or use
lower size JPEGs)
 Use as small images as possible, esp. for background
 Reuse images where possible
 Be careful with media content (good practice is to
provide a LINK to the object and indicate its size – in
other words, download at your own risk)
 Top ten pages had average of about 34.4KB, bottom
ten were at 60+KB (Flanders, 1999)
ISMT Multimedia: Introduction to Usability 2 slide 45 © 2002 Dr. Vojislav B. Mišić
Summary: download times
 Response time issues consistently raised by users
 Some response time factors may be controlled by the
web designer
 What can (and should) be done:



Simplify tables
Rationalize and optimize multimedia
Aim for pages below 30 to 40KB
ISMT Multimedia: Introduction to Usability 2 slide 46 © 2002 Dr. Vojislav B. Mišić
HTML layout techniques
 HTML provides a number of layout techniques, such
as
 Stylesheets
 Frames
 Tables
 Plus, your pages can have fixed or variable width
ISMT Multimedia: Introduction to Usability 2 slide 47 © 2002 Dr. Vojislav B. Mišić
Stylesheets
 Technically, this is the RIGHT way, as stylesheets
 …enable separation of content from presentation
 …allow content to be accessed on multiple devices
and browsers
 Use stylesheets to


Handle text formatting
Handle table colors
 Move layout to CSS as soon as possible
 However, there may be problems with a few older
browsers (less and less of a problem, though)
ISMT Multimedia: Introduction to Usability 2 slide 48 © 2002 Dr. Vojislav B. Mišić
Frames
 Commonly used for layout – esp. to maintain a
navigation bar on screen at all times
 However, frames are often poorly implemented, with
faults such as
 Orphan pages
 Too small size to hold all content
 Bookmarking problems
 External link problems
ISMT Multimedia: Introduction to Usability 2 slide 49 © 2002 Dr. Vojislav B. Mišić
Frames (example)
ISMT Multimedia: Introduction to Usability 2 slide 50 © 2002 Dr. Vojislav B. Mišić
Frames: user model
 The main problem with frames is rather simple: they
break user's conceptual model




web page is considered to be a SINGLE page
With frames, one page contains several pages
…even several URLs
…which may be confusing to some users
 Preferably, DON'T use frames
 But if you must, double check for issues like




Presence of orphan pages
Good fit on ALL frames
Pages from other URLs trapped in your frames
Whether bookmarking is allowed
ISMT Multimedia: Introduction to Usability 2 slide 51 © 2002 Dr. Vojislav B. Mišić
Tables
 Commonly used for controlled layout (as opposed to
free HTML text, which depends on many factors, and
can always be overridden by the user)
 However, tables can take time to render
 Tables are often badly coded (contain too many
nesting levels – this is often produced by
development tools)
 Tables may be rendered slightly differently by
different browsers or browser versions
ISMT Multimedia: Introduction to Usability 2 slide 52 © 2002 Dr. Vojislav B. Mišić
As for tables:
 The rule is simple: AVOID THEM! whenever possible
 …or at least, KEEP THEM SIMPLE
 Whenever possible, reduce nesting of tables
 Whenever possible, break longer tables into a
number of smaller ones – they will load faster and
they will be rendered faster
 In particular, make the FIRST table to appear as
small as possible
 If you use a table to present some information
(rather than just to organize elements visually), write
a table summary and put it on TOP of the table
ISMT Multimedia: Introduction to Usability 2 slide 53 © 2002 Dr. Vojislav B. Mišić
Pages with fixed width…
 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 readable
page width
 And, of course, there is the question: which width to
use?


problems with printing over 600px wide
some users don’t know how to change display resolution
ISMT Multimedia: Introduction to Usability 2 slide 54 © 2002 Dr. Vojislav B. Mišić
Pages with variable width…
 Adjust to users’ display resolution
 Adjust for printing – but you need to take care of
image widths, tables, form elements, otherwise they
may not get printed
 May have text chunks that are too wide to be read
comfortably

Consider putting such text inside fixed width cells
ISMT Multimedia: Introduction to Usability 2 slide 55 © 2002 Dr. Vojislav B. Mišić
Summary: HTML layout techniques
 Use stylesheets wherever possible
 Avoid frames
 Use tables with care
 Think twice about pros and cons when deciding
whether to use fixed or variable width pages
ISMT Multimedia: Introduction to Usability 2 slide 56 © 2002 Dr. Vojislav B. Mišić
Interoperability
 Browsers: may be graphical but also non-graphical
 Operating systems: Windows, MacOS, Unix, Linux, …
 Devices: PDAs, mobile phones, …
 What you should aim for:
 Your design should be accessible to YOUR target
audience in the first place
 If possible, your design should be accessible to ALL
audiences
ISMT Multimedia: Introduction to Usability 2 slide 57 © 2002 Dr. Vojislav B. Mišić
Know your audience
 What do you know about your users?
 Target audience profiles (find information on
platform/browser usage)
 Intranet sites
 Special purpose sites
 Make use of 3rd party statistics, such as


www.nua.ie/surveys
www.statmarket.com
ISMT Multimedia: Introduction to Usability 2 slide 58 © 2002 Dr. Vojislav B. Mišić
Know your audience
ISMT Multimedia: Introduction to Usability 2 slide 59 © 2002 Dr. Vojislav B. Mišić
How to do it?
 Use standards: XHTML, CSS
 Follow web content accessibility guidelines
 Test your design




various graphical browser types
various browser versions
text browsers
multiple platforms
 Validate your design at



validator.w3.org
jigsaw.w3.org/css-validator/
cast.org/bobby
ISMT Multimedia: Introduction to Usability 2 slide 60 © 2002 Dr. Vojislav B. Mišić
Test tools
 Simulation of lynx text browser:
www.delorie.com/web/lynxview.html
 Simulation of older browsers:
www.delorie.com/web/wpbcv.html
 Strips illegal HTML markup:
www.delorie.com/web/purify.html
 Disability access checker:
www.temple.edu/inst_disabilities/piat/wave/
ISMT Multimedia: Introduction to Usability 2 slide 61 © 2002 Dr. Vojislav B. Mišić
References
 Jakob Nielsen, Designing Web Usability, 2000
 Steve Krug, Don’t Make Me Think, 2001
 Patrick J Lynch and Sarah Horton, Web Style Guide,
1999 (at http://info.med.yale.edu/caim/manual)
 World Wide Web Consortium at http://www.w3c.org/
ISMT Multimedia: Introduction to Usability 2 slide 62 © 2002 Dr. Vojislav B. Mišić