Design Thinking for User Experience Design Prototyping amp Evaluation November 13 2017 Heuristic Evaluation Grades See Piazza tonight or tomorrow still grading November 13 2017 dt UX Design Thinking for User Experience Design Prototyping amp Evaluation ID: 714371
Download Presentation The PPT/PDF document "CS 147 Course Midterm Review" is the property of its rightful owner. Permission is granted to download and print the materials on this web site for personal, non-commercial use only, and to display it on your personal computer provided you do not modify the materials and that you retain all copyright notices contained in the materials. By downloading content from our website, you accept the terms of this agreement.
Slide1
CS 147 Course Midterm ReviewDesign Thinking for User Experience Design, Prototyping & Evaluation
November 13, 2017Slide2
Heuristic Evaluation GradesSee Piazza tonight or tomorrow (still grading)November 13, 2017
dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation2Slide3
November 13, 2017dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation
3b a l a n c e designtechnologySlide4
HCI Approach to UX Design
November 13, 2017dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation
4Slide5
Why is HCI Important?
Major part of work for “real” programsapproximately 50%Bad user interfaces costmoney5% satisfaction up to 85%profitsfinding problems early makes them easier to fixreputation of organization (e.g., brand loyalty)lives (Therac-25)User interfaces hard to get rightpeople are unpredictableintuition of designers
often wrong
5
November 13, 2017
dt+UX: Design Thinking for User Experience Design, Prototyping & EvaluationSlide6
How to Design and Build Good UIsIterative development process
Usability goalsUser-centered designDesign discoveryRapid prototypingEvaluationProgrammingNovember 13, 2017dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation6Slide7
User Interface Development Process
November 13, 2017dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation7DesignExplorationEvaluate
Production
Proposal:
Demos/
Lo Fi Prototypes
(How)
Work together to
realize the design
in detail
Evaluate with
Customers
Design
Discovery
Customers, Products,
Business, Marketing
Customers, Products,
Business, Marketing
Design Definition:
- Design Problem Statement
- Targeted User Roles (Who)
- Targeted User Tasks (What)
- Design Direction Statements
Specification:
Hi Fidelity, Refined Design
- Based on customer feedback
- Foundation in product reality
- Refined Design description
Storyboard
Customers:
- Roles (Who)
- Tasks (What)
- Context (Stories)
Marketing:
- Business Priorities
- Messages
Technology:
- Products
- Architecture
Design:
- Leading/competing
technologies
Review & Iterate
based on slide by Sara
Redpath
, IBM &
Thyra
Trauch
, TivoliSlide8
Iteration
At every stage!November 13, 2017dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation8DesignPrototype
Evaluate
Sketch
Paper
Video
Tool
Program
Gut
Crit
Expert
Eval
Lo-fi Test
User StudySlide9
DesignDesign is driven by requirements
what the artifact is fornot how it is to be implementede.g., phone not as important as mobile appA design represents the artifactfor UIs these representations include (?)screen sketches or storyboardsflow diagrams/outline showingtask structureexecutable prototypes
representations
simplify
November 13, 2017
dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation
9Slide10
Usability(?)
According to the ISO:The effectiveness, efficiency, and satisfaction with which specified users achieve specified goals in particular environmentsThis doesn’t mean you have to create a “dry” designNovember 13, 2017
dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation
10Slide11
Usability/User Experience Goals
Learnablefaster the 2nd time & so onMemorablefrom session to sessionFlexible multiple ways to do tasksEfficientperform tasks quickly Robustminimal error ratesgood feedback so user can recoverDiscoverablelearn new features over timePleasinghigh user satisfaction
Fun
November 13, 2017
dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation
11
Set goals early & later use to measure progress
Goals often have tradeoffs, so prioritize
Example goals
(?)Slide12
Design Process: Discovery
Assess Needsunderstand client’s expectationsdetermine scope of projectcharacteristics of customers & tasksevaluate existing practices & products
November 13, 2017
dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation
12
Production
Design Refinement
Design Exploration
DiscoverySlide13
Design Thinking Processdt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation
13November 13, 2017Slide14
User-centered Design“Know thy User”
Cognitive abilitiesperceptionphysical manipulationmemoryFitts’ Law, MHP: processors? Cycle times?Organizational / educational job abilities Keep users involved throughoutdevelopers working with target customersthink of the world in users termsNovember 13, 2017dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation
14Slide15
Design Discovery
Needfinding, Contextual Inquiry & Task AnalysisObserve existing practices for inspirationMake sure key questions answered
Tuned CI participant
Tuned field work in record store
November 13, 2017
dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation
15Slide16
WE
MET . . .(user – possibly extreme – you are inspired by)
WE
WERE
AMAZED
TO
REALIZE
.
.
.
(what
did
you
learn
that’s
new
?)
(frame
up
an
inspired
challenge
for
your team.)
(don’t
dictate
the
solution.)
Reframing the Problem as a Point of View
November 13, 2017
dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation
16
IT
WOULD BE GAME-CHANGING TO . . .Slide17
Design Discovery Summary
Know thy user & involve them in designNeedfindingbuild empathy with customerslisten to them to discover interesting insightsNovember 13, 2017dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation17Slide18
http://dschool.stanford.edu/wp-content/uploads/2012/05/HMW-METHODCARD.pdf
Break POV into piecesAmp up the good/Remove the badExplore the oppositeQuestion an assumptionGo after adjectives
ID unexpected resources
Create an analogy from need or context
Change a status quo
Ideate: From POV to How Might We
November 13, 2017
dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation
18
POV: Harried mother of 3, rushing through the airport only to wait hours at the gate, needs to entertain her playful children because “annoying little brats” only irritate already frustrated fellow passengers. Slide19
Brainstorm “How Might We”s SolutionsNovember 13, 2017
dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation19Slide20
November 13, 2017
dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation20EXPERIENCE PROTOTYPESlide21
Design Process: ExplorationNovember 13, 2017
dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation21ProductionDesign RefinementDesign Exploration
Discovery
Expand Design Space
brainstorming
sketching
storyboarding
prototypingSlide22
From Sketch to Prototype
22
Courtesy Bill Buxton
Difference in
intent
rather than in
formSlide23
Design Exploration SummarySketching allows exploration of many concepts in the very early stages of designAs investment goes up, need to use more and more formal criteria for evaluation
Experience prototyping allows us to try many ideas quickly & learn more about the problem & solution space (prototype to learn)November 13, 2017dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation23Slide24
Concept VideosIllustrate context of use rather than specific UI
Quick to buildInexpensive Forces designers to consider details of how users will react to the designMore important when context is not traditional work scenarioNovember 13, 2017dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation24Slide25
Context – Computing in 1945
Harvard Mark I : 55 feet long, 8 feet high, 5 tonshttp://piano.dsi.uminho.pt/museuv/indexmark.htmNovember 13, 2017dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation
25Slide26
Computing in 1965
IBM System/360360-91-panel. Licensed under Public Domain via Wikimedia Commons.November 13, 2017dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation26Slide27
Augmenting Human Intellect
November 13, 2017dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation
27Slide28
Dynabook – Kay (1974)
November 13, 2017dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation
28Slide29
Xerox Star – 1st Commercial GUI (1981)
November 13, 2017dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation
29Slide30
Rapid Prototyping
Build a mock-up of design so you can test itLow fidelity techniquespaper sketchescut, copy, pastelow-fi testing allows us to quickly iterateget feedback from users & change right awayInteractive prototyping toolsHTML, SketchFlow, Balsamiq, Axure, proto.io, etc.UI builders
Expression Blend + Visual Studio, etc.
November 13, 2017
dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation
30
Fantasy BasketballSlide31
ESP
Evaluation
November 13, 2017
dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation
31
Test with real customers (participants)
w/ interactive prototype
low-fi with paper
“
computer
”
Build models
GOMS
Low-cost techniques
expert evaluation
walkthroughs
online testingSlide32
Heuristic Evaluation Decreasing Returns
* Caveat: graphs for a specific exampleNovember 13, 2017dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation32
problems found
benefits / costSlide33
Heuristic Evaluation Summary
Have evaluators go through the UI twiceAsk them to see if it complies with heuristicsnote where it doesn’t & say whyCombine the findings from 3 to 5 evaluatorsHave evaluators independently rate severityAlternate with user testingNovember 13, 2017dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation33Slide34
User Testing DataProcess dataobservations of what users are doing & thinking
qualitativeBottom-line datasummary of what happenedtime, errors, successi.e., the dependent variablesquantitativeNovember 13, 2017dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation34http://allazollers.com/discovery-research.php
http://www.fusionfarm.com/content/uploads/2012/10/analyzing-data.jpgSlide35
User Testing SummaryUser testing is important, but takes time/effort
Use ????? tasks & ????? participantsreal tasks & representative participantsBe ethical & treat your participants wellWant to know what people are doing & why? collectprocess dataBottom line data requires ???? to get statistically reliable resultsmore participantsDifference between between & within groups?between groups: everyone participates in one conditionwithin groups: everyone participates in multiple conditionsNovember 13, 2017
dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation
35Slide36
November 13, 2017dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation
36David McCandless
http://
www.informationisbeautiful.net
How well does it work?
How well does it communicate?Slide37
The Art of BalancePromotion & demotion of important objectsFirst Question for any design
What are the most important things?Information should be prioritized based on its importance to the userNovember 13, 2017dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation37Slide38
Using Proximity to Indicate RelationshipsNovember 13, 2017
dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation38Information blocks should be grouped together if related, but unrelated elements should be located at some distance from each other. “The whole is greater than the sum of the parts.” – David HothersallGestalt Psychology in information designSlide39
http://
builtbybuffalo.com/
White Space = Value
November 13, 2017
dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation
39Slide40
Grid SystemsA key pattern for implementing rationality, modernism, asymmetry
Note that no elements are “centered”November 13, 2017dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation
40
Java Look and Feel Design GuidelinesSlide41
Complementary
Analogous
Triad
Split
Complementary
Rectangle
(
Tetradic
)
Square
Using Appropriate Color “Harmonies”
November 13, 2017
dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation
41Slide42
Human Abilities: RetinaDistribution of rods & types of cones has major impact on our visual abilities
November 13, 2017dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation42http://webvision.med.utah.edu/imageswv/Ostergr.jpeg
http://
www.webexhibits.org
/
causesofcolor
/1G.html
http://archive.cnx.org/contents/d42c807d-a9fa-4e3d-83d0-0f7c745b51a0@4/color-and-color-vision#import-auto-id1844887Slide43
The Model Human ProcessorDeveloped by Card,
Moran & Newell (’83)based on empirical dataBasic model underlies other HCI techniquesAllows us to make predictions w/o usersKnow the processors, memories, cycle times, and decay times100ms!November 13, 2017dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation43Slide44
Fitts
’ Law Experimental ResultsTask: Quickly tap each target 50 times accurately30 sec48 sec31 sec21 sec (lots of spread)November 13, 2017dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation44Slide45
Fitts’ LawMoving hand is a series of
microcorrectionscorrection takes Tp + Tc + Tm = 240 msec Time Tpos to move the hand to target size S which is distance D away is given by:Tpos = a + b log2 (D/S + 1)Summarytime to move the hand depends only on the relative precision requiredNovember 13, 2017dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation
45Slide46
Conceptual Models SummaryConceptual models ?
mental representation of how the object works & how interface controls effect it Design model should equal customer’s model ?mismatches lead to errorsuse customer’s likely conceptual model to designDesign guides ?make things visiblemap interface controls to customer’s modelprovide feedbackNovember 13, 2017dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation46
Design Model
Customer Model
System Image