Web Design vs. GUI Design
CS 160
Slides from Prof. James Landay
March 2, 2005
3/2/05
1
Hall of Shame or Hall of
Fame?

College of Arts & Crafts

3/2/05
http://www.ccac-art.edu/
2
Hall of Shame

College of Arts & Crafts


What is this page about?




tiny links at the very
bottom
scrolled off many
screens!
Second page…


3/2/05
no first read
no value proposition
How do I navigate?


http://www.ccac-art.edu/
how do I do anything?
fonts so small you can’t
read at all on a high-res
monitor
3
Now improved….

College of Arts & Crafts


What is this page about?



tiny links at the very bottom
scrolled off many screens!
Second page…


3/2/05
no first read
no value proposition
How do I navigate?



http://www.ccac-art.edu/
how do I do anything?
fonts so small you can’t read at all on
a high-res monitor
4
Hall of Shame, but why??
content gets
a small %
3/2/05
5
Web Design vs. GUI Design
CS 160
Slides from Prof. James Landay
March 2, 2005
3/2/05
6
Outline
 Example of value of good web design
 Diffs between web & desktop UIs
 Top ten mistakes in web design
3/2/05
7
Good Web Site Design can
Lead to Healthy Sales
 NY Times on IBM web site, 8/30/99
 “Most popular feature was … search … because people
couldn't figure out how to navigate the site“
 “The second most popular feature was the help button,
because the search technology was so ineffective.”
 After the redesign, use of the “help” button
decreased 84 percent, while sales increased 400
percent
 Good Web Site Design can Lead to Healthy Sales
http://www.nytimes.com/library/tech/99/08/cyber/commerce/30commerce.html
3/2/05
8
Jakob Nielsen
 Self-described Web Guru
 worked on Hypertext long before the web
 Great mailing list / archive site
 http://www.useit.com/alertbox/
3/2/05
9
The Web Page Represents...
1) User's view of information on screen
2) Unit of navigation
 what you get when you click a link / bookmark
3) Address to get info. over net (URL)
4) Storage of the information
 on the server & the author's editing unit
 except embedded objects like images
 Page is an atomic unit unifying these concepts
3/2/05
10
Desktop-based Wizard
3/2/05
11
Web-based Wizard
3/2/05
What is the difference?
12
Where is the Application &
the State?
 Back (previous) in desktop wizards
 typically undoes any changes made on that step
 Back on web pages
 is it the “back” button of the browser?
 server isn’t necessarily aware of it - no change to state
 is it the “back” link on the page?
 server could do something to state with this
 can you keep the user from using browser’s back?
 with some work… but not a good idea
 Clearly defined exits are important
 obvious on the desktop example, but not the web...
3/2/05
13
Desktop Dialog Box
3/2/05
14
Web Dialog Box
3/2/05
15
Web Dialog Box
What are the differences?
3/2/05
16
“What am I Buying?”
 Desktop apps bring up dialogs boxes
 usually smaller than main window
 leave you context (below) about your main task
 Web apps bring you to a new page
 need to move back & forth to get context
 browser “forward” may lose old values after a “back”
 often a LARGE delay between page loads
 need to remember context over time!
3/2/05
17
Solutions to the Context
Problem
 Repeat context
 add new information to the current page
 appears to the user as if page is expanding
 Optimize pages for min loading speed
 reduce graphics
 improve server performance
3/2/05
18
Other Differences
 Device diversity
 don’t know what they will be browsing on
Web
Server
Internet
3/2/05
19
Other Differences
 The user controls navigation




users can take paths you never intended
come in via search engines directly to pages
bookmark favorite pages
email from friends
 Can’t depend on people starting from homepage
 Part of a whole experience
 users move between sites
 where are the borders? not as clear
3/2/05
20
Top Ten Mistakes in Web Design
Should be controversial - feel free to
disagree
1. From 1996 (original list)
2. From 2004 (most up to date)
(has a new list each year)
Top Ten Mistakes in Web Design
1996, http://www.useit.com/alertbox/9605a.html
3/2/05
21
10. Overly Long Download Times
 10 second rule
 amount of wait time before users lose
interest
 traditional human factors studies back this up
 15 seconds may be acceptable on web
 people are getting trained to endure
 but only for a few key pages
3/2/05
22
9. Outdated Information
 Hire a web gardener for your team
 “root out the weeds and replant the flowers”
 Most people rather create content than
do maintenance
 Cheap way of enhancing content
 still relevant  link to new pages
 otherwise remove them
 Outdated content also leads to a lack of
trust (important for e-commerce)
3/2/05
23
8. Non-standard Link Colors
 Links to
 pages that haven’t been seen are blue
 previously seen pages are purple/red
 Don't mess with these colors
 one of the few standard navigational aides
 consistency is important for learning
 don’t underline other objects with blue/red!
 OBVIOUS LINKS (K10)
 What is unfortunate about this convention?
3/2/05
24
7. Lack of Navigation Support
 Users don’t know much about your site
 they always have difficulty finding information
 give a strong sense of structure and place
 Communicate site structure
 provide a site map
 so users know where they are & where they can go
 provide a good search feature
 the best navigation support will never be enough
 People now expect these
 site logo in upper left linked to home page
 LOCATION BREAD CRUMBS (K6) showing where you currently are
3/2/05
25
What Might be Wrong Here?
3/2/05
26
6. Long Scrolling Pages
 Many users do not scroll beyond visible section
when page comes up
 All critical content & navigation should be ABOVE
THE FOLD (I2)
 Leaf nodes can be longer
 people who have that interest will be reading it
 still good to be brief
 Becoming less of an issue
 top items will STILL dominate
 should be careful not to go past 3 screens max.
3/2/05
27
What Might be Wrong Here?
3/2/05
28
What Might be Wrong Here?
3/2/05
29
5. Orphan Pages
 All pages should have a clear indication of what
web site they belong to
 users may not come in through your home page
 Every page should have
 a link up to your home page
 some indication of where they fit within the structure
of your information space
3/2/05
30
What Might be Wrong Here?
3/2/05
31
4. Complex URLs
 Shouldn’t have exposed machine address
 Users try to decode URLs of pages
 to infer the structure of web sites
 lack of support for navigation & sense of location
 URL should be human-readable
 names should reflect nature of the info. space
 sometimes need to type in URL->minimize typos
 use lower-case, short names with no special chars
• many people don't know how to type a ~
 Long URLs are hard to email properly
 wrapping, etc. *** biggest issue today ***
3/2/05
32
What Might be Wrong Here?
3/2/05
33
3. Constantly Running
Animations
 Don’t have elements that move
incessantly
 moving images have an overpowering effect
on the human peripheral vision
 no animations, scrolling text, marquees
 Users tune them out
 so do not put anything important there!
 Give your user some peace and quiet to
actually read the text!
3/2/05
34
What Might be Wrong Here?
3/2/05
35
2. Gratuitous use of
Bleeding Edge Technology
 Don’t try to attract people using it
 you’ll get the nerd crowd, but mainstream users care
about content and service
 If their system crashes
 they will never come back
 E.g., use VRML if your info maps to 3d
 architectural design or surgery planning
 Caveat: appropriate if selling those products
3/2/05
36
What Might be Wrong Here?
3/2/05
37
1. Using Frames
 Confusing for users
 breaks the user model of the web page
 sequence of actions rather than single act
 unit of navigation no longer equal to unit of view
 Lose predictability of user actions
 what information appears where when you click?
 can’t bookmark the current page & return to it
• fixed in Explorer 5
 URLs stop working
 can’t share with others (lose social filtering)
• emailing links still doesn’t work...
3/2/05
38
Frames (cont.)
 Search engines have problems w/ frames
 what part of frames do you include in
indexes?
 Early surveys found most users preferred
frame-less sites
 recent surveys back this up ~70-90%
 Caveat: experienced designers can
sometimes use frames to good effect
3/2/05
39
Top Ten Mistakes in Web Design
Should be controversial - feel free to
disagree
1. From 1996
2. From 2004
(has a new list each year)
Top Ten Mistakes in Web Design
2004, http://www.useit.com/alertbox/9605.html
3/2/05
40
10. Not Answering Users’
Questions
 Examples:
 Avoid listing prices of products & services
 Product specifics buried under marketese and
slogans
 Causes: Loss of sales
 Give information clearly, up front, easy to
find & search
3/2/05
41
9. Opening New Browser
Windows
 Takes control of user’s machine
 Clutters with open windows
 Disables back button
 Since user often don’t notice new window,
this is confusing
 Link doesn’t behave as expected
 undermines user’s understanding of system
3/2/05
42
8. Violating Design Conventions
 Consistency is powerful usability principle
 The more expectations are matched, the
more users feel in control of system
 Users spend most of their time on other
websites
 Deviating from conventions makes users
feel insecure
3/2/05
43
7. Anything that Looks like an
Advertisement
 Web users have learned to stop paying
attention to ads
 Exception: text-only search ads
 Avoid designs that look like ads
 banner blindness
 animation avoidance
 pop-up purges
3/2/05
44
6. Page Titles With Low Search
Engine Visibility
 Titles used
 In search listings
 Search is the most important way to find sites
 Default entry in “Favorites” list
 Don’t start w/ “Welcome to” or “The”
 Use a few salient words that describe site
3/2/05
45
5. Fixed Font Size
 CSS style sheets enable disabling a Web
browser's "change font size" button
 Let users resize text
 Specify font sizes in relative terms -- not as
an absolute number of pixels
 Small text reduces readability for users
over 40 yrs old
3/2/05
46
4. Non-Scannable Text
 A wall of text is deadly for an interactive
experience. Intimidating. Boring. Painful to read.
 Write for online, not print. Hints:







3/2/05
subheads
bulleted lists
highlighted keywords
short paragraphs
the inverted pyramid
a simple writing style, and
de-fluffed language devoid of marketese
47
3. Not Changing the Color of
Visited Links
 Visited link colors enable understanding of
past navigation & current location
 Enables users to
 Revisit useful links
 Avoid un-useful links
3/2/05
48
2. PDF Files for Online Reading
 User hate PDFs: breaks flow of browsing





optimized for printed paper, not screen
small fonts
no smooth scrolling
not easily searched
hard to navigate
 PDFs good for: printing & distributing
documents
3/2/05
49
1. Bad Search
 Search engine should:
 handle typos, plurals, hyphens, &
other variants of query terms
 return “best bet” returns, not
pages that contain most query
terms
 Simple search usually works
best
3/2/05
50
References
 Nielsen’s top 10 list
 http://www.useit.com/alertbox/9605.html
 Web pages that suck
 http://www.webpagesthatsuck.com/
 Net tips for designers
 http://www.dsiegel.com/tips/
 User Interface Engineering
 http://www.uie.com
3/2/05
51