Embed Size (px)
Citation preview
Designing for the User Experience
Darlene FichterData 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.”
InterfaceVisible
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, 1999.
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 wantAlison 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
44
66SuccessFailure
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 http://www.mrozekassoc.com/turnerdesignstudio/projects.asp
Porfolio http://www.onlinedesigninc.com/portfolio-web.htm
Porfolio http://vollaro.com/folio/HHPA/intranet02.htm
JPL Portal: Screen Shot of Inside JPL from Jayne Dutra’s presentation http://www.kmworld.com/kmw03/presentations/Dutra1.pps
My departmental Intranet
Porfolio http://www.planet-tech.com/web.htm
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 links
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 measureWhat 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 taskUser is slowed downUser is annoyed or irritated slightly
Satisfaction
Participant
TaskNumber
1 2 3 4 5 Median Mean
1 60 540 240 240 280
2 840 50 60 120 90 267.5
3 600 300 240 300 380
4 180 300 240 240
5 240 80 58 175 170 170 150.6
6 420 420 420
7 180 180 180 180
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 useVery easy Average Very Difficult
1 2 3 4 5
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.“
