Web Design vs. GUI Design
Professor James Landay
Carnegie Mellon
Updated by Melody Moore Jackson 11/15/06
3/6/2002
1
Hall of Shame or Hall of Fame?
•
College of Arts & Crafts
–
3/6/2002
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/6/2002
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?
–
–
•
no first read
no value proposition
How do I navigate?
–
3/6/2002
http://www.ccac-art.edu/
Links are more clear
4
Hall of Shame, but why??
content gets
a small %
3/6/2002
5
Web Design vs. GUI Design
•
•
•
•
Review
Example of value of good web design
Diffs between web & desktop UIs
Top ten mistakes in web design
3/6/2002
6
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/6/2002
7
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/6/2002
8
Desktop-based Wizard
3/6/2002
9
Web-based Wizard
3/6/2002
What is the difference?
10
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/6/2002
11
Desktop Dialog Box
3/6/2002
12
Web Dialog Box
3/6/2002
13
Web Dialog Box
What are the differences?
3/6/2002
14
“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/6/2002
15
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 loading speed
– reduce graphics
– improve server performance
3/6/2002
16
Other Differences
• Device diversity
– don’t know what they will be browsing on
Web
Server
Internet
3/6/2002
17
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/6/2002
18
Top Ten Mistakes in Web Design
Should be controversial - feel free to disagree
Top Ten Mistakes in Web Design
1996, http://www.useit.com/alertbox/9605.html
3/6/2002
19
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
• True even for business sites
– busy during day & surf at home for work info
3/6/2002
20
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/6/2002
21
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/6/2002
22
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 showing where you currently are
3/6/2002
23
Navigation
• Left-justified or top-justified navigation rail
– Needs to be a contrasting color
– Fitt’s law – place navigation close to scroll bar
– Content should start on the left
http://www.amazon.com
3/6/2002
24
Navigation
• Location breadcrumb trail
– Usually across top under navigation bar
http://www.usdf.org
3/6/2002
25
What Might be Wrong Here?
3/6/2002
26
Mystery Meat Navigation
http://www.customstaffinginc.com/
3/6/2002
27
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/6/2002
28
What Might be Wrong Here?
3/6/2002
29
What Might be Wrong Here?
3/6/2002
30
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/6/2002
31
What Might be Wrong Here?
3/6/2002
32
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/6/2002
33
What Might be Wrong Here?
http://www.neiu.edu/~fldept/flanglab/
3/6/2002
34
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/6/2002
35
What Might be Wrong Here?
http://www.mjau-mjau.com/classic.html
3/6/2002
36
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/6/2002
37
What Might be Wrong Here?
3/6/2002
38
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/6/2002
39
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/6/2002
40
References
• Nielsen’s top 10 list (required reading)
– http://www.useit.com/alertbox/9605.html
• Web pages that are interesting
– http://www.bloatedyak.com/
• Net tips for designers
– http://www.dsiegel.com/tips/
• User Interface Engineering
– http://www.uie.com
3/6/2002
41
In-Class Exercise
• Look through the site:
• www.websitesthatsuck.com
• Choose a “worst website” and evaluate it
against the ten top website design mistakes
3/6/2002
42