Download here - Department of Electrical Engineering & Computer Science

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
Nov 27
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.
Nov 27
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.
Nov 27
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.
Nov 27
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.
Nov 27
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.
Nov 27
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.
Nov 27
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?
Nov 27
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.
Nov 27
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
Nov 27
http://www.access-board.gov
11
Testing accessibility requirements
Automated tool
Nov 27
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.
Nov 27
13
HTML Validator
Nov 27
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.
Nov 27
http://usability.gov/guidelines/accessibility.html#one
15
Colour Blindness (approx. 5% of males)
Nov 27
http://usability.gov/guidelines/accessibility.html#one
16
Dealing with colour blindness
Nov 27
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.
Nov 27
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
Nov 27
http://usability.gov/guidelines/page_length.html#length
19
Example - IBM home page
600 pixels
800 pixels
Nov 27
20
Content is the Interface Example
www.yahoo.ca
Nov 27
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
Nov 27
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.
Nov 27
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
Nov 27
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
Nov 27
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
Nov 27
26
Web Palette / Browser-safe colors
Nov 27
http://www.lynda.com
27
Internationalization
Do not use acronyms and abbreviationsdifficult/confusing to translate
Adhere to local formats for date, time, money,
measurements, addresses, and telephone
numbers.
Be particularly careful with images such as
religious symbols (crosses and stars)
the human body
hand gestures
flags
Nov 27
28
Translation Expansion Requirements (1)
Besturingselement
Olvadaci prvek
Ohjausobjekti
Steuerelement
Control
(Dutch)
(Czech)
(Finnish)
(German)
(English)
English is very concise- allow additional screen
space for translation.
Nov 27
29
Translation Expansion Requirements (2)
Numbers of Characters in Text
Field labels and menu options
Up to 10
11-20
Messages and on-screen instructions
21-30
31-50
Online help and documentation
51-70
Over 70
Additional Space
100-200%
80-100%
60-80%
40-60%
31-40%
30%
From National Language Technical Center, IBM (1991)
Nov 27
30
Mystery Meat Navigation
Having to mouse over icons to see
what they correspond to
Goes against the fundamental
purposes of a website discussed
earlier.
Nov 27
http:// www.fixingyourwebsite.com/mysterymeat.html
31
Web Page Guidelines (1 of 2)
Strike a balance between
Textual information
Graphics
Links
Avoid horizontal scrolling
Place critical or important information
at the very top so it is always viewable
when the page is opened.
Nov 27
32
Web Page Guidelines (2 of 2)
Use frames with caution.
Don’t break links. Users will bookmark
the page that interests them and not
necessarily take the path you create.
(search engines)
Provide sufficient white space
(minimum 30%)
Anticipate page breaks
Nov 27
33
Home Page Guidelines
Limit to one screen
Clearly identify the Web site’s content
and purpose
Elements to include:
Site overview or map
Navigation links to most (if not all) of the
site or major sections
Some useful content
Nov 27
34
Further Research
When to open new browser windows, and
when to display new content in current
browser window?
Literature has not yet adequately answered
this question.
Difficult question to answer, highly
dependent on the type of user, and the task
involved.
Nov 27
35
UI Examples
Real world user interface examples
Giving the user choices is good?
•This issue may be
important to a
programmer but the
user doesn’t care.
•Every time you
provide an option
you’re asking the user
to make a decision.
•Why is this dialog a “wizard”?
Nov 27
•Don’t force the user
to make decisions
about things they
don’t care about.
Adapted from User Interface Design for Programmers, J. Spolsky, 2001
37
Icon Design
63%
91%
Example from Highway Safety, percent of licensed drivers who
can explain the meaning of each sign.
Nov 27
From Smiley & Bahar, The Science of Highway Safety, Durham, March 2002
38
Where’s Waldo?
Nov 27
http://www.iarchitect.com/mshame.htm
39
Error Message
The message is entirely unhelpful, gives no
indication of what the error is, what to do to solve it,
or even the location of an error log if one existed.
Nov 27
http://www.iarchitect.com/mshame.htm
40
More Error Messages
Nov 27
41
Requests for Proposals
User Interface Requirements
User Interface Requirements (1)
Free Text to Use in Your Request for Proposals (RFPs)
1. The software should be usable without
reading a printed guide. If the complexity of
the tasks being automated cannot feasibly be
embedded into the software interface,
reading a printed guide may be unavoidable.
In this case, the most that any individual user
should have to read for a particular role is 50
pages-short enough to read in one sitting.
Nov 27
http:// www.usabilityinstitute.com/articles/RFPInterfaceRequirements.htm
43
User Interface Requirements (2)
2. Users should be able to accomplish every
task and entry with the fewest possible
keystrokes. For instance, dates should not
necessitate typing four digits for the year
unless the context of the given field leaves
considerable doubt as to which millennium
might be intended. In many cases, keying in
any characters at all for the year may be an
unnecessary expense of the users' time.
Nov 27
44
User Interface Requirements (3)
3. The interface should enable all interaction techniques and
input to be discoverable and chosen from a browse-able,
hierarchical structure, arranged in order of the functions the
user needs to perform. Until recently this simply meant
supplying an exhaustive menu or menu-like outline of
choices, supported by dialogs with options and click-able
choices. More recently, this requirement is being satisfied
by multiple graphical choices, in the form of icons and
segmented, click-able graphics known by various names,
such as imagemaps. In either case, what this requirement
specifically precludes is reliance solely on any of the
following techniques: command line syntax; parameter (INI)
file options not built into the interface; techniques
supported only by combination keystrokes, mouse
techniques, or combinations thereof; techniques requiring
knowledge of special, manually entered values.
Nov 27
45
User Interface Requirements (4)
4. The software should enable users to do
things out of order without being penalized.
5. The software should enable users to make
outright mistakes without being terminated,
executed, canceled, re-booted, or erased.
6. The system should save all of what the users
type, by default, meaning without extra steps.
7. Users should be forewarned when any work
is over-written, undone, or erased.
8. The interface and messages should make it
clear why the program does what it does.
Nov 27
46