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

Outline User experience Web design Usability testing

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

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

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

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

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

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.

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, The majority of intranet users fall into this category, eventually

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

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%

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%

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

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

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

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

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

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

Text heads or next heads?

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

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?

Porfolio

Porfolio

Porfolio

JPL Portal: Screen Shot of Inside JPL from Jayne Dutra’s presentation

My departmental Intranet

Porfolio

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

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

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

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

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

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

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

“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

“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

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

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

Example

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

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.

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.

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

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

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

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?

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)

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

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

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

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

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.

Paper mockups or live site

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

Participant Task Number 12345MedianMean Summary of results

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

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

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.

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

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

Questions? Darlene Fichter Data Librarian University of Saskatchewan