Download ppt

Web Page Design
Focus on Usability
Sources
www.useit.com (Jacob Neilsen)
www.webpagesthatsuck.com (Vincent Flanders)
http://usability.gov/guidelines/
J. Johnson (2000) GUI Bloopers
W. O. Galitz (2002) The Essential Guide to
User Interface Design
P. Greenspun (1999) Philip and Alex’s Guide
to Web Publishing
2
WHY users visit a web site (1)
They want information - NOW.
They want to purchase something- NOW.
They want software, downloads, patches,
and they want it NOW.
Do you see a pattern?
Every extra button click, gratuitous animation,
poor navigational design, etc. delays the user.
3
WHY users visit a web site (2)
Possible web site exceptions
Entertainment sites (movies, games)
Non-profit sites
However for most websites the user does not
wish to be entertained, rather they want
something right away.
Remember, a competing web site is just one
click away.
4
A Good Web Site is One That
Makes it easy for users to find what
they are looking for.
Loads quickly.
Is easy to navigate.
Is informative.
5
Guideline disclaimer
They are not fixed rules, rather they
are rules of thumb, to use when
starting with nothing. Numerous
exceptions exist which depend upon
the user, task, and environment.
These guidelines are not etched in
stone, they have differed in the past
and will change in the future.
6
Web Site Usability Guidelines
A richer user interface is always harder to learn.
People who are visiting your site don’t want to
have to learn.
More cutting edge technology in a web site
generally decreases its usability.
Don’t break the browser’s navigational buttons.
Users should be able to go forward and
backwards at any time during their session.
Philip and Alex’s Guide to Web Publishing (1999, Morgan Kaufmann)
7
Common Web Usability Problems
Slow downloads because of large images,
many images, unnecessary animation, etc ...
Distracting and gratuitous animation that
runs continuously in the background
Designs that require users to scroll down or
across the page to see important content.
Web sites that format text in fixed-width or
proportional-width blocks rather than
letting the width of the user’s browser
determine the width of the text.
8
Design Guidelines from Tufte
Web pages should contain information, not
navigation or administration icons. The
information should become the interface.
Give users broad, flat overviews of the
information (table of contents), rather than
forcing them through sequential screens of
choices.
Organize your data according to expected user
interest, rather than internal structure of your
organization.
Why use icons for navigation when words are
clearer and take up less screen space?
Visual Explanations: Images and Quantities, Evidence and Narrative (1997, Graphics Press)
9
Three Click Rule
The "Three Click Rule" states that all
relevant parts of a website should be
accessible within three mouse-clicks
of the home-page.
Do not use an entry tunnel to your
website.
Do not dictate the navigational path to
your user.
10
USA Government Regulations
Federal Government Web sites are
required to follow the Section 508
Federal (Web) Accessibility Standards.
device independence
text alternatives to graphics and graphic
links
user controlled content display
http://www.access-board.gov
11
Testing accessibility requirements
Automated tool
http://bobby.cast.org
12
GUI vs. Web Page Design
In GUI design the layout of the screen
will look exactly as specified
(WYSIWYG). However no such
guarantee exists for web pages.
13
HTML Validator
http://www.anybrowser.com/validateit.html
14
Colour Selection
When foreground and background colours
are close to the same hue, they may provide
insufficient contrast on monochrome
displays and for people with certain types
of color deficits.
Maximum of four colours on the screen at
any one time, and in most cases two or
three.
http://usability.gov/guidelines/accessibility.html#one
15
Colour Blindness (approx. 5% of males)
http://usability.gov/guidelines/accessibility.html#one
16
Dealing with colour blindness
http://www.vischeck.com
17
Font Sizes
Use at least a 10-point font to achieve the best
possible reading performance.
Fonts smaller than 10-point elicited slower
performance from users. For people over 65, it may
be better to use at least 12 or 14 point.
18
Page Length
Use short pages (1-2 screens in length) for
home pages and all navigation pages
pages that need to be quickly browsed and/or
read online
pages with very long graphics
Use long pages (more than 2 screens) to
match the structure of a paper counterpart
make pages more convenient to download/print
http://usability.gov/guidelines/page_length.html#length
19
Example - IBM home page
600 pixels
800 pixels
20
Content is the Interface Example
www.yahoo.ca
21
Reasons to avoid using Flash
Flash encourages gratuitous animation
Flash breaks web fundamentals
The "Back" button does not work
Link colours don't work showing which
links you’ve seen
Flash reduces accessibility for users with
disabilities (ex. “make text
bigger/smaller” button does not work)
Flash integrates poorly with search
22
Text for Web Pages
Minimize the use of words that call
attention to the Web. Examples:
“This Web site”
“Click here”
“Follow this link”
How to test? Print out a page, read it and
see if it makes sense.
23
Graphics on Web Sites (1 of 3)
Use graphics as a supplement to textual
content, not as a substitute.
Convey information that can’t be effectively
accomplished using text (photographs,
video, diagrams)
Enhance navigation
presenting a site overview
identifying site pages
identifying content areas
24
Graphics on Web Sites (2 of 3)
Minimize the number of images.
More images  slower page download
Minimize the size of images
restrict single images to 5K
restrict page images to 20K
provide thumbnail size images
Produce images in the most appropriate
format
GIF
JPEG
25
Graphics on Web Sites (3 of 3)
GIFs are limited to 256 colors, and exist in
either a dithered or non-dithered format.
Dithered: colour-mixing process a computer
goes through when it encounters a colour
not in its palette. Palette colours are mixed
to approximate the appearance of the
desired colour the resulting colour may
be grainy or unacceptable
Non-dithered: closest palette colours are
chosen may also produced poor results
26
Web Palette / Browser-safe colors
http://www.lynda.com
27