ui/ux design · 2019-05-02 · ui/ux prototypes storyboarding paper prototypes video prototypes ......
TRANSCRIPT
trying to decide what's important to somebody, building a bunch of prototypes and showing them around, developing a point of view and getting it out so that it has impact in the world. So design is really a process of making impact on the world by doing this kind of creation of something new to the world and then getting it out there.”
“DESIGN IS DOING THINGS WITH INTENTION,
David Kelleyhttp://boingboing.net/2012/09/22/design-thinking-for-social-goo.html
and there are two places where there is room for creativity:
1. the creativity that you bring to enumerating meaningfully distinct options from which you choose
2. the creativity that you bring to defining the criteria, or heuristics, according to which you make your choices.”
Bill BuxtonSketching User Experiences
“DESIGN IS CHOICE,
DESIGN IS Wicked HARDindeterminate, incomplete, contradictory, and changing requirements
Exploring enough of the solution space
Evaluating amongst alternatives
Knowing when you’re done
Wicked Problem
en.wikipedia.org/wiki/Wicked_problem
User’s understanding of how something works
Inferred from the interacting with the design
MENTAL MODELS
Good design communicates the right mental model
Bad design: designer’s model differs from user’s model
MENTAL MODEL
Intention vs Perception
PROTOTYPES
Cheap and fast
Spectrum of fidelity
Multi-resolution design
Tools: paper & pen, powerpoint, photoshop, balsamiq
TYPES OF PROTOTYPES
Storyboarding
Paper prototypes
Video prototypes
Functional prototypeshigher fidelity
HIGH-FIDELITY MAKES IT HARD TO…
get useful feedback
get the right feedback
iterate quickly
calibrate clients
WIZARD-OF-OZ PROTOTYPING
Functional prototype minus the functionality
Test interaction before solving the hard problem
So it’s a tototype!
PARALLEL PROTOTYPES
Design space exploration
Design As Exploration: Creating Interface Alternatives through Parallel Authoring and Runtime Tuning
Hartmann et al., UIST 2008
PARALLEL PROTOTYPES
Better feedback
Getting the Right Design and the Design Right: Testing Many Is Better Than OneTohidi et al., CHI 2006
PARALLEL PROTOTYPES
Parallel Prototyping Leads to Better Design Results, More Divergence, and Increased Self-Efficacy
Dow et al., TOCHI 2010
Better design and more divergence
DISCOVERY
figure out with the client what to build
analyze previous designs, competitors’ designs
understand audience/users
determine scope, requirements, and constraints
Deliverable: Product Requirements Document (PRD)
a.k.a. Need-Finding, Research
DISCOVERY
DESIGN
UI/UX Design
Information and Navigation Design
Visual Design
many distinct concepts are explored
takes up to 50% of total project timePRD
UI/UX PROTOTYPES
storyboardingpaper prototypesvideo prototypesfunctional prototypes
specific tasks and flows
Sitemaps, Storyboards, and Specifications Newman and Landay, DIS 2000
WIREFRAMESBalsamiq
a.k.a. Schematicscontent (information, navigation, interface elements) and layout
mixture of real content and annotated placeholders (images)
variations in color, typography used to differentiate different types of contentnot the final visual design