Web Design vs. GUI Design

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