DESIGNING FOR USABILITYMaking apps people will really use

AGENDA

• The process from start to code

• We try it!

YOUR EXPERIENCE

• What app do you have in mind?

• What do you plan to do to create an excellent user experience?

• Have you ever seen (or been!) a developer creating UI without designing first?

THE DESIGN PROCESS

• Needfinding

• Storyboarding

• Wireframing

• Prototyping

• User testing

NEEDFINDING

• Answers the question, “Why are you creating this?”

• Identify a real-world need or failing

• Process of observation, not problem-solving

• Got an app idea? Needfinding tells you if anyone will use it

• Exceptions: Games, entertainment apps.

IDENTIFY NEEDS

• Where do people get stuck?

• Look for hacks like post-it notes

WHAT NEEDFINDING IS NOT

• Asking people what they need

• Thinking of solutions to problems

• Thinking of ideas for apps

THE DESIGN PROCESS

• Needfinding

• Storyboarding

• Wireframing

• Prototyping

• User testing

STORYBOARDINGIllustrating a solution

THE STORYBOARD• Tells the story of a task: A goal that is accomplished

• Setting: Characters, environment, task

• Sequence: Steps involved

• What leads someone to use the app?

• Satisfaction: How the goal is accomplished

THE STORYBOARD

• Keep it simple

• No commitment to any UI

• Gets stakeholders aligned to a goal

• Common mistakes: Drawing a UI design or a list of uses for a product

ASIDE:CREATE MORE THAN ONE

• At every stage of design, always create at least two designs.

• Storyboards

• Wireframes

• Prototypes*

• What are the benefits?

WHY MORE THAN ONE?

• Pottery study

• Graded by weight vs. by quality

• Bayes and Orland, 2001

Scott Klemmer, “Human Computer Interaction” Coursera course

QUANTITY VS. QUALITY

“While the quantity group was busily churning out piles of work - and learning from their mistakes - the quality group had sat theorizing about perfection, and in the end had little more to show for their efforts than grandiose theories and a pile of dead clay”

Bayes and Orland, 2001

MULTIPLE DESIGNS: UNEXPECTED BENEFITS

• Avoids identifying with “your” prototype

• Feedback is about the ideas, not a judgment about me

MULTIPLE DESIGNS: MORE CREATIVE IDEAS

• Often, your first design is not your best one

• Creative rule of 10 (Brad Hokanson)

• "Muñecas barbie diabólica" by Ricardo peralta solis - Own work. Licensed under Creative Commons Attribution-Share

Alike 3.0 via Wikimedia Commons - http://commons.wikimedia.org/wiki/File:Mu

%C3%B1ecas_barbie_diab%C3%B3lica.jpg#mediaviewer/File:Mu%C3%B1ecas_barbie_diab%C3%B3lica.jpg

THE DESIGN PROCESS

• Needfinding

• Storyboarding

• Wireframing

• Prototyping

• User testing

WIREFRAMING

• Wireframes are quick-and-dirty prototypes

• Why wireframe?

• Fail quickly, fail early, and iterate

• More iterations -> Better design

WIREFRAMING

• Can use paper or a tool like Balsamiq or Moqups

• Illustrate interaction flow of application

• Low-fidelity helps testers concentrate on interaction, instead of aesthetics

ASIDE:DESIGN CRITIQUE

• Objective critique of design using heuristics

• Jakob Nielsen’s “Ten Usability Heuristics”http://intra.iam.hva.nl/content/1112/verdieping1/research_for_design/intro-en-materiaal/RfD-Heuristic-Evaluation.pdf

• Perform before user testing

• Don’t waste users on easy-to-find issues

WIREFRAMING CYCLE• Design two or more wireframes

• Heuristic evaluation

• Fix heuristic issues

• User test

• Fix user testing issues

• Repeat until user tests don’t identify any major problems

THE DESIGN PROCESS

• Needfinding

• Storyboarding

• Wireframing

• Prototyping

• User testingBy Josh Swieringa from USA (Toyota Prototype)

[CC-BY-2.0 (http://creativecommons.org/licenses/by/2.0)], via Wikimedia Commons

HIGH-FIDELITY PROTOTYPES

• Polished look and feel

• Raise user expectations, for more thorough feedback

PROTOTYPING CYCLE• Design two or more significantly different high-fidelity prototypes

• Heuristic evaluation

• Fix heuristic issues

• User test

• Fix user testing issues

• Repeat until user tests don’t identify any major problems

THE DESIGN PROCESS

• Needfinding

• Storyboarding

• Wireframing

• Prototyping

• User testing

USER TESTING

• Next to needfinding, user testing is the most critical step in designing for usability

• Users lack inside knowledge

• Test with at least 3 users. No user will find all issues.

• User testing is often painful to watch!

USER TESTING METHODS• Watch users to see where they get stuck or follow unexpected

paths

• Give concrete tasks

• Training: If user gets stuck, it’s a design failure, not a reflection on them

• Ask users to think aloud

• Interview afterward

DESIGN EXERCISELet’s try it out!

NEEDFINDING EXERCISE

1. Choose an Apple Watch app idea

2. List needfinding exercises. How would you do needfinding for this app?

A. Who would you observe and how?

B. Long-term study? Diary / experience sampling study?

CREATE STORYBOARDS1. It’s not practical to perform need finding observation in the time we have, so we’ll cheat. Describe a

real-world need you’ve already identified, that your app idea solves.

2. Write out a Point of View: a sentence or very short paragraph describing a need and a solution space. Examples:

“Habits of mind are deeply engrained. We can't rely on the mind to automatically prompt us to perform a new behavior. Therefore, we need external reminders to change mental habits.”

“Choosing a wireless plan should be like choosing an outfit from your closet: easy and straightforward, convenient (it's all in one place), and customizable to your needs one day at a time (you have choices, but they aren't overwhelming).”

3. Create two storyboards, remembering to include:

A. Setting: characters, location, a task or goal

B. Sequence: What leads the character to use your app?

C. A resolution of the goal

SHARE YOUR WORKTeams present their POV and storyboard

By Vector Open Stock - http://www.vectoropenstock.com/ [CC-BY-SA-3.0 (http://creativecommons.org/licenses/by-sa/3.0)], via Wikimedia Commons

PAPER PROTOTYPING• Choose one storyboard

• Create a paper prototype of an app

• Time permitting, create a second prototype for the same storyboard

• One person rotates into another group to test that group’s prototype(s)

Additional Credits

• Human-Computer Interaction. Scott Klemmer. Coursera class, June 2014. https://www.coursera.org/course/hciucsd

• The Creative Rule of 10. Brad Hokanson. YouTube video, https://www.youtube.com/watch?v=bnUUZcI0iyU