Slide 1

Slide 1 text

Intro TCANZ Workshop Usability Techniques Justine Sanderson | Userfaction Ltd July 2006 © 2007 Userfaction Ltd

Slide 2

Slide 2 text

The challenge

Slide 3

Slide 3 text

The desired outcome

Slide 4

Slide 4 text

Why usability? 63% of software projects exceed their budget estimates, with the top four reasons all relating to product usability: frequent requests for changes by users, overlooked tasks, users' lack of understanding of their own requirements, and insufficient user analysis communication and understanding (Lederer & Prassad, 1992).

Slide 5

Slide 5 text

Why usability? Cost of changes throughout the development lifecycle

Slide 6

Slide 6 text

User Centered Design

Slide 7

Slide 7 text

User Centred Design To develop an experience based on the patterns inherent in your stuff that empowers users to accomplish their goals. jeffrey veen

Slide 8

Slide 8 text

User Centred Design Process

Slide 9

Slide 9 text

User Research

Slide 10

Slide 10 text

Prototyping

Slide 11

Slide 11 text

Usability Evaluations

Slide 12

Slide 12 text

What we are going to do today Creating personas Identifying opportunities for design Producing a paper prototype Testing the prototype Presenting design ideas Group discussions DIS Seminar – Melbourne – August 2004

Slide 13

Slide 13 text

Workshop Project

Slide 14

Slide 14 text

Prelude: Active Listening

Slide 15

Slide 15 text

Active Listening •  Asking open-ended, clarifying questions to gain further information and insight. •  Paraphrasing, or repeating back in our own words what the speaker has said, in order to clarify or confirm understanding. •  Probing - questioning in a supportive way that requests more information or that attempts to clear up confusions •  Providing nonverbal communication, like body language and facial expressions, to show we are paying attention. •  Learning when to be quiet. Giving the other to time to think as well as to talk.

Slide 16

Slide 16 text

Open-Ended vs. Closed Questions Open Questions •  Begin with how, what, or why •  Are used to clarify information and keep the conversation open by encouraging a person to share as much as they wish Closed Questions •  Result in a simple “yes” or “no” or in short, factual answers •  Tend to bring the conversation to a stop, requiring more questions to get the full story

Slide 17

Slide 17 text

Lead-Ins for Paraphrasing Did I hear you say… So, I think you said… Okay, so what I heard you say is… So what you’re saying is… You’re telling me that… Am I hearing you correctly that… Are you saying that… Am I hearing you clearly that… So what I hear you saying is… I believe that you are saying… So, you’re saying… Okay, let me see if I got what you said… So let me summarize what you just said… I want to be on the same page as you, so let me go over what you just said…

Slide 18

Slide 18 text

User Research

Slide 19

Slide 19 text

Contextual Enquiry

Slide 20

Slide 20 text

Observing in context How do people actually use and experience websites? How often do they use them? How satisfied are they? What are their wants and needs? What are their suggestions for improvement?

Slide 21

Slide 21 text

'I don't know who discovered water, but it wasn't a fish.' Step out of your environment

Slide 22

Slide 22 text

You are not the user you are not the user

Slide 23

Slide 23 text

hang out with people who don’t use a computer 8 hours a day

Slide 24

Slide 24 text

architect cleaner waitress policeman teacher gardener farmer midwife receptionist musician builder marine biologist nurse florist photographer sales assistant nanny plumber sharetrader banana ripener accountant journalist coach politician student machine operator truck driver manager secretary

Slide 25

Slide 25 text

Urban safaris

Slide 26

Slide 26 text

People do strange things on their computers

Slide 27

Slide 27 text

Passwords on post it notes

Slide 28

Slide 28 text

You do not have their undivided attention

Slide 29

Slide 29 text

Snapshot interviews

Slide 30

Slide 30 text

Personas/User Profiles

Slide 31

Slide 31 text

Affinity Diagramming

Slide 32

Slide 32 text

Affinity Diagramming 2

Slide 33

Slide 33 text

Personas

Slide 34

Slide 34 text

What are they? Archetypal representation of your target audience •  based on user research (ideally) •  Aggregation of your users’ goals, attitudes, and behaviours •  presented as a vivid, narrative description •  of a single “person” who represents a customer segment

Slide 35

Slide 35 text

Personas - Example

Slide 36

Slide 36 text

Personas are NOT

Slide 37

Slide 37 text

Why they’re useful •  Humanises and provides focus for the design, by talking about ‘Susan’ rather than ‘the user’ •  Helps avoid self-referential design •  Brings user-centered design into an organisation by providing a shared basis for communication in all stages of development cycle •  Enables involving a "user" long before true usability testing is possible

Slide 38

Slide 38 text

Best Practices •  Based on actual user research •  Evoke empathy, e.g. by including a human face and a name •  Include contextual insights, e.g. capture personality with a quote •  Include details about goals, motivations and behaviours •  Include pet peeves/frustrations

Slide 39

Slide 39 text

Best practices - examples

Slide 40

Slide 40 text

Best practices – examples 2

Slide 41

Slide 41 text

Mood board

Slide 42

Slide 42 text

Write your own persona •  Name the persona, choose photos and quotes •  Mention some demographics •  Specify their computer/internet environment & savvy-ness •  Create 3 to 5 bullets specifying key goals •  Include some behaviours or attitudes •  Don’t forget pet peeves •  Add some scenarios for your persona –  Draw conclusions based strictly on observed facts

Slide 43

Slide 43 text

Example persona

Slide 44

Slide 44 text

Card Sorting

Slide 45

Slide 45 text

Card Sorting Workshops “great exercise, I’d use this in my own work!” “chance to get involved at basic level” “good to interact & hear how others in team were thinking”

Slide 46

Slide 46 text

leave form leave policy travel stuff peopleSoft Financials webmail computer access form wireless access connection acceptable use policy (computer) copyright policy rules next week events library hours cpd course campus map disability services nDeva health & safety guidelines web page guidelines exam timetables account codes calendar room bookings booking a room staff guide recruitment info plagiarism & cheating superannuation Auckland university press scholarships IT procurement leave balance ITSS Service Desk helpdesk staff directory property services building maintenance annual reports planning office Card sorting: preparing the data

Slide 47

Slide 47 text

Card sorting: analysing the data

Slide 48

Slide 48 text

IA Validation

Slide 49

Slide 49 text

IA Validation – Paper Prototype

Slide 50

Slide 50 text

Scenarios/Use Cases

Slide 51

Slide 51 text

Task Analysis: Frequency of use

Slide 52

Slide 52 text

Goal/Task Analysis

Slide 53

Slide 53 text

Use Cases 1.  The user sees a welcome message on the ATM's screen. 2.  The user takes a valid Huntington bank card from their wallet. 3.  The user slides the bank card fully into the marked slot. 4.  The user waits five seconds for the ATM to respond. Feedback: The ATM displays "Please enter your four-digit personal identification number" on the screen. 5.  Using the physical keypad attached to the ATM, the user correctly enters their four-digit PIN. 6.  The user presses the Enter key. […] 7.  The user removes their bank card and returns it to their wallet. 8.  The user watches the screen for 15 seconds. Feedback: The ATM redisplays the welcome message. 9.  The customer leaves.

Slide 54

Slide 54 text

Use Cases

Slide 55

Slide 55 text

From Users to Goals to Structure http://thinkingandmaking.com/entries/49

Slide 56

Slide 56 text

From Users to Goals to Structure http://thinkingandmaking.com/entries/49

Slide 57

Slide 57 text

From Users to Goals to Structure http://thinkingandmaking.com/entries/49

Slide 58

Slide 58 text

Prototyping

Slide 59

Slide 59 text

Prototyping 2

Slide 60

Slide 60 text

What prototyping will uncover Usability issues. All the things you typically find in usability testing - confusing concepts, poor terminology, layout problems, lack of feedback, etc. Missing (or misspecificed) functional requirements. Users often have needs that the development team isn't aware of, or the team may have a mistaken assumption about what functionality will satisfy a user requirement. Preference for one design alternative. Sometimes there are multiple ways to provide a function and they're equally easy to implement. But users may have a clear preference for one way over another.

Slide 61

Slide 61 text

What you’ll need •  Write things that stay the same on the browser screenshot sheet •  Draw everything else on card, cut it up, and position with restickable glue •  Use index cards or post-it notes for pop-up windows/error messages/fly-out menus/and the ‘waiting’ hour-glass •  Put repositionable tape over each text field to allow for editing, etc •  Use pencil instead of pen to indicate ‘greyed-out’ items •  Use squiggles to indicate copy text •  Make things bigger rather than smaller – otherwise it’s harder to manipulate all the little objects •  For little objects, make little ‘tabs’ so that you can place them and remove them more easily •  Don’t worry about straight lines, details – it’s meant to be rough

Slide 62

Slide 62 text

Roles •  Facilitator – explains the session, provides the tasks, and makes notes •  ‘Computer’ – manipulates the prototype based on user input •  ‘User’ – uses the system, provides advice/criticism

Slide 63

Slide 63 text

Your turn: mockup sign-up form

Slide 64

Slide 64 text

Prototyping with Powerpoint Footer e-asTTle Welcome, username Log Out Sign-In Password: Forgot Password? Username: [email protected] Remember me on this computer Please sign in to your e-asTTle account: e-asTTle logo 8-Feb- 2006: e-asTTle will be unavailable on Saturday 8th February due to maintenance. 6-Feb-2006: New resources have been added to What’s Next News Sign-In Login

Slide 65

Slide 65 text

Prototyping with Visio

Slide 66

Slide 66 text

Usability Evaluations

Slide 67

Slide 67 text

Usability Evaluations •  establish focus & purpose •  develop the tasks •  write the script •  recruit participants •  set up the room and coordinate times •  test the test and work out kinks •  give the test •  analyse the data •  make revisions to the Web site •  retest

Slide 68

Slide 68 text

Usability Evaluation

Slide 69

Slide 69 text

UCD artefacts start a conversation with your team

Slide 70

Slide 70 text

Make the data real Walls – beyond whiteboards by Mark Rettig (www.marcrettig.com/writings/rettig.walls.72dpi.pdf )

Slide 71

Slide 71 text

Make things together

Slide 72

Slide 72 text

Collaboration

Slide 73

Slide 73 text

It’s easy and it’s fun

Slide 74

Slide 74 text

You are not the user

Slide 75

Slide 75 text

Thank you Thank You! Questions? [email protected] © 2006 Userfaction Ltd

Slide 76

Slide 76 text

Parallel track to ongoing development work Activities prior to development Ongoing user familiarisation (‘urban safaris’) User Research ‘Generic’ personas Personas for target audience Study of patterns Usability tests to uncover specific usability issues Conversation tool Artefacts

Slide 77

Slide 77 text

Patterns …designing from the bottom up…

Slide 78

Slide 78 text

Patterns

Slide 79

Slide 79 text

Avis

Slide 80

Slide 80 text

Study Patterns

Slide 81

Slide 81 text

www.welie.com

Slide 82

Slide 82 text

Yahoo pattern library

Slide 83

Slide 83 text

Study Patterns

Slide 84

Slide 84 text

Designing interfaces

Slide 85

Slide 85 text

Don’t make me think

Slide 86

Slide 86 text

Observing the user experience

Slide 87

Slide 87 text

Making the web work

Slide 88

Slide 88 text

l The ability to simplify means to eliminate the unnecessary so that the necessary may speak.z Hans Hofmann http://dev.uxmatters.com/MT/archives/000015.php

Slide 89

Slide 89 text

Should you stop or go?

Slide 90

Slide 90 text

What is the right code?

Slide 91

Slide 91 text

How does this door open anyway?

Slide 92

Slide 92 text

How dumb are those users already?

Slide 93

Slide 93 text

Which way to room 1503?

Slide 94

Slide 94 text

How do I sign in?

Slide 95

Slide 95 text

Flickr new Even web 2.0 apps use blue underlined links