1

Essential UX Skills forTechnical Communicators

November 14, 2009

Mark RichmanInformation architect

WebSoSmart

Rachel PetersTechnical WriterAon eSolutions

Yina LiTechnical WriterHorizon Software

Will SansburyUX architect

Silverpop Systems

2

Thanks to User Insightfor hosting us today!

Tweet yourappreciation to@eholtzclaw!

3

Agenda

All times –ish. And we’ll throw in a potty break or two if you’re well behaved.

9:30 AM – 10:00 AM Coffee and networking

10:00 AM – 10:30 AM Heuristic evaluations

10:30 AM – 11:00 AM Card sorting

11:00 AM – 12:00 noon Usability testing

12:00 noon – 1:00 PM Lunch and open discussion

1:00 PM – 3:00 PM Mock usability test

4

Heuristic EvaluationThat’s a $2 phrase for “expert review.”

Mark Richman

5

What’s a heuristic evaluation?

A quick-and-dirty usability technique, this is a big-money term for an 'expert review' of a website or application using a set of guidelines or 'heuristics'.

Heuristic evaluation involves having a small set of evaluators examine the interface and judge its compliance with recognized usability principles (the "heuristics").

Jakob Neilsen and Rolf Moloch created this technique in 1990…

Using a fixed list of heuristics keeps the evaluator on track. Some evaluators have their own sets of heuristics.

6

Neilsen and Molich's Heuristics (1990)Neilsen now offers an updated set of heuristics

Visibility of system status: The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.

Match between system and the real world: The system should speak the users' language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.

User control and freedom: Users often choose system functions by mistake and will need a clearly marked "emergency exit" to leave the unwanted state without having to go through an extended dialogue. Support undo and redo.

Consistency and standards: Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.

Error prevention: Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action.

Recognition rather than recall: Minimize the user's memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.

Flexibility and efficiency of use: Accelerators -- unseen by the novice user -- may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.

Aesthetic and minimalist design: Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.

Help users recognize, diagnose, and recover from errors: Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.

Help and documentation: Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user's task, list concrete steps to be carried out, and not be too large.

Some Others

Don't force user to make precise actions Direct attention properly Consistent use of color or saturation

For this list and another well-regarded list of heuristics visit:http://www.usability.gov/methods/test_refine/heuristic.htmlOr search on “usability.gov heuristics”

7

Our Task

Several group members evaluated four sites with content similar to STC

We each took different approaches to our evaluations

Here: summarize different approaches and also the results

8

Heuristic Evaluations:Value and Caveats

Heuristics are mental shortcuts or assumptions that help us quickly make sense of the world.

How does it work? The expert uses your software product and looks for violations of the guidelines. For instance, hundreds of ad-packed pages would fail the heuristic ‘Aesthetic and Minimalist Design’.

Does it work? Yes and no. Appraisers will differ in the usability problems they find Evaluators may have trouble uncovering domain-specific issues. Tests have shown that up to 50% of problems identified don’t actually affect the product’s usability

Why use it? Great way to quickly and cheaply point out serious usability issues Use it early in the design process to uncover some blatant problems Know that usability testing may uncover additional issues

9

Perform a Quick Evaluationof STCAtlanta.org

Some Heuristics that might be useful:

Aesthetic and minimalist design: Every extra unit of information in a dialogue competes with others and diminishes their relative visibility.

Direct attention properly

Consistent use of color or saturation

Consistency and standards

Display data in a clear and obvious manner

Error prevention

10

Sites We Evaluated

Sample Heuristic Evaluations

11

12

14

15

Strategies

Two evaluators browsed page by page through the sites, looking for usability problems and violations of the heuristics.

One evaluator performed a representative task on two similar websites and used that task to focus her evaluation.

Takeaway: There is no right or wrong strategy, but performing a task can make your evaluation deeper and more meaningful

Don't focus on the task exclusively, but use it to add richness to your evaluation of the complete site.

16

Technology Association of Georgia

17

Technology Association of Georgia

Text evaluation The layout of the home page is very busy. Many colors are used

on this page. Along with the fast changing slides, there is no clear focus.

The top navigation is clear. However the quick links under the TAG TV are hard to notice.

The member login is placed at an easy to find, traditional location.

The search box under the member login is not in its usual place and could be missed by novice users.

The slideshow changes too fast but it does offer the audience the information about events at a glance.

The home page contains so much information that the user can't get a quick overview of the site.

18

Technology Association of Georgia

Adding a picture clarifies the text Layout is very busy and contains

many colors. There is no clear focus.

The top navigation is clear but the quick links under the TAG TV are hard to notice.

The member login is placed at an easy to find, traditional location.

The search box under the member login is not in a usual place and could be missed

The slideshow changes too fast but it does offer the audience event information.

19

Technology Association of Georgia

Navigation

20

Technology Association of Georgia

Evaluation using callouts

21

Technology Association of Georgia

Callout Format: Page Content and Layout

22

Technology Association of Georgia

Summary Site has great content and

oozes professionalism.

However a lot of strongly emphasized content competes for the user's attention. This is seen in the red, underlined links, large colored areas, and vibrant logos

Some web conventions are not followed, adding to the difficulty of finding items on a crowded page

23

Information Architecture Institute

24

Information Architecture Institute

Categories and Navigation

25

Information Architecture Institute

Directing Attention

26

Spotlight: Comparing Header Types

Headers at IAI Typical headers

27

Information Architecture InstitutePage Content and Accessibility

28

Information Architecture Institute

Summary

Clear hierarchy, directs attention effectively

Navigation and headers are clear without taking emphasis away from the content

A lot of content without being distracting

29

STC Intermountain Chapter

30

STC Intermountain Chapter

Text with Pictures and Callouts

31

STC Intermountain Chapter

Finding the Next Meeting

32

STC Intermountain Chapter

Summary of Findings

Consider: Top findings might be the first item in each section.

33

STC Washington DC Chapter

34

STC Washington DC Chapter

Additional Recommendations

35

Heuristic Evaluation Tips

Pictures are invaluable to add context to the evaluation

You may do a narrative or a page-by-page evaluation. Narratives express findings in a conversational manner, but are not be easy to

scan. To counteract this, use bullet points.

Callouts are great but care should be taken to keep them neat Align them if possible Keep them roughly the same size

Don't be Negative Norman – call attention to good design and practice in the existing system. The customer will appreciate that you respond to her good ideas.

36

Card SortingSomething for the office supply fetishists.

Rachel Peters

37

What is card sorting?

Image by cannedtuna - http://flickr.com/photos/cannedtuna/1423599488/

38

What aisle is hot dog chili on?

39

With the hot dog buns?

40

Chili’s kind of like a soup…

41

Chili has beans…

42

Nah, that’s too easy!

43

Is hot dog chili a condiment?

44

Card Sort Activity

Finding a place for everything

45

Card Sort Instructions

How would you organize the STC Atlanta site? Group the cards into categories.

Is something missing? Use a blank card to add it. Something doesn’t belong? Put the card aside. Card belongs in more than one group? Be creative.

Label the categories Use a blank card to name each category. Category names are up to you.

46

Now What?

Look for trends in the results

47

Open vs. Closed Sort

Open

No set category labels Good for exploratory

research Helps you understand how

the users arrange the information

Closed

Set category labels provided Good for testing existing

structures (navigation, table of contents, etc.)

48

A Few Notes

Not Tarot cards Use card sorts to help with decision making Don’t let the cards decide for you

Remote testing options Spreadsheets OptimalSort - http://www.optimalsort.com WebSort - http://websort.net/ More tools listed at

http://www.stcsig.org/usability/topics/cardsorting.html

49

For More Information

Card Sorting: Designing Usable CategoriesDonna SpencerAvailable from Rosenfeld Media: http://www.rosenfeldmedia.com/books/cardsorting/

50

Just for funHow a grocery store is like a web site

A visit to Publix

51

Home Page

52

Feature Product or Article

53

Ads

54

Pop Up Ads!

55

Checkout

56

Usability TestingNo creepy two-way mirrors required.

Yina Li Will Sansbury

What is usability testing?

Image by eekim - http://www.flickr.com/photos/63669472@N00/1819104307

58

What is usability testing?

Qualitative

Subjective Small scale; usually stop

seeing significant new findings after 5 to 7 tests

Loose, forgiving method Analysis based on

observations Relatively cheap and easy to

execute

Quantitative

Objective Large scale; requires large

enough sample of users to statistically validate findings

Stresses rigorous scientific method

Analysis based on crunching numbers

Expensive in time and money

59

Planning and Preparing a Usability Test

Yina Li

60

Planning a usability test

Image by Experimental:DB : http://www.flickr.com/photos/experimentaldb/3839716928/sizes/o

61

Goals

http://www.offprint.co.ukBenefits.aspxBenefit=revenue

62

Focus

http://www.infinitiusa.com/g_coupe/photos-360s/

63

Focus

http://www.infinitiusa.com/g_coupe/photos-360s/

64

User Profiles

65

Deliverables

Screeners Consent form Pre-test questionnaire Scenarios/tasks Post-task questionnaire Post-test questionnaire Facilitator script

Test plan

66

Types of scenarios

First impression Open-ended tasks

e.g. join STC on this site. Answer-oriented

e.g. find information about the next chapter meeting

Nielsen Norman Group Usability In Practice: 3-Day Camp 2008

67

How to create unbiased scenarios/tasks?

Avoid lingo used in the testing product Currents Summit

Do NOT provide instructions or steps

68

Anything else?

How many tasks should I prepare? 35-40 minutes

What sequence of the tasks should I use? Easy on the first task Prioritize the tasks Prepare extra tasks

RUN a pilot test

69

Fun time

Write the two tasks for the STC website usability test.

70

How to recruit test participants?

71

User profiles / Personas

http://www.usability.gov/methods/analyze_current/personas.html

72

How to recruit test participants?

How many participants? 5 (http://www.useit.com/alertbox/20000319.html)

20 (http://usableconnections.com/papers/Faulkner_BRMIC_Vol35.pdf)

Should I recruit the participants? Where to start?

Client relations Account executives Marketing Sales Customer support

73

Creating a screener

What is a screener? Short Sequence of questions

Sample questions What’s the last time you booked a hotel room online? How many hours do you spend on internet per week? What is your household income? Give a range. What is your profession? What company do you work for?

74

Incentives

Type of incentives Cash Gift cards Software or product the company makes

How much It depends…

75

It’s time to call

1. Not a sales call2. Your opinion will help improve the product3. Your time will be paid and how much4. How long the test will be, where, and when5. We will video and/or audio tape the session6. Still interested? Now ask the questions in screener.

Nielsen Norman Group Usability In Practice: 3-Day Camp 2008

76

It’s almost the testing day

Call to confirm Send the following information:

Testing time Location Parking info Driving direction Contact information

77

Facilitating Usability Tests &Analyzing Usability Findings

Will Sansbury

78

Brief your observation team.

Image by llawliet - http://www.flickr.com/photos/llawliet/2547595587/

79

Observation Team Ground Rules

Focus on observation Limit side conversations Take good notes Don’t jump to solutions

Keep your frustration in check

Trust the facilitator’s judgment

80

Observation Team Ground Rules

NEVER tear down the user!

As facilitator, defend the user’sdignity above all else.

(Seriously. I’ve kicked people out of the observation room before.)

81

Embrace multiple personalities.

Flight attendant Keep participants happy Protect the participant’s safety and dignity

Sportscaster Keep the observation team engaged with play-by-play Conduct sidelines interviews between sessions

Scientist Plan and execute the test Analyze the test results

From Carolyn Snider’s Paper Prototyping

82

Make the participant feel comfortable.

Image by Tom Purves - http://www.flickr.com/photos/thomaspurves/2843427903/

83

Start when you confirm the test date.

Avoid email

Give them a choice of times

Charm with chit chat “Do you go by Thomas or

Tom?” “Your office is in the Highlands?

My favorite restaurant is down there.”

Absorb ALL the pain

Image from stock.xchng – http://sxc.hu

84

Make sure they can find you.

Image from stock.xchng – http://sxc.hu

85

Be the host(ess) with the most(est).

Image by Rachel from Cupcakes Take the Cake - http://www.flickr.com/photos/rkbcupcakes/2383055571/

86

(Just don’t be freaky.)

Image by Rachel from Cupcakes Take the Cake - http://www.flickr.com/photos/rkbcupcakes/2383055571/

87

Help them know what to expect.

Explain the test procedure

Stress the importance of thinking out loud

Obtain signed informed consent form

88

Make sure they understand that…

You’re testing the product, not them.

When they’re struggling, you’re learning.

If they’re frustrated or have questions, they canask you for help.Set up a faux helpdesk phone number to ring the observation room.

Thinking out loud is critical. Affirm what they’re doing, but repeat the importancebefore each scenario.

89

Run the test.

Image from stock.xchng – http://sxc.hu

90

Run the test.

Provide the participant with written scenarios. You can give scenario instructions verbally, but written instructions can tell a more compelling story.

Ask them to read the scenario aloud.Primes the pump for thinking out loud.

After they finish the scenario, administer a survey.Some standard surveys exist, and tools like Morae include them.

Rinse and repeat for each scenario.

91

Meanwhile, in the observation room...

Image by Ken Lund – http://www.flickr.com/photos/kenlund/3441041154/

92

Meanwhile, in the observation room...

Log interesting observations.Track time of each so that you can correlate notes with the video.

As you see usability issues, point them out to the observation team.You’ll have a common ground to start analysis discussions.

Pay attention to nonverbal cues, too.Look for odd mousing behaviors, facial expressions, andsounds of frustration.

93

Add it all up.

Image by stuartpilbrow – http://www.flickr.com/photos/stuartpilbrow/2938100285/

94

Analyze the test findings.

Run analysis in two stages Immediately after a test session, have each observer

write down the issues they observed. After all sessions, review all observations.

1. Transfer each observation from each session on to an index card or sticky note.

2. Once all issues are recorded, post them on a wall.3. Read through each, and group similar items.4. Look for high density areas which indicate issues observed

often across multiple test sessions.

95

Communicate findings to decision makers.

Formal report Assign priority to findings and present highest first

Be careful to not dilute report with too many findings Include stills from videos to illustrate findings Brief profiles of test participants and actual quotes from tests

foster empathy for the user Highlights reels of videos go a long way with executives

Informal reports If you’re agile, generate user stories directly from the final analysis

session Capture findings on wiki, intranet, or other shared resource Just write it down somewhere! Don’t let findings be forgotten.

96

Let’s eat!We’ll answer questions, too…

…if you don’t mind us talking with our mouths full.

97

Mock Usability TestSome participants may be professional actors.

YOU!