Download - Web Design vs. GUI Design
Web Design vs. GUI Design
Professor James LandayCarnegie Mellon
Updated by Melody Moore Jackson 11/15/06
3/6/2002 1
Hall of Shame or Hall of Fame?
• College of Arts & Crafts– http://www.ccac-art.edu/
3/6/2002 2
Hall of Shame
• College of Arts & Crafts– http://www.ccac-art.edu/
• What is this page about?– no first read– no value proposition
• How do I navigate?– tiny links at the very bottom– scrolled off many screens!
• Second page…– how do I do anything?– fonts so small you can’t
read at all on a high-res monitor
3/6/2002 3
Now improved….
• College of Arts & Crafts– http://www.ccac-art.edu/
• What is this page about?– no first read– no value proposition
• How do I navigate?– Links are more clear
3/6/2002 4
Hall of Shame, but why??
3/6/2002 5
content gets a small %
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 Saleshttp://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 10What is the difference?
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
3/6/2002 14
What are the differences?
“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
3/6/2002 17
Internet
WebServer
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
3/6/2002 19
Top Ten Mistakes in Web Design1996, http://www.useit.com/alertbox/9605.html
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
3/6/2002 27
http://www.customstaffinginc.com/
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?
3/6/2002 34
http://www.neiu.edu/~fldept/flanglab/
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?
3/6/2002 36
http://www.mjau-mjau.com/classic.html
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