1 / 51

Web Design vs. GUI Design

Web Design vs. GUI Design. CS 160 Slides from Prof. James Landay March 2, 2005. Hall of Shame or Hall of Fame?. College of Arts & Crafts http://www.ccac-art.edu/. Hall of Shame. College of Arts & Crafts http://www.ccac-art.edu/ What is this page about? no first read

normacummings
Download Presentation

Web Design vs. GUI Design

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Web Design vs. GUI Design CS 160 Slides from Prof. James Landay March 2, 2005

  2. Hall of Shame or Hall of Fame? • College of Arts & Crafts • http://www.ccac-art.edu/

  3. 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

  4. 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? • 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

  5. Hall of Shame, but why?? content gets a small %

  6. Web Design vs. GUI Design CS 160 Slides from Prof. James Landay March 2, 2005

  7. Outline • Example of value of good web design • Diffs between web & desktop UIs • Top ten mistakes in web design

  8. 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

  9. Jakob Nielsen • Self-described Web Guru • worked on Hypertext long before the web • Great mailing list / archive site • http://www.useit.com/alertbox/

  10. 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

  11. Desktop-based Wizard

  12. Web-based Wizard What is the difference?

  13. 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...

  14. Desktop Dialog Box

  15. Web Dialog Box

  16. Web Dialog Box What are the differences?

  17. “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!

  18. 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

  19. Other Differences • Device diversity • don’t know what they will be browsing on Web Server Internet

  20. 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

  21. Top Ten Mistakes in Web Design Should be controversial - feel free to disagree • From 1996 (original list) • 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

  22. 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

  23. 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)

  24. 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?

  25. 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

  26. What Might be Wrong Here?

  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.

  28. What Might be Wrong Here?

  29. What Might be Wrong Here?

  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

  31. What Might be Wrong Here?

  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 ***

  33. What Might be Wrong Here?

  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!

  35. What Might be Wrong Here?

  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

  37. What Might be Wrong Here?

  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...

  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

  40. Top Ten Mistakes in Web Design Should be controversial - feel free to disagree • From 1996 • From 2004 (has a new list each year) Top Ten Mistakes in Web Design 2004, http://www.useit.com/alertbox/9605.html

  41. 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

  42. 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

  43. 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

  44. 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

  45. 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

  46. 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

  47. 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: • subheads • bulleted lists • highlighted keywords • short paragraphs • the inverted pyramid • a simple writing style, and • de-fluffed language devoid of marketese

  48. 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

  49. 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

  50. 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

More Related