Designing the User Experience
121
DESIGNING THE USER EXPERIENCE Marc Escobosa December 2014
-
Upload
marc-escobosa -
Category
Design
-
view
1.300 -
download
0
description
An end to end deep dive through the process of designing user experiences — especially for mobile and responsive web apps. The presentation covers the design process from defining and understanding the problem through iterative solution sprints where hypotheses are tested with lean prototypes. This talk was originally prepared for a three hour course on User Experience design for a group of start-ups working with an incubator for whom I serve as a mentor.
Transcript of Designing the User Experience
DESIGNING THE USER EXPERIENCE
Marc Escobosa December 2014
WHAT DOES IT MEAN TO DESIGN AN EXPERIENCE?
Source: Reddit
GOOD DESIGN
Useful
Usable
Desirable
DESIGN?
PRE-EMPTIVE PROBLEM SOLVING
PORTUNISM
PRE-EMPTIVE PROBLEM SOLVING
OPP
Everyone is a designer.”“
— Tim Brown
DESIGN PROCESS
Define ImplementUnderstand Solve
DESIGN PROCESS
Define ImplementUnderstand Solve
Hypotheses Experiments ValidationScope
DESIGN PROCESS
Define
Understand
Solve
Implement
HypothesesExperiments
Validation Scope
SCOPEDefine & Understand
THE PROBLEM SPACE
Just offered a job in a new city Need to list house for sale Don’t have an agent Not sure what house is worth Need to move quickly Feeling panicky
BREAKING IT DOWN
actors context goals
affordances obstacles
A SCENARIO
someone needs/wants to
accomplish something so that
they get some benefit
WHY THEY WORK
someone needs/wants to
accomplish something so that
they get some benefit
someone needs/wants to
accomplish something so that
they get some benefit
someone needs/wants to
accomplish something so that
they get some benefit
someone needs/wants to
accomplish something so that
they get some benefit
someone needs/wants to
accomplish something so that
they get some benefit
Product Design
Engineering Quality Assurance
Marketing Sales
UNDERSTAND Research & Analyze
WHY? WHY? WHY? WHY? WHY?WHY? WHY? WHY? WHY? WHY?WHY?
WHY? WHY? WHY? WHY?WHY? WHY? WHY? WHY? WHY?WHY? WHY?
WHY? WHY? WHY?WHY? WHY? WHY? WHY? WHY?WHY? WHY? WHY?
WHY? WHY? WHY?WHY? WHY? WHY? WHY? WHY?WHY? WHY? WHY?
WHY? WHY?WHY? WHY? WHY? WHY? WHY? WHY? WHY? WHY? WHY?
WHY? WHY?WHY? WHY? WHY? WHY? WHY?WHY? WHY? WHY? WHY?
FRAMING THE QUESTION
Specific Actionable Practical
Courtesy of Erika Hall
BAD QUESTION
What do people think about pets?
Courtesy of Erika Hall
GOOD QUESTION
How do single urban adults choose and
acquire a pet?
Courtesy of Erika Hall
A WORD ABOUT BIASES
Confirmation
Sampling
Interviewer
Social Desirability
Anchoring
Curse of Knowledge
…
THE FIRST PLACE YOU SHOULD LOOK IS IN THE DATA
YOU ALREADY HAVE
BUT THERE ARE THINGS YOUR DATA CAN’T TELL YOU
WHAT DATA HELPS FIND
Correlations Sequences Patterns
Frequencies
Yes No
Intent Rationale
Cognitive Frames Almosts
GENERATING INSIGHTS
Embodying
Shadowing
Interviews
Surveys
Journaling
ETHNOGRAPHIC RESEARCH
SOMETIMES YOU JUST HAVE TO ASK PEOPLE
WHAT THEY THINK AND WHY
QUESTION DESIGN
Avoid ambiguous questions Speak their language
Don’t ask leading questions Minimize effort required (within reason)
Ask enough people Have some open ended questions
TYPEFORM
DATA ANALYSIS
RESEARCH SPRINTS
AnalyzeHypothesis Experiment
1–3 weeks
SOLVEHypothesis → Experiments
HIGH-LEVEL DESIGN
ALMOST EVERY GREAT SOLUTION STARTS WITH AN INSIGHT INTO
HUMAN NATURE
MEANING
PLEASURE
BELONGING
VALIDATION
EFFICIENCY
UNIVERSAL DRIVERS
WHAT WE’RE GOOD AT*
Language Simple morality Simple physics Simple engineering Simple psychology Spatial recall
Number recall Simple probability Simple economics Logical deduction Short term memory Empathy
* We need help with everything else.
TECHNICAL CONTEXT
DOES THEIR CONTEXT ALLOW THEM TO DO IT?
WHAT MOOD ARE THEY IN?
ARE THEY PHYSICALLYABLE TO DO IT?
HOW MUCH DO THEY WANT TO ADDRESS THIS?
DOES YOUR APP DO WHAT THEY NEED?
ENVIRONMENTALCONTEXT
TECHNICAL CONTEXT
PHYSICAL ABILITIES
EFFECTIVITY
EMOTIONAL CONTEXT
From a framework developed by Bill Verplank for Music 250a @ Stanford University
BUILDING BLOCKS
From classwork by Celine Perrin for Music 250a @ Stanford University, courtesy of Bill Verplank
GET THE BIG PICTURE
USER JOURNEY
Title & Blurb
Social buttons
16:9
Foodie TViPad Design Draft v01
User Journey Mon May 06 2013 GLAM
User launches the Foodie TV app.
Orientation of loading screen prompts user to turn the device to landscape mode if not already in it.
Goal is for app launch to last shorter than 1.5 seconds.
1. Launch the AppFor first launch, the user is brought to the most recent batch of videos with the first video selected.
For subsequent launches, the app attempts to remember the state that user was last in and brings them exactly back to where they were.
If a video asset was playing when they last suspended the app, the playhead is placed 2 seconds earlier than where it was and the video is paused.
2. Select the video you want to watchThe user watches the video in full screen mode.
If the user wants to skip a video, they can swipe to advance to the next video.
If the user wants to return to a previous video, they can swipe to go backwards.
Videos do not auto play when swiped to. Instead the user must tap to start playing.
3. Watch videosThe user can tweet or post a link to the video to Facebook. They can also email a link to the video within the app.
In all cases, the resulting link will attempt to launch the app if on an iOS device and take the recipient to the App Store if that is not possible.
4. Share or comment on video
Key
Anonymous Foodie User
Loading State (as fast as possible)
Current Scenario Alternative Scenario
Play Mode
Single Tap
Main Screen — Tray closed
16:916:9
Pause/Play Toggle
Once loading is completed
Drag Flick
If one or more new batch has been published since the last time you had the top of the video tray visible, then a new batch indicator appears. Tapping on that opens the tray and scrolls the user smoothly to the top of the tray revealing the new batch(es).
Each flick snaps to next frame,bounces at end of batch
Authenticate / Associate accounts
16:9Sign in so we
know who you are
Sign in
16:9
Tweet
Share
With count incrementation
Batch of 5 videos
Current video
Vertically scrollabletray of past batches
Flick down to close
Flick up to open tray
FoodieTV Identity
Most recent batch
Last week'sbatch
Title & Blurb
16:9
Batch from 2 weeks ago
Tray slides downand scrolls to showbatch in which selected videoappears
Main Screen — Tray open
Main Screen — Tray closed with newly selected batch
Immediately proceeds into play mode
Screen fades, social controls
emerge
Selected videois highlighted
New BatchIndicator(Tap scrolls to top)
Pull to refresh also works
THE BIG LIST
List every scenario, state, or context that you can possibly imagine the user experiencing.
And prioritize them by how much they affect the experience.
DETAILED DESIGN
ENVISIONING HOW YOUR SOLUTION WILL WORK
EPICENTER DESIGN
From Getting Real by the 37Signals team, now basecamp.com
Start here
COMMON HEURISTICSDon’t make people think
Choose your affordances wisely Great copywriting = great interface
Design for touch React immediately
Use natural transitions Minimize re-orientation
Be forgiving
BEHAVIORAL PATTERNS
Safe exploration Instant gratification Satisficing Midstream changes Deferred choices Incremental Construction
Habituation Microbreaks Spatial Memory Prospective Memory Streamlined Repetition Social Proof
From Designing Interfaces by Jenifer Tidwell
GEEK OUT AS A TEAM
CRAZY 8S
Have everyone sketch 8 distinct solutions
in 5 minutes then pick the best ones
with dot voting
CRAZY 8S
ONBOARDING
Annotated“Coachmarks”
Embedded “Joyriding”
Dedicated “Setup”
READ THESE
INTERFACE & VISUAL DESIGN
NOW IT’S TIME TO PUT PIXELS TO SCREEN
LET’S START WITH SOME FUNDAMENTALS
FUNDAMENTALS
Layout Language Typography
Color Information Interaction
LAYOUT
Position Proportion Whitespace
LANGUAGE
Clarity
Just enough specificity
Credibility
No lorem ipsum
Consider i18n
TYPOGRAPHY
Formality
Character
Legibility & Contrast
Appropriateness
Flexibility
Completeness
TYPOGRAPHY
clear, objective, modern, universal
cold, impersonal, boring
+
–
modern yet human, clear yet empathetic
wishy-washy and fake
+
–
classic, readable, traditional±
distinctive
overly conspicuous
+
–
strong, stylish, dynamic
too conspicuous to be classic, too stodgy to be modern.
+
–
READ THESE
COLOR
COLOR
SIGNPOSTS
Design in grayscale first
The fewer colors, the better
Select colors with HSB
Choose your contrasts wisely
Consider dark grey
Restraint goes a long way
INFORMATION
By Charles Joseph Minard via Edward Tufte
READ THESE
INTERACTION
Familiar Discoverable Responsive Consistent
SIGNPOSTS
People are very familiar with 3-D objects
Light typically comes from the sky
Our eyes gravitate to motion and contrast
From Erik Kennedy’s 7 Rules for Creating Gorgeous UI
CREATING DIMENSION
From Google’s Material Design and Erik Kennedy’s 7 Rules for Creating Gorgeous UI
Physicality Shadow Bevel
INTERFACE GUIDELINES
From Design Explosions by UX Launchpad on Medium
TRUISMS
People spend more time in other apps than yours
Visual prioritization helps guide attention
People cannot tap what they cannot reach
Larger targets are easier to hit
Like things are expected to behave alike
There’s rarely such a thing as too much feedback
OK, SO NOW WHAT?
SKETCH!
WIREFRAMES
GEOMETRY
From Design Explosions by UX Launchpad on Medium
VISUALS
INVISION
PROTO.IO
The only way to experience an experience is to experience it.”
“
— Bill Moggridge
YOU MUST BRING YOUR PROTOTYPE TO LIFE
DESIGNING FOR TOUCH
Physical metaphors
Direct manipulation
Gestures
Rationalized physics
Fatigue
PHYSICS
NAVIGATION DESIGN
Recognizable Consistent Accessible
Familiar Prevalent Secondary
WAYFINDING
Circulation systems
Spatial cues
Signage
NAVIGATION PATTERNS
Overflow Menus
Sticky Headers
Swipe Views
Cards Floating Controls
Loaded GesturesSwipe Commands
Basement
MOTION DESIGNRational
Informative Grounding
Fluid Emotive
Responsive Restrained
CAPPTIVATE
READ THIS
PUTTING IT ALL TOGETHER
GREAT EXPERIENCES OFTEN SURPRISE YOU
IN A GOOD WAY
HOW WILL YOU DELIGHT?
Discover First Experience
Habit Formation Pass It On Contribute
RECIPE
Identify the conceptual frames that most closely match your user’s mindset
Figure out who does that frame well
Borrow heavily from it —adjusting it to your context
Test it and repeat
THE POWER OF A MANTRA
Your digital hub
End car ownership
Relentless pursuit of perfection
Hawaii starts when you board
EVALUATION
DOES IT WORK?
USER TESTING
SILVERBACK
Perfection is achieved not when there is nothing more to add, but when there is nothing left to take away.”
“
— Antoine de Saint-Exupery
IMPLEMENTBuild & Validate
PRODUCT DESIGN SPRINTS
ValidateHypothesis Experiment
1–3 weeks
GREAT SPRINTS
Collaborative Nimble Focused Cohesive
DON’T FORGET TO DESIGN THE UX OF YOUR UX
SUMMARY
INGREDIENTS FOR GREAT DESIGN
AN OPEN MIND
AN EVIDENCE-BASED ORIENTATION
A WILLINGNESS TO ABANDON YOUR IDEAS
A SPIRIT OF CONTINUOUS
IMPROVEMENT
A DEFT HAND
HUMILITY
