Wireframes fpr Design and Testing...
Transcript of Wireframes fpr Design and Testing...
Wireframes for Testing and Design
Elizabeth RosenzweigPrincipal Consultant, Bentley User Experience Center
Adjunct Professor, Bentley [email protected]
1
* Design and usability of business forms* Wireframes for forms* Testing Wireframes* Iterating on the design* Takeaway
Today
2
3
Butterfly Ballot
The ballot design form worked when this punchcard ballot was a single page. The design decision to move the ballot to two pages created design flaws that confused people, creating hanging. pregnant and dimpled chads which spoiled those ballots and questioned the validity of the vote.
Ballot design in the 2000 General Electiongreatly influenced the outcome of the election.
Psychology: An electoral butterfly effectRobert C. Sinclair,Melvin M. Mark, Sean E. Moore, Carrie A. Lavis & Alexander S. SoldatNature volume408, pages665–666 (07 December 2000) doi:10.1038/35047160
4
User Experience Honeycomb
by Peter Morville
5
Methods and Tools
6
Discovery• Fieldresearch• Focusgroups• Personas&Usecases• Sketching• Onlinesurveys
DesignandEvaluation• Expertreview• Cardsorting• Wireframes/Interactiondesign• Usabilitytesting• EyetrackingBenchmarking• Large-scaleUXstudies• Accessibilityevaluations
UXCycle:MethodsandTools
7
Discovery Design&Evaluation Benchmarking
• Stakeholdervisioning• Literaturereview• Personas• Surveys• Interviewsandfocusgroups• Ethnographicobservation• Sketching• Taskflowanalysis• Usecasescenarios
• ExpertUXreview• Competitiveassessment• Paperprototypetesting• Closedcardsorting• Usabilitytesting• Remotetesting• Eyetracking• A/Btesting• Wireframedesigns
• EstablishingUXmetrics• Competitiveanalysis• Onlinesurveys• Trendanalysis• Large-scaleusabilitytesting
UserExperienceToolkit
Concept Development
Early Structural
Design
Detailed and Visual
DesignProduction Release
8
• Validatedesignsintherealworld• Greatercustomerinsight• Defineuserrequirements• Sparksinnovation
Discovery:FieldResearch
9
Sketching
Useful for ideation and initial form creation
10
• Exploredesignconceptswithagroupoftargetedcustomersorprospects
• Comparedesignalternatives,earlyprototypes,andwireframes
• Groupactivitiesmightincludesketching,cardsorting,orpaired-comparisons
Discovery:FocusGroups
11
UserExperienceToolkit
Concept Development
Early Structural
Design
Detailed and Visual
DesignProduction Release
• ExpertUXreview• Competitiveassessment• Paperprototypetesting• Closedcardsorting• Usabilitytesting• Remotetesting• Eyetrackinganalysis• A/Btesting• Wireframedesigns
Discovery Design&Evaluation Benchmarking
• Stakeholdervisioning• Literaturereview• Personas• Surveys• Interviewsandfocusgroups• Ethnographicobservation• Opencardsorting• Taskflowanalysis• Usecasescenarios
• ExpertUXreview• Competitiveassessment• Wireframetesting• Closedcardsorting• Usabilitytesting• Remotetesting• Eyetracking• A/Btesting• Wireframedesigns
• EstablishingUXmetrics• Competitiveanalysis• Onlinesurveys• Trendanalysis• Large-scaleusabilitytesting
12
• Evaluatetheuserexperienceofanyproductorsystembasedonindustry-widebestpractices
• Evaluationbasedoncommonusescenariosandtargetedusers
• Focusonnavigation,terminology,informationhierarchy,andconsistency(visualandinteraction)
• Majorusabilityissuesareidentified,withrationaleanddesignrecommendations
Design&Evaluation:ExpertReviews
13
• 1:1sessions
• Task-basedoropenexploration
• Qualitativeinsightsthroughthink-aloudprotocolandprobingquestions
• Collectdataontasksuccess,completiontimes,easeratings,andoverallscorecards
• Testinginlabsetting,remote,orinthefield
Design &Evaluation:UsabilityTesting
14
• Collectsdataaboutwhereparticipantsarelookinginrealtime
• Testwithstaticimages,websites,printmedia,video,orcommercials
Design&Evaluation:EyeTracking
15
• Detailed early designs representing core structural elements of design
• Allow for quick evaluation of design foundation without requiring significant development effort
• Review navigation and information architecture
Design&Evaluation:Wireframe/InteractionDesign
16
Wireframes
17
UserExperienceToolkit
Concept Development
Early Structural
Design
Detailed and Visual
DesignProduction Release
Discovery Design&Evaluation Benchmarking
• Stakeholdervisioning• Literaturereview• Personas• Surveys• Interviewsandfocusgroups• Ethnographicobservation• Opencardsorting• Taskflowanalysis• Usecasescenarios
• ExpertUXreview• Competitiveassessment• Paperprototypetesting• Closedcardsorting• Usabilitytesting• Remotetesting• Eyetracking• A/Btesting• Wireframedesigns
• EstablishingUXmetrics• Competitiveanalysis• Onlinesurveys• Trendanalysis• Large-scaleusabilitytesting
18
• Onlineusabilitystudywherebyparticipantsareinteractingwithaproductfromtheirhome/workguidedbythesurveytool
• Largesamplesizes,excellentforcapturingkeymetrics,comparingdesignalternativesorsubtledesigntreatments,validationofdesign
• Notlimitedtoweborsoftware,canbeusedforanytechnology
Benchmarking:LargeQuantitativeUXStudies
19
Iterative Design and Testing
20
Iterative Design Process
• Design wireframe form
• Test wireframe form• Review data from test, what was good, what
were opportunities for improvement• Redesign and update wireframe form
• Test wireframe form
• Iterate as many times as you have resources
Update/redesign wireframe design
Test wireframe
Data Analysis
Review Form
Design Form
21
Creating Wireframe Designs
22
What is a wireframe design?
23
Balsamiq wireframe
24
Axure Wireframes
25
Axure Wireframes
26
Wireframeslayoutshowplacementofgraphicsandtextfields.
27
Careful use of color will aid in user comprehension of information on a form. This is an easy to use function when creating wireframes.
28
Simple wireframes provide flexibility for form designers by showing layout for information.
High level information such as field types can be changed easily.
29
Clickable Wireframes
30
* Where to click* What is the flow or journey* What is the goal of the app/service/website?* Make sure you include extra time to prepare for the
test
Clickable Wireframes What you need to know to test
31
* Method and tools for creating form designs that can be evaluated early in the development process* Provide artifacts for form designs to allow for easy
evaluation* Wireframes provide ability for flexible redesign,
saving resources for development teams
Wireframes
* Bad design creates bad business forms* Wireframe design can help show users and
stakeholders the form related information before it is finalized
* Iterative testing of wireframes can create more usable forms and a successful user experience.
Takeaway
33
* Design and usability of business forms* Wireframes for forms* Testing Wireframes* Iterating on the design* Takeaway
Today
34
Thank you!
Elizabeth RosenzweigPrincipal Consultant, Bentley User Experience Center
Adjunct Professor, Bentley [email protected]
35