Usability: The Basics · Usability: The Basics 1 Eﬃciency When they come back, how quickly can visitors perform tasks? 2 Memorability ... we are gonna need a new website. Ummm,

Usability: The Basics

Usability:The Basics


What is usability?

The quality of an “object” that describes how easy it is to use.


Why is usability important?

Is your site hard to read?

Is your home page missing a clear statement of what you do?

Can a visitor find the information they need?

Is your site difficult to use?

People leave.


Jakob Nielsen


1

Five Components of Usability

LearnabilityHow easy is it for

visitors to accomplishsomething when they’ve

never seen your sitebefore?


Familiarity

Consistency

Generalizability

Predictability

Simplicity

Learnability


1

EfficiencyWhen they come back, how quickly can visitors

perform tasks?

2






Navigation

Error messages

System feedback

Conventions

Shortcuts

Efficiency


1


perform tasks?

2MemorabilityAfter a long time away,

how easily can users “re-learn” your site?

3






Intuition

Expectations

Assumptions

Memorability


1


perform tasks?



3

ErrorsHow often do users

make errors? How bad are they? How easy is it to correct course?

4






Understandable

Precise

Correct

Consistent

Helpful

Errors


SatisfactionHow pleasant is your site

to use?

51


perform tasks?



3



4






Looks

Feel

All the other stuff

Satisfaction


SatisfactionHow pleasant is your site

to use?

51


perform tasks?



3



4






The 6th Component

UtilityAre you giving users what they

need or are looking for?


Usability Utility

Usefulness


Usability + Utility = Usefulness

It doesn’t matterif somethingis easy to find if it’snot what you want.


Step 1:

TestStep 2:

Fix It


Thanks!

[email protected]

mailto:[email protected]:[email protected]

Personas and how they are used in user-centered design

ummm...we are gonna need a new website.

Ummm, Peter, I'm getting some complaints on the web site. So, I'm gonna need you build a new

site this Saturday, mmmkay.


Instead of design by committee, we're going to do it

right this time. We'll be implementing a user-centered

design approach.


It'll include contextual inquiry, prototyping,

usability testing, and affinity diagramming. But we'll start

with personas.


Ummm, yeah. I'm not sure what language that was. Just,

ummm...yeah. Good talk.

What we're going to talk about:

•  What are the key points of user-centered design? •  What is a persona? •  Why do we care? •  See examples of data sources for personas. •  Learn how to conduct persona character development. •  How do we make personas useful? •  Review what we learned.

Key Points of User-Centered Design

•  Design is based upon an explicit understanding of users, tasks, and environments through personas.

•  Users are involved throughout design and development. •  Design is driven and refined by user-centred evaluation. •  Process is iterative. •  Design addresses the whole user experience. •  Design team includes multidisciplinary skills and

perspectives.

In simple terms, personas are a fictional characters with real-world attributes that represent your customer/constituent base.


Ummmkay. So, why do we care?

Personas require designers and developers to step away from a functionality or requirements document and understand how people actually interact with the product.

You'll discover more about your users than you thought you knew, and you'll better understand your user’s needs and pain points.

Questions you might ask on a website redesign:

1.  Who are our users?

2.  What are the users’ tasks and goals?

3.  What are the users’ experience levels?

4.  What functions do the users need?

5.  What information might the users need, and in what form do

they need it?

6.  How do users think the site should work?

7.  Does the interface utilize different inputs modes?


Ummm, how about the TPS reports?

It all starts with the data...

•  Purchasing Information •  CRM Reports - Current Customer Data •  Surveys •  Marketing Research •  Industry Trends

What does your current site tell you?

•  Website Traffic Analytics •  Search Queries •  Social Demographics •  Social Media Usage •  Advertising Analytics


Now we put all this together and tell a story.

•  Name •  Picture •  Demographics •  Roles and Responsibilities •  Goals and Tasks •  Motivations and Needs •  Environment and Context •  Brief Description of Person

Components of a Persona

MYU MYU

•  Having a very busy life, when Puja is not at work, she is always on the run. She uses the Internet on her phone most of the time, and if she has to spend much time trying to figure out how to use a site, she loses her patience and moves on with her day.

•  She can't live without her iPhone. In fact she's a huge Apple fan. Puja has a Mac, iPad, and iPhone.

Let's dig a little deeper to further develop Puja's character...

•  Puja uses her iPhone and iPad for everything - from texting and social media on her iPhone to online purchases and Netflix on her iPad

•  Puja's Internet usage, for personal needs, tends to be during lunch and late in the evening. That's when she catches up with friends and occasionally does a little shopping.

•  She considers herself an early adopter, and her friends are always asking what kinds of apps they should download.

•  She's never given money to her university foundation before, but now that she's been working for three years, she feels like she could give back.

•  She recently thought of giving back to her university after she "liked" the university's Facebook page.

•  Puja makes $55,000 a year as a marketing manager for a nonprofit, and she's been out of school for three years.


With the personas complete, we can then run

through scenarios and create functional specifications.

Scenarios are narratives that use personas to describe “a day in the life”, best-case situation, worst-case situation, etc...

They are used to validate personas and to capture majority of use cases.

They are used with personas throughout the design, development, and QA process.

Let's look at a possible scenario...

Puja takes a few minutes to check Facebook and email during her lunch break at a local sandwich shop. She reads an email newsletter posted by her university alumni group with a link to the website for a end-of-year giving opportunity. She visits the foundation site not expecting to make a donation, but she's curious about what's involved.

Key Considerations for Puja:

•  Needs to be mobile friendly •  Easy to use with simple steps •  Not interested in taking the time to read much more than it

takes to make a decision to give

•  Multiple social engagement opportunities •  Visually pleasing flat page design •  Clear Calls to Action (CTA) to drive action down

conversion funnel

•  Ability to complete the entire transaction online

Outputs and Inputs Outputs: •  Better definition of users' needs and wants •  Tools for designers and developers Inputs: •  Starting point for functional specifications •  Used throughout the rest of design and development -

design, content strategy, and quality assurance.


Yeah, so you're telling me this isn't design by

committee?

What we talked about:

•  We learned the basics behind user-centered design. •  We defined a persona. •  We learned why they are important. •  We saw examples of commonly used data sources for

personas.

•  We learned how to conduct persona character development. •  We conducted scenarios around personas, and we found out

how they are used in the development lifecycle.


Ahh, so it looks like I'm also gonna need you to go

ahead and come in on Sunday, too...

Thank You! Sean Hudson [email protected] @seanhudson

An introduction to

Usability Testing July 16, 2013

@TimothyWhalin

Flickr Photo by @ fmgbain

Flickr Photo by @IntelFreePress

“If you want a great site, you’ve got to test. After you’ve worked on a site for even a few weeks, you can’t see it freshly anymore. You know too much. The only way to find out if it really works is to test it.”

Flickr Photo by @stevevosloo

Guerrilla Usability Testing

Flickr Photo by @el patojo

What do you want to learn?

1. What do users need to do?

2. Which tasks are critical to user success?

3. Which tasks are most important to users?

4. Which tasks are most complex or longest?

5. Which tasks will be used most frequently?

6. Which tasks compel a user to keep using the website?

A few tips on

Running Your First Test

Take notes

Ask open ended questions

Encouraging without agreeing

“Got it” vs “Good”

Make it a conversation

Straightforward steps to

Leading the test

Introduction

Intro Questions

Present scenario and tasks

Follow-up questions

Handling the

The Aftermath

What’s working? What’s not working?

Flickr Photo by @foshydog

Photo via @ Nicolas Zurcher on designinginteractions.com

Don’t make a $12 million a year user experience mistake.

Don’t make a $12 million a year user experience mistake.

Some problems are easy to fix, but not always easy to identify.

And now for a

Usability Exercise

Pair up

Think of a task someone does on your website

• Find out what our organization does. • Try to find out more information about _______. • Subscribe for our newsletter. • Complete the steps necessary to make a donation.

Stop after you get to the credit card fields.

• Most people who come to this home page immediately exit. Why do you think this happens?

• Go to Google and find one other company that offers a similar service. Compare the two websites. Which did you prefer?

• You want to visit our organization next week. Find directions to the main office.

Thank you. http://bit.ly/uxtesting

@TimothyWhalin

[email protected]

July 2013 Forum - Intro to UsabilityJuly 2013 Forum - PersonasJuly 2013 Forum - Usability Testing.pdfSlide Number 1Slide Number 2Slide Number 3Slide Number 4Slide Number 5Slide Number 6Slide Number 7Slide Number 8Slide Number 9Slide Number 10Slide Number 11Slide Number 12Slide Number 13Slide Number 14Slide Number 15Slide Number 16Slide Number 17Slide Number 18Slide Number 19Slide Number 20Slide Number 21Slide Number 22Slide Number 23Slide Number 24Slide Number 25Slide Number 26Slide Number 27Slide Number 28Slide Number 29Slide Number 30Slide Number 31Slide Number 32Slide Number 33Slide Number 34Slide Number 35Slide Number 36Slide Number 37

Documents

Usability: The Basics · Usability: The Basics 1 Eﬃciency When they come back, how quickly can visitors perform tasks? 2 Memorability ... we are gonna need a new website. Ummm,