1. Keep Your on Your Users Darlene Fichter President, Northern Lights Internet Solutions Ltd. fichter@lights.comfichter@lights.com www.lights.comwww.lights.com Frank Cervone Director of the Office for Instructional Technology Development DePaul University http://www.depaul.edu/~fcervone/ Designing Usable Library Sites

2. Introductions...  Who are you?  Where do you work?  What type of web design experience have you had?  What is your role with the web site? Overview

3. Outline  Overview of web design  Design principles for library sites  Stages of web site development –Techniques and tests  Conclusion Overview

4. Usability is Usability is the combination of fitness for purpose, ease of use, and ease of learning that makes a product effective. »Dorothy Kushner Overview

5. Bad design  Examples?  Do you ever use them again?  Do you feel loyal? Overview

6. Design principles for library sites 1. Your site should be intuitive. –Stick to the familiar –What do your users know already? Design Principles: Intuitive

7. Portal Excite University of Alberta Library Design Principles: Intuitive

8. Other styles Classic Page Design Principles: Intuitive

9. 2. Be consistent  Set a style guide and enforce it Design Principles: Consistent

10. 3. Fit the audience  Visual design and interaction should fit your audience Design Principles: Fit audience

11. This site appeals to ? Adult Children Design Principles: Fit audience

12. 4. It should work!  Seems obvious, doesn’t it? But …  On one library site (that will remain nameless) the site search didn’t work for months Design Principles: Work

13. 5. Be polite*  Users should not feel stupid  Be supportive  Remember you  If library web sites were like Automated Teller Machines … * The Inmates are Running the Asylum by Alan Cooper Design Principles: Polite

14. Where should you start?  User focus design begins inside your head.  Focus on them, not you. Design Principles

15. Know yourself  What are your biases? “next head” vs “text head” Design Principles

16. Mastery is only for some  Librarians are like geeks – both take pride in mastering “hard stuff”.  Remember the cryptic syntax of online searching?  We enjoy mental challenges. Most users don’t. Design Principles

17. Observe the web!  Be critical, be self aware, be conscious  Ask: What’s good about this? What isn’t good about this? Design Principles

18. Ottawa Public Library Design Principles

19. Main menu Design Principles

20. Catalogue search Author Stephen King Design Principles

21. Results screen Design Principles

22. Summary  To be good at designing usable sites, you need to think like your users.  Strive for simplicity. Design Principles

23. Web Development Stages

24. Stages of development  Goals & purpose  Audience  Content & organization  Navigation & interactivity  Micro-content  Visual design prototypes  Beta testing  Monitoring & evaluation Stages

25. A plan helps... There is nothing more important than the strategy phase. If you don’t spend time on it, it’s like being on a dark road without your headlights on. Drue Miller, Webmistress Vivid Studios Stages: Goals

26. Your goals Goals must be:  Timely  Measurable  Achievable  Related to specific audience(s)  Related to organizational priorities/needs Stages: Goals

27. Your users’ goals  Focus groups  User surveys (print, web)  Needs assessment  Library - observation, usage reports, reference questions  Web log analysis, search log analysis Stages: Goals

28. Focus groups  Ask them and they will tell you  Useful for getting inside the users’ minds  Great at the beginning of the design or redesign process  Tricky to do well for a couple of reasons Stages: Focus Groups

29. Focus group - pitfalls Users don’t know what they want, can’t articulate what they want, and articulate things different from what they actually do want, based on how they later act when you give them what they thought they wanted. Michael “Mac” McCarthy Web Publishing Inc Stages: Focus Groups

30. Analyze your data  Observation, logs, surveys  What are they doing RIGHT NOW?  Do you get positive or negative feedback?  What do you observe …? Stages: Goals

31. Web logs show...  Who (IP)  When  Where  How often  What Stages: Goals

32. Define your audience  Who are you trying to reach?  Can you identify all the key audiences?  “Perpetually intermediates”*  Result - personalize, customize * The Inmates are Running the Asylum by Alan Cooper Stages: Audience

33. Audience profile  Needs assessment  Surveys  Company data - demographic data, job type …  Chunk your audience into groups Stages: Audience

34. Typical users Stages: Audience  User Scenarios

35. Content & organization  Inventory what is there  Identify what’s missing  What’s hot and what’s not  Cluster  Define labels Stages: Content

36. Mental models  How do your users grasp and understand your site? “tip of the iceberg” Stages: Content

37. Four techniques 1. Peer analysis 2. Index cards –Cluster, list 3. Index cards –What goes under each heading? Stages: Content

38. Techniques… 4. Cognitive walkthrough -Simulate a user’s problem-solving process as they step through the site -Can the user make the next correct action? Stages: Content

39. Measurement scale  FATAL User can’t complete the task  SERIOUS User is slowed down  SUPERFICIAL User is annoyed or irritated slightly Stages: Content

40. Hartford Hospital Stages: Content

41. Yale Library Stages: Content

42. Why is content organization so hard?  Libraries have so much content  Information overload  Jargon  Mental models - international audience, metaphors,... Stages: Content

43. Research - categories  Search is faster/users are happier when: –Information is in columns, not rows –Categorical rather than alphabetical –See all the links, not mouse-overs (at first) Stages: Content

44. Research - alphabetical Stages: Content

45. Categories - columns Stages: Content

46. U of Saskatchewan Stages: Content

47. Bozeman Public Library Stages: Content

48. Navigation and interaction The goal of navigation is to reduce the cognitive effort on the part of the user by following a pattern the user easily understands. Stages: Navigation

49. Common complaints  Too confusing  Vague  Disorientation – “lost in the web”  “Art museum” effect Stages: Navigation

50. Sense of place  Color coding and consistent logos and banners  Bread crumb navigation Stages: Navigation

51. Techniques and tests  Web site audit  Cognitive walkthrough  Pluralistic walkthrough  Heuristic testing by evaluators  Task testing with users Stages: Navigation

52. Usually use  Paper mockups  Wire frames Stages: Navigation

53. Logo Search Index Comment Catalogue Resources and links Library Publications External Publications “Company” Publications Virtual Tour Hours Library Staff News & Announcements Welcome back to ….. News Item 1 This is a news item here. News Item 2 This is another news item. ©2000, Library Name street address, city, phone, email Stages: Navigation

54. Web site audit  Compare your site against a comprehensive list of guidelines such as The Web-Site Design Audit with 101 guidelines. See handout. www.eng.buffalo.edu/~ramam_m/au_fr.html Stages: Navigation

55. Heuristic evaluation*  Find evaluators - experience helps  Brief them on 10 usability heuristics (handout)  Test to see if site follows established usability principles *Heuristic Evaluation by Jakob Neilson *Usability Heuristics for the Web by Keith Instone Stages: Navigation

56. Heuristic evaluation (1)  Evaluators try to identify as many problems as possible  Rate the problems by their severity (1-5) and indicate which heuristic has been violated Stages: Navigation

57. Task testing with users  Users are given specific tasks  Verbalize their thoughts  Only AFTER they have failed, can you provide direction  Observe, record, and debrief Stages: Navigation

58. Task: typical measures  Time - how many seconds?  Errors - incorrect answers?  Site structure - can they draw a map  User satisfaction (subjective) Other measures: What the user can recall about the site or if they can manoeuvre easily on the screen space. Stages: Goals Stages: Navigation

59. Intranet measurement For Intranets, give added weight to:  Task time  Errors  Site structure  Search Stages: Goals Stages: Navigation

60. Microcontent - Writing for the Web  Short concise writing works best  Inverse pyramid style (newspaper)  Use headings and subheadings to enhance scanability  Use emphasis and color judiciously to attract the user’s attention Stages: Micro-content

61. Documents  Need to decide when to –“chunk” documents into pieces by their intellectual content –keep as a whole so to facilitate printing and off line use  Most library handouts, pathfinders and search guides lend themselves to “chunking”

62. Headlines and Links  Use meaningful headlines and meaningful links (people scan for links - looking for scent) Some text here, “Click here” “Click here” Some text here, “Find a Book” “Find a Book” Stages: Micro-content

63. Research shows:  People scan, they don’t read  People read 25% slower on a screen than on paper  Bullets work vs. then white space, no space scores last Stages: Micro-content

64. Micro-content  Web site audit  Peer analysis  Heuristic testing by evaluators  Task testing Stages: Micro-content

65. Design prototypes  Focus group  Task testing  Screen mockups  Web site audit Stages: Design Prototypes

66. Screen mockups  “Greeking” the screen Stages: Design Prototypes

67. Beta site: inspections  Consistency/continuity –done by group  UI standards  Accessibility standards  Features Stages: Beta site

68. Beta site: testing  Task testing  Heuristic testing  Search testing  Stress testing  Web site audit  Surveys Stages: Beta site

69. Monitoring & evaluation  Logs  Site survey  Consistency inspection  Web site audit Stages: Monitoring

70. The question? The answer? Conclusion It depends!

71. Experience Good judgement comes from experience, and most of that comes from bad judgement. Conclusion

72. Thank You!  Frank Cervone Director of the Office for Instructional Technology Development DePaul University http://www.depaul.edu/~fcervone/  Darlene Fichter Northern Lights Internet Solutions Ltd. 215 -116 Innovation Blvd. Saskatoon, SK S7N 3R3 www.lights.comwww.lights.com fichter@lights.comfichter@lights.com Conclusion

73. Sacramento Public Library Stages: Beta site

74. 1. Logo 2. What’s New 3. Catalogue 4. Databases 5. Services 6. About the library 7. Contact 8. Site Search

75. 1 2 34 5 6 7 8 1. Logo 2. What’s New 3. Catalogue 4. Databases 5. Services 6. About the library 7. Contact 8. Site Search

76. Berkeley

77. 1 2 34 5 6 7 8 1. Logo 2. What’s New 3. Catalogue 4. Databases 5. Services 6. About the library 7. Contact 8. Site Search