Designing Web Sites for Usability

1. Designing Web Sites for Usability Bebo White Stanford Linear Accelerator Center bebo@slac.stanford.edu

2. Caveat • Interface Design, HCI, Usability, etc. is a well-established research discipline • remember “user-friendly” systems? • Web systems (pages, sites, etc.) represent the largest application of user interface principles • content providers and authors also become interface designers • Web usability has become almost hopelessly intertwined with other technologies and issues (e.g., accessibility, internationalization, etc.)

3. What is Usability? “The usability of an interface is a measure of the effectiveness, efficiency and satisfaction with which specified users can achieve specified goals in a particular environment with that interface.” (International Organization for Standardization, ISO)

4. Encountering Usability • When selecting a computer system (hardware + software), the accepted process is to assess: • Functionality – will the system do what is needed? • Usability – will the users be successful in their use of the system? • Likeability – will the users feel the system is suitable? • These three elements constitute “Acceptability” • Does the same process apply to Web pages/sites?

5. Components of Usability

6. Components of Usability • Learnability - the ease with which new users can begin effective interaction and achieve satisfactory performance • Flexibility - the number of ways the user and the page/site can exchange information • Robustness - the level of support provided the user in determining successful achievement and assessment of goals

7. What is Usability? (2) • We cannot say that if a system obeys a set of formal principles then it will be usable • Some formal principles are necessary for usability; any system which breaks them is bound to have problems • Formal principles form a “safety net” to prevent some of the worst mistakes but do not ensure a good design

8. Usability as One Component of Acceptability • Appropriate affect • Match with the medium • Consistent graphic vocabulary • Visual order and user focus • Illusion of manipulable objects • Revealed structure

9. Usability as a Tradeoff Space • User differences on priorities and interpretation

10. What is Design? • Design is conscious • Design keeps human concerns in the center (e.g., usability, affordance, attention) • Design is a dialog with materials (technologies, prototyping) • Design is communication (e.g., conceptual models, metaphors, genre) • Design has social consequences (e.g., work structure, social responses)

11. What is Design? (2) • Design is a social activity (e.g., participatory design, creative process) • Design is a tradeoff among many concerns • The relationship of design to other engineering activities and programming • Designing spaces for living – similarities between software design and architecture • Design processes and methods

12. Usability and Design Designing for maximum usability is the goal of interactive systems design; The challenges to the designer of an interactive system are: • how can the system be developed to ensure its usability? • how can the usability of an interactive system be demonstrated or measured?

13. Web Design Process

14. Usability Evaluation Design Specialties User Interface Design • Information Architecture • encompasses information & navigation design • User Interface Design • also includes testing and evaluation Information Architecture Information Design Navigation Design Graphic Design

15. Web Site Design Process Discovery Design Exploration Design Refinement Production … followed by implementation & maintenance

16. Assess needs understand client’s expectations determine scope of project characteristics of users evaluate existing site and/or competition Design ProcessDiscovery Discovery Design Exploration Design Refinement Production

17. Design ProcessDesign Exploration Make multiple designs • visualize solutions to discovered issues • information and navigation design • early graphic design • select one design for development Discovery Design Exploration Design Refinement Production

18. Design Process Design Refinement Develop the design • increasing level of detail • heavy emphasis on graphic design • iterate on design Discovery Design Exploration Design Refinement Production

19. Design ProcessProduction • Prepare design for handoff • create final deliverable • specifications, guidelines, and prototypes • as much detail as possible Discovery Design Exploration Design Refinement Production

20. Listen to Users – What Do You Hate About the Web? • Slow downloads • Can’t find what I want or what I find is outdated • Poor graphic design and layout • Hard to navigate • Gratuitous use of “bells and whistles” • Inappropriate tone • Designer-centeredness • Lack of attention to detail

21. Listen to Users – What Do You Like About the Web? • Aesthetics • Big ideas • Utility • “Findability” • Personalization

22. Top Ten Issues in Web User Experience

23. 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 • Web is getting slower, not faster

24. Download and Response Times • Response times: • 0.1 second: interaction appears instantaneous; no special feedback needed except to display result • 1.0 second: the limit for the user’s flow of thought to stay uninterrupted, even though the user will notice the delay. No special feedback needed. • 10 seconds – the limit for keeping the user’s attention focused on the dialog; feedback needed

25. Impact of Page Size and Bandwidth on Download and Response Times

26. 9. Outdated Information • Most people would rather create content than do maintenance • Cheap way of enhancing content • link to new pages if still relevant • otherwise remove them • Outdated content also leads to a lack of trust (important for e-commerce)

27. 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! • this is a “Web Design Pattern” • What is unfortunate about this convention?

28. 7. Lack of Navigation Support • Users don’t know much about a 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 • outline structure showing where you currently are

29. What Might be Wrong Here?

30. 6. Long Scrolling Pages • Many users do not scroll beyond visible section when page completes • All critical content & navigation should be on the top part of the page • 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.

31. 5. Orphan Pages • All pages should have a clear indication of what Web site they belong to • users may not come in through a home page • Every page should have • a link up to a home page • some indication of where they fit within the structure of your information space

32. What Might be Wrong Here?

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

34. What Might be Wrong Here?

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

36. What Might be Wrong Here?

37. What Might be Wrong Here?

38. 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 • Caveat: appropriate if selling those products

39. What Might be Wrong Here?

40. What Might be Wrong Here?

41. 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? • Sometimes can’t bookmark the current page & return to it • URLs stop working • can’t share with others (lose social filtering) • emailing links still doesn’t work...

42. Frames (2) • Search engines have problems with 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; Frames are not evil, bad use of frames is evil

43. Usability Guidelines • Simple and natural dialogue • Speak the users’ language • Minimize the users’ memory load • Consistency • Visual look • Command semantics • Conceptual model

44. Usability Guidelines (cont) • Feedback • Clearly marked exits • Shortcuts • Good error messages • Prevent errors • Help and documentation

45. In Summary-The Ten Usability Principles 1. Motivate • Design site to meet specific user needs and goals • Use motivators to attract different user “personae” in specific parts of the site

46. 2. User Taskflow • Who are the users? • What are their tasks and online environment? • For a site to be usable, page flow must match workflow

47. Perceiving the Audience/User • Is it a captive audience? (e.g., an intranet) - then it’s easy….otherwise • User surveys/user feedback mechanisms • Analysis of legacy audience information • public affairs office • customer support, technical support, etc. • legacy online systems

48. Perceiving the Audience/User (cont) • Lessons learned from non-Web methods - e.g., brochures, catalogs, mailings • Demographic information - e.g., geography, online, education, etc. • Sampling - population samples, “beta” testers • Experience • Definition of a new audience

49. 3. Architecture • 80% of usability • Build an efficient navigational structure • “If they can’t find it in three clicks, they’re gone”

50. 4. Affordance Means Obvious • Make controls understandable • Avoid confusion between logos, banners, and buttons