Designing for usability: key principles and what designers think
Designing for usability with paper storyboards
35
DESIGNING FOR USABILITY Making apps people will really use
-
Upload
happywatch -
Category
Design
-
view
510 -
download
0
description
When you have a great idea for an app, Apple Watch or otherwise, it’s tempting to skimp on the design process and jump straight into coding. The unfortunate end result is often a feature-rich app that doesn’t fit into any user’s life. In one hour, we’ll figure out how to identify real-world user needs, and design an app that is proven to address needs. Based on Stanford professor Scott Klemmer’s “Human-Computer Interaction” Coursera course. Key points include: how to create an app that people actually need; how to identify usability problems by watching users test before asking for their feedback; how creating two or more prototypes in parallel will help your team members get along better; and why you need at least three people to test each iteration of your prototype. After the rundown, we’ll do our best to workshop the first three steps to the design process: Needfinding, Storyboarding, and Paper Prototyping. What to bring: Paper, a pen or pencil, and your enthusiasm and creativity. Drawing skill is not necessary! If you have an idea for an iWatch app, you might be able to work with it, if the need it solves is observable in our meeting environment. What if I can't attend in person? No worries. We'll post the notes to our group website http://happy.watch About this event’s speaker: Jonathan Stone is a user experience designer and iPhone app developer, with a passion for creating UI that gets out of your way and lets you get stuff done. He’s currently focused on using technology to improve psychological well-being and help people thrive. In his fifteen years as an enterprise software engineer, Jonathan experienced firsthand what happens when you start coding without properly testing your design. About our group: Let's get together and learn how to develop for the Watch. Events are hosted in the San Francisco Bay Area and Silicon Valley as well as online in Hangouts. Speakers present in a "live code" style. This is a community of designers and developers who use Swift and animation tools like Origami to craft experiences for iOS and the Apple Watch. Part of the goal is to connect people together so they can work on projects.
Transcript of Designing for usability with paper storyboards
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
