Usability: The Basics
Usability:The Basics
Usability: The Basics
What is usability?
The quality of an “object” that describes how easy it is to use.
Usability: The Basics
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.
Usability: The Basics
Jakob Nielsen
Usability: The Basics
1
Five Components of Usability
LearnabilityHow easy is it for
visitors to accomplishsomething when they’ve
never seen your sitebefore?
Usability: The Basics
Familiarity
Consistency
Generalizability
Predictability
Simplicity
Learnability
Usability: The Basics
1
EfficiencyWhen they come back, how quickly can visitors
perform tasks?
2
Five Components of Usability
LearnabilityHow easy is it for
visitors to accomplishsomething when they’ve
never seen your sitebefore?
Usability: The Basics
Navigation
Error messages
System feedback
Conventions
Shortcuts
Efficiency
Usability: The Basics
1
EfficiencyWhen they come back, how quickly can visitors
perform tasks?
2MemorabilityAfter a long time away,
how easily can users “re-learn” your site?
3
Five Components of Usability
LearnabilityHow easy is it for
visitors to accomplishsomething when they’ve
never seen your sitebefore?
Usability: The Basics
Intuition
Expectations
Assumptions
Memorability
Usability: The Basics
1
EfficiencyWhen they come back, how quickly can visitors
perform tasks?
2MemorabilityAfter a long time away,
how easily can users “re-learn” your site?
3
ErrorsHow often do users
make errors? How bad are they? How easy is it to correct course?
4
Five Components of Usability
LearnabilityHow easy is it for
visitors to accomplishsomething when they’ve
never seen your sitebefore?
Usability: The Basics
Understandable
Precise
Correct
Consistent
Helpful
Errors
Usability: The Basics
SatisfactionHow pleasant is your site
to use?
51
EfficiencyWhen they come back, how quickly can visitors
perform tasks?
2MemorabilityAfter a long time away,
how easily can users “re-learn” your site?
3
ErrorsHow often do users
make errors? How bad are they? How easy is it to correct course?
4
Five Components of Usability
LearnabilityHow easy is it for
visitors to accomplishsomething when they’ve
never seen your sitebefore?
Usability: The Basics
Looks
Feel
All the other stuff
Satisfaction
Usability: The Basics
SatisfactionHow pleasant is your site
to use?
51
EfficiencyWhen they come back, how quickly can visitors
perform tasks?
2MemorabilityAfter a long time away,
how easily can users “re-learn” your site?
3
ErrorsHow often do users
make errors? How bad are they? How easy is it to correct course?
4
Five Components of Usability
LearnabilityHow easy is it for
visitors to accomplishsomething when they’ve
never seen your sitebefore?
Usability: The Basics
The 6th Component
UtilityAre you giving users what they
need or are looking for?
Usability: The Basics
Usability Utility
Usefulness
Usability: The Basics
Usability + Utility = Usefulness
It doesn’t matterif somethingis easy to find if it’snot what you want.
Usability: The Basics
Step 1:
TestStep 2:
Fix It
Usability: The Basics
Thanks!
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.
ummm...we are gonna need a new website.
Instead of design by committee, we're going to do it
right this time. We'll be implementing a user-centered
design approach.
ummm...we are gonna need a new website.
It'll include contextual inquiry, prototyping,
usability testing, and affinity diagramming. But we'll start
with personas.
ummm...we are gonna need a new website.
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.
ummm...we are gonna need a new website.
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...we are gonna need a new website.
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
ummm...we are gonna need a new website.
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
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.
ummm...we are gonna need a new website.
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.
ummm...we are gonna need a new website.
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.
ummm...we are gonna need a new website.
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
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