Embed Size (px)
Citation preview
SPRING 2019CS 498RK
UI/UX DESIGN
Crash Course!
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
User
Problem
Evaluation
YES
YES
YES
NO
NO
NO
Design
Art
Art
Art
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,
Bill BuxtonSketching User Experiences
IDEATION
CREATION
EVALUATION ITERATION
NEED-FINDING
FINAL DESIGN
THE DESIGN PROCESS
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
NUMBER OF DESIGN DECISIONS
Fifty Shades of Grey
What is Good Design?
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
clear mapping between controls and functionality
not a natural mapping!
NORMAN’S REFRIGERATOR
The Design of Everyday Things, Don Norman
NORMAN’S REFRIGERATOR
The Design of Everyday Things, Don Norman
THERMOSTATSWhat’s the fastest way to bring a
room up to the desired temperature?
THERMOSTATS
No fast way!
on-off switch
furnace runs full blast until the room is at set temperature
NESTRotation: cycle through options
Push: make selection
Prototyping
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
WHY LOW TO HIGH 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
Digital Design Process
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
DISCOVERY
DESIGN
mockups and style guides
PRODUCTION
Separation of Design and Development
PRD
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
MOODBOARDS
high-fidelity prototypes of visual design
static: created in Photoshop, Illustrator, Sketch
MOCKUPS
STYLE TILES
