1. Designing for the User Experience Darlene Fichter Data Library Coordinator University of Saskatchewan Library Darlene.Fichter@usask.ca Computers In Libraries 2004 Intranet Professionals Academy

2. Outline User experience Web design Usability testing

3. User experience Defined as how a product behaves and is used in the real world “Everything the user experiences should be the result of a conscious decision on your part” Think about possible actions and user expectations Jesse James Garrett. The Elements of User Experience: User- Centered Design for the Web

4. Totality of the intranet Jesse points out that the user experiences the "totality of the intranet" - not one piece separate from another. We rise and fall together.” Interface Visible Invisible Content, Architecture and Tools

5. Layers Strategy – user needs, objectives Scope – functional requirements, content Skeleton – interface, interaction, and information design Surface – visual design Structure – IA, interaction design Jesse James Garrett

6. Where does user experience start? It’s all about your intranet audience

7. Primary characteristics of an intranet audience Employees are focused on getting the job done Typically expert users Don’t want fluff Diverse Experience Usage patterns Nature of their work Engineers Financial analysts Marketers Customer support

8. Novice / occasional users Intimidated by complex menus Like unambiguous structure Apples or Oranges, not both! Easy access to overviews that illustrate how information is arranged Maps FAQs Glossary of technical terms, acronyms, abbreviations Visual layouts & graphics that trigger their memory Tendency is to design for this type of user Adapted from Patrick Lynch and Sarah Horton, Web Style Guide. Yale University Press, 1999.

9. Expert/frequent users Depend on speed and accuracy Impatient with low-density graphics that offer only a few choices Prefer stripped down, fast loading text menus Have specific goals Appreciate detailed text menus, site structure outlines, comprehensive site indexes, well designed search engines Want accelerators – ways to bypass the fluff Adapted from Patrick Lynch and Sarah Horton, Web Style Guide. Yale University Press, 1999. The majority of intranet users fall into this category, eventually

10. What do intranet users want? Research study by Head & Staley Looked at 6 “research” intranets Synopsys in Mountain View, Calif. Fireman's Fund Insurance Company Gale Group Bechtel Chevron Gilead Sciences Sun Microsystems Started with survey to identify what information intranet users want Alison Head and Shannon Staley. On-the-Job Research: How Usable Are Corporate Intranets? Special Libraries Assoc. 2002

11. Top 10 things employees need to know 1. Company contact information 76% 2. Internal news about what’s happening in the company 76% 3. Press coverage mentioning the company 60% 4. Press coverage about a topic or company 52% 5. Company policies or guidelines 45%

12. Top 10 things (con’t) 6. Information about competitors 45% 7. Maps 43% 8. Contact information outside of the company 36% 9. Latest analyst report 36% 10. Background on unfamiliar company 33%

13. Design Touch Points Going from “general” to “specific” Create profiles of key user groups Managers, market analysts, other groups Who are your major publishers Who are your top users? Identify the personality traits of user types Analyze the tasks that they will perform Distributed non-profit Intranet – priorities very different from research Intranets

14. How well do intranets do? “Our research studies in a wide variety of corporations show very low satisfaction among users of corporate intranets. It's important that corporate intranet teams start focusing on the information content that end-users consider mission- critical.“ Anthea Stratigos, Outsell's CEO

15. Can employees find what they want on intranets? 10 tasks Overall 44% success rate Head & Staley

16. Determining visitor needs Focus groups User surveys Observation Usage reports Questions Web log analysis Search log analysis Formal assessment

17. Keeping the user front and center Personas Usability testing Consult often Invite comments and feedback

18. Visual design – scratching the surface Builds upon the other layers Concerned with look and feel Visual elements Color Typography Layout Images Menus

19. Text heads or next heads?

20. Design goal Support the site’s message Be appropriate Have unity and variety Aid the site’s functionality Transparent to the user Good design is clear thinking made visible; Bad design is stupidity made visible. Edward Tufte

21. The message What colors are associated with your organization and the material for your intranet? Are the colors vivid, pastel, primary, saturated, cool, trendy, classic What culture are you trying to create? Formal, informal, engaging, playful What images do you associate with the organizations, services or product?

23. Porfolio http://www.mrozekassoc.com/turnerdesignstudio/projects.asp

24. Porfolio http://www.onlinedesigninc.com/portfolio-web.htm

25. Porfolio http://vollaro.com/folio/HHPA/intranet02.htm

26. JPL Portal: Screen Shot of Inside JPL from Jayne Dutra’s presentation http://www.kmworld.com/kmw03/presentations/Dutra1.pps

27. My departmental Intranet

28. Porfolio http://www.planet-tech.com/web.htm

29. Unity and variety Consistency of visual design Fonts, colors, layout, styles Branding Need both consistency and some variety to liven it up

30. Support function Use color and layout organize information and facilitate groups and zones Use it judiciously give prominence to important elements and draw the eye

32. Visual design pitfalls Inconsistency Set standards Gratuitous use of design for design sake refusing to prioritize Well balanced team Dense text Read the research, learn what works Site wide vs. page level 95% of the effort on the top page

33. Site level vs. page Level Traditional design Greatest emphasis is on site wide issues Navigation Content Visual identity For intranets, both matters Micro-content cannot be neglected Need to be concerned about information design not just graphic design

34. How users read on screens How do people read on the screen? Top to bottom Left to right Focus first on the micro-content Scroll to the bottom Only after failing - side menu - top menu

35. Reading 25% slower on the screen compared to equivalent on paper

36. Research shows people don’t read People who are looking for information don't read, they scan. Most people will not read instructions or help pages Even when this would benefit them Less is more Understanding is higher with fewer words are used

37. “Scanability” Create page titles, headings and subheadings Be consistent in designing titles/headings Use font and/or color to offset headings Be careful with emphasis Bold or size, but not both Eyes are tuned to small differences No need to SHOUT at users Use bulleted lists and links Bullets when sequence doesn’t matter Numbers when it does Use lists when you have key concepts, not full sentences

38. “Scanability” tips Lists speed up scanning but slow down reading Design for “scent” Be concise & pithy  Use a much smaller word count than conventional writing Write in pyramid style Use parallel construction Avoid jargon

39. Scanning mistakes and how to avoid them Classic mistakes with links Overused – everything is a link Use long, descriptive links and headings Enables users to eliminate items more easily UIE’s research shows that links with 4 to 9 words are more effective then short linkslinks with 4 to 9 words are more effective

40. Design trends Portals and portlets Manage syndicated, chunked content Buckets or zones Typography as design CSS based templates Fluid rather than fixed

41. Example

42. Keep in mind Gorilla in an Armani suit is still a gorilla The Inmates are Running the Asylum. Alan Cooper

43. What really works? The font is too small. The font is too big. The search box is confusing. The red is too red. Place controls above the box.

44. Need ways to measure What works Usability testing Log analysis Feedback forms During web design and development stages, usability testing helps provide feedback on design ideas.

45. What is usability? Ease of use Ease of learning Fitness for purpose An effective product Definition from Dorothy Kushner

46. Types of usability testing Heuristic evaluation Cognitive walkthroughs Preference testing Task Based testing Field studies

47. Cognitive walkthrough Performed by development team Collective walkthrough of site Assessment of whether the user has the information to confidently make the next right action

48. Assessing How easy is the system to learn? Can it be learned by exploration? Is site elements support the user achieving their goal? Which don’t?

49. What’s required Detailed description of the system Prototype Location of items on the screen and wording should be filled in Representative tasks Complete list of steps that need to be taken to complete the task Indication of the user type and experience Personas (user scenarios, user cases)

50. Document the problems A recorder should note problems on the detailed task sheet: By step in the task Give a description of the problem Note the severity

51. Task based testing Sample of real users Perform specific tasks on the site Evaluators watch record observations

52. Guerilla task based testing Idea popularized by Jakob Nielsen Showed that simple “low tech” testing of five to seven users could yield excellent results Not everyone agrees with this though 5-7 users will typically uncover 80% of site-level usability problems

53. Preparing for task based testing What do you want to know? Decide who to test Design your tasks

54. Example tasks 1.Find the phone number of the head of Human Resources. 2.Submit your travel expense claim. 3.Update the staff directory to include a new department head in sales. 4.Locate the sales statistics for all of the offices in the midwest region.

55. Paper mockups or live site

56. Analyzing the results: typical measures Time - how many seconds Errors - incorrect answers User can’t complete the task User is slowed down User is annoyed or irritated slightly Satisfaction

57. Participant Task Number 12345MedianMean 160540240 280 2840506012090267.5 3600300240300380 4180300240 5 8058175170 150.6 6420 7180 Summary of results

58. User satisfaction User satisfaction (subjective) For example 1.Overall I found the intranet easy to use 2.The words used on the intranet were easy to understand Web Site ease of use Very easy Average Very Difficult 1 2 3 4 5

59. Report Summarizes findings List problems List strengths Recommend changes Recommend further testing

60. Why test? Self-reporting is notoriously inaccurate You can’t believe what users say Anecdotal information is impossible to quantify Self referential design ROI - save everyone time and money Helps avoid web team “battles” Provide evidence for convincing others Your manager Your peers Do it for the users.

61. When to test? Pre-design & evaluation Early design stage Wire frame or prototype Visual design Beta site

62. Key Points to Remember Ben Schneiderman "Design test design test design test." Edward Tufte "Design think design think design think." Jesse James Garrett The user experiences the "totality of the intranet.“

63. Questions? Darlene Fichter Data Librarian University of Saskatchewan darlene.fichter@usask.ca