wireframes fpr design and testing...
TRANSCRIPT
![Page 1: Wireframes fpr Design and Testing May2018d2f5upgbvkx8pz.cloudfront.net/sites/default/files/inline-files... · Wireframe testing Eye tracking •Establishing UX metrics •Competitive](https://reader033.vdocument.in/reader033/viewer/2022050421/5f90c40a283cf31a65069b92/html5/thumbnails/1.jpg)
Wireframes for Testing and Design
Elizabeth RosenzweigPrincipal Consultant, Bentley User Experience Center
Adjunct Professor, Bentley [email protected]
1
![Page 2: Wireframes fpr Design and Testing May2018d2f5upgbvkx8pz.cloudfront.net/sites/default/files/inline-files... · Wireframe testing Eye tracking •Establishing UX metrics •Competitive](https://reader033.vdocument.in/reader033/viewer/2022050421/5f90c40a283cf31a65069b92/html5/thumbnails/2.jpg)
* Design and usability of business forms* Wireframes for forms* Testing Wireframes* Iterating on the design* Takeaway
Today
2
![Page 3: Wireframes fpr Design and Testing May2018d2f5upgbvkx8pz.cloudfront.net/sites/default/files/inline-files... · Wireframe testing Eye tracking •Establishing UX metrics •Competitive](https://reader033.vdocument.in/reader033/viewer/2022050421/5f90c40a283cf31a65069b92/html5/thumbnails/3.jpg)
3
![Page 4: Wireframes fpr Design and Testing May2018d2f5upgbvkx8pz.cloudfront.net/sites/default/files/inline-files... · Wireframe testing Eye tracking •Establishing UX metrics •Competitive](https://reader033.vdocument.in/reader033/viewer/2022050421/5f90c40a283cf31a65069b92/html5/thumbnails/4.jpg)
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
![Page 5: Wireframes fpr Design and Testing May2018d2f5upgbvkx8pz.cloudfront.net/sites/default/files/inline-files... · Wireframe testing Eye tracking •Establishing UX metrics •Competitive](https://reader033.vdocument.in/reader033/viewer/2022050421/5f90c40a283cf31a65069b92/html5/thumbnails/5.jpg)
User Experience Honeycomb
by Peter Morville
5
![Page 6: Wireframes fpr Design and Testing May2018d2f5upgbvkx8pz.cloudfront.net/sites/default/files/inline-files... · Wireframe testing Eye tracking •Establishing UX metrics •Competitive](https://reader033.vdocument.in/reader033/viewer/2022050421/5f90c40a283cf31a65069b92/html5/thumbnails/6.jpg)
Methods and Tools
6
![Page 7: Wireframes fpr Design and Testing May2018d2f5upgbvkx8pz.cloudfront.net/sites/default/files/inline-files... · Wireframe testing Eye tracking •Establishing UX metrics •Competitive](https://reader033.vdocument.in/reader033/viewer/2022050421/5f90c40a283cf31a65069b92/html5/thumbnails/7.jpg)
Discovery• Fieldresearch• Focusgroups• Personas&Usecases• Sketching• Onlinesurveys
DesignandEvaluation• Expertreview• Cardsorting• Wireframes/Interactiondesign• Usabilitytesting• EyetrackingBenchmarking• Large-scaleUXstudies• Accessibilityevaluations
UXCycle:MethodsandTools
7
![Page 8: Wireframes fpr Design and Testing May2018d2f5upgbvkx8pz.cloudfront.net/sites/default/files/inline-files... · Wireframe testing Eye tracking •Establishing UX metrics •Competitive](https://reader033.vdocument.in/reader033/viewer/2022050421/5f90c40a283cf31a65069b92/html5/thumbnails/8.jpg)
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
![Page 9: Wireframes fpr Design and Testing May2018d2f5upgbvkx8pz.cloudfront.net/sites/default/files/inline-files... · Wireframe testing Eye tracking •Establishing UX metrics •Competitive](https://reader033.vdocument.in/reader033/viewer/2022050421/5f90c40a283cf31a65069b92/html5/thumbnails/9.jpg)
• Validatedesignsintherealworld• Greatercustomerinsight• Defineuserrequirements• Sparksinnovation
Discovery:FieldResearch
9
![Page 10: Wireframes fpr Design and Testing May2018d2f5upgbvkx8pz.cloudfront.net/sites/default/files/inline-files... · Wireframe testing Eye tracking •Establishing UX metrics •Competitive](https://reader033.vdocument.in/reader033/viewer/2022050421/5f90c40a283cf31a65069b92/html5/thumbnails/10.jpg)
Sketching
Useful for ideation and initial form creation
10
![Page 11: Wireframes fpr Design and Testing May2018d2f5upgbvkx8pz.cloudfront.net/sites/default/files/inline-files... · Wireframe testing Eye tracking •Establishing UX metrics •Competitive](https://reader033.vdocument.in/reader033/viewer/2022050421/5f90c40a283cf31a65069b92/html5/thumbnails/11.jpg)
• Exploredesignconceptswithagroupoftargetedcustomersorprospects
• Comparedesignalternatives,earlyprototypes,andwireframes
• Groupactivitiesmightincludesketching,cardsorting,orpaired-comparisons
Discovery:FocusGroups
11
![Page 12: Wireframes fpr Design and Testing May2018d2f5upgbvkx8pz.cloudfront.net/sites/default/files/inline-files... · Wireframe testing Eye tracking •Establishing UX metrics •Competitive](https://reader033.vdocument.in/reader033/viewer/2022050421/5f90c40a283cf31a65069b92/html5/thumbnails/12.jpg)
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
![Page 13: Wireframes fpr Design and Testing May2018d2f5upgbvkx8pz.cloudfront.net/sites/default/files/inline-files... · Wireframe testing Eye tracking •Establishing UX metrics •Competitive](https://reader033.vdocument.in/reader033/viewer/2022050421/5f90c40a283cf31a65069b92/html5/thumbnails/13.jpg)
• Evaluatetheuserexperienceofanyproductorsystembasedonindustry-widebestpractices
• Evaluationbasedoncommonusescenariosandtargetedusers
• Focusonnavigation,terminology,informationhierarchy,andconsistency(visualandinteraction)
• Majorusabilityissuesareidentified,withrationaleanddesignrecommendations
Design&Evaluation:ExpertReviews
13
![Page 14: Wireframes fpr Design and Testing May2018d2f5upgbvkx8pz.cloudfront.net/sites/default/files/inline-files... · Wireframe testing Eye tracking •Establishing UX metrics •Competitive](https://reader033.vdocument.in/reader033/viewer/2022050421/5f90c40a283cf31a65069b92/html5/thumbnails/14.jpg)
• 1:1sessions
• Task-basedoropenexploration
• Qualitativeinsightsthroughthink-aloudprotocolandprobingquestions
• Collectdataontasksuccess,completiontimes,easeratings,andoverallscorecards
• Testinginlabsetting,remote,orinthefield
Design &Evaluation:UsabilityTesting
14
![Page 15: Wireframes fpr Design and Testing May2018d2f5upgbvkx8pz.cloudfront.net/sites/default/files/inline-files... · Wireframe testing Eye tracking •Establishing UX metrics •Competitive](https://reader033.vdocument.in/reader033/viewer/2022050421/5f90c40a283cf31a65069b92/html5/thumbnails/15.jpg)
• Collectsdataaboutwhereparticipantsarelookinginrealtime
• Testwithstaticimages,websites,printmedia,video,orcommercials
Design&Evaluation:EyeTracking
15
![Page 16: Wireframes fpr Design and Testing May2018d2f5upgbvkx8pz.cloudfront.net/sites/default/files/inline-files... · Wireframe testing Eye tracking •Establishing UX metrics •Competitive](https://reader033.vdocument.in/reader033/viewer/2022050421/5f90c40a283cf31a65069b92/html5/thumbnails/16.jpg)
• 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
![Page 17: Wireframes fpr Design and Testing May2018d2f5upgbvkx8pz.cloudfront.net/sites/default/files/inline-files... · Wireframe testing Eye tracking •Establishing UX metrics •Competitive](https://reader033.vdocument.in/reader033/viewer/2022050421/5f90c40a283cf31a65069b92/html5/thumbnails/17.jpg)
Wireframes
17
![Page 18: Wireframes fpr Design and Testing May2018d2f5upgbvkx8pz.cloudfront.net/sites/default/files/inline-files... · Wireframe testing Eye tracking •Establishing UX metrics •Competitive](https://reader033.vdocument.in/reader033/viewer/2022050421/5f90c40a283cf31a65069b92/html5/thumbnails/18.jpg)
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
![Page 19: Wireframes fpr Design and Testing May2018d2f5upgbvkx8pz.cloudfront.net/sites/default/files/inline-files... · Wireframe testing Eye tracking •Establishing UX metrics •Competitive](https://reader033.vdocument.in/reader033/viewer/2022050421/5f90c40a283cf31a65069b92/html5/thumbnails/19.jpg)
• Onlineusabilitystudywherebyparticipantsareinteractingwithaproductfromtheirhome/workguidedbythesurveytool
• Largesamplesizes,excellentforcapturingkeymetrics,comparingdesignalternativesorsubtledesigntreatments,validationofdesign
• Notlimitedtoweborsoftware,canbeusedforanytechnology
Benchmarking:LargeQuantitativeUXStudies
19
![Page 20: Wireframes fpr Design and Testing May2018d2f5upgbvkx8pz.cloudfront.net/sites/default/files/inline-files... · Wireframe testing Eye tracking •Establishing UX metrics •Competitive](https://reader033.vdocument.in/reader033/viewer/2022050421/5f90c40a283cf31a65069b92/html5/thumbnails/20.jpg)
Iterative Design and Testing
20
![Page 21: Wireframes fpr Design and Testing May2018d2f5upgbvkx8pz.cloudfront.net/sites/default/files/inline-files... · Wireframe testing Eye tracking •Establishing UX metrics •Competitive](https://reader033.vdocument.in/reader033/viewer/2022050421/5f90c40a283cf31a65069b92/html5/thumbnails/21.jpg)
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
![Page 22: Wireframes fpr Design and Testing May2018d2f5upgbvkx8pz.cloudfront.net/sites/default/files/inline-files... · Wireframe testing Eye tracking •Establishing UX metrics •Competitive](https://reader033.vdocument.in/reader033/viewer/2022050421/5f90c40a283cf31a65069b92/html5/thumbnails/22.jpg)
Creating Wireframe Designs
22
![Page 23: Wireframes fpr Design and Testing May2018d2f5upgbvkx8pz.cloudfront.net/sites/default/files/inline-files... · Wireframe testing Eye tracking •Establishing UX metrics •Competitive](https://reader033.vdocument.in/reader033/viewer/2022050421/5f90c40a283cf31a65069b92/html5/thumbnails/23.jpg)
What is a wireframe design?
23
![Page 24: Wireframes fpr Design and Testing May2018d2f5upgbvkx8pz.cloudfront.net/sites/default/files/inline-files... · Wireframe testing Eye tracking •Establishing UX metrics •Competitive](https://reader033.vdocument.in/reader033/viewer/2022050421/5f90c40a283cf31a65069b92/html5/thumbnails/24.jpg)
Balsamiq wireframe
24
![Page 25: Wireframes fpr Design and Testing May2018d2f5upgbvkx8pz.cloudfront.net/sites/default/files/inline-files... · Wireframe testing Eye tracking •Establishing UX metrics •Competitive](https://reader033.vdocument.in/reader033/viewer/2022050421/5f90c40a283cf31a65069b92/html5/thumbnails/25.jpg)
Axure Wireframes
25
![Page 26: Wireframes fpr Design and Testing May2018d2f5upgbvkx8pz.cloudfront.net/sites/default/files/inline-files... · Wireframe testing Eye tracking •Establishing UX metrics •Competitive](https://reader033.vdocument.in/reader033/viewer/2022050421/5f90c40a283cf31a65069b92/html5/thumbnails/26.jpg)
Axure Wireframes
26
![Page 27: Wireframes fpr Design and Testing May2018d2f5upgbvkx8pz.cloudfront.net/sites/default/files/inline-files... · Wireframe testing Eye tracking •Establishing UX metrics •Competitive](https://reader033.vdocument.in/reader033/viewer/2022050421/5f90c40a283cf31a65069b92/html5/thumbnails/27.jpg)
Wireframeslayoutshowplacementofgraphicsandtextfields.
27
![Page 28: Wireframes fpr Design and Testing May2018d2f5upgbvkx8pz.cloudfront.net/sites/default/files/inline-files... · Wireframe testing Eye tracking •Establishing UX metrics •Competitive](https://reader033.vdocument.in/reader033/viewer/2022050421/5f90c40a283cf31a65069b92/html5/thumbnails/28.jpg)
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
![Page 29: Wireframes fpr Design and Testing May2018d2f5upgbvkx8pz.cloudfront.net/sites/default/files/inline-files... · Wireframe testing Eye tracking •Establishing UX metrics •Competitive](https://reader033.vdocument.in/reader033/viewer/2022050421/5f90c40a283cf31a65069b92/html5/thumbnails/29.jpg)
Simple wireframes provide flexibility for form designers by showing layout for information.
High level information such as field types can be changed easily.
29
![Page 30: Wireframes fpr Design and Testing May2018d2f5upgbvkx8pz.cloudfront.net/sites/default/files/inline-files... · Wireframe testing Eye tracking •Establishing UX metrics •Competitive](https://reader033.vdocument.in/reader033/viewer/2022050421/5f90c40a283cf31a65069b92/html5/thumbnails/30.jpg)
Clickable Wireframes
30
![Page 31: Wireframes fpr Design and Testing May2018d2f5upgbvkx8pz.cloudfront.net/sites/default/files/inline-files... · Wireframe testing Eye tracking •Establishing UX metrics •Competitive](https://reader033.vdocument.in/reader033/viewer/2022050421/5f90c40a283cf31a65069b92/html5/thumbnails/31.jpg)
* 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
![Page 32: Wireframes fpr Design and Testing May2018d2f5upgbvkx8pz.cloudfront.net/sites/default/files/inline-files... · Wireframe testing Eye tracking •Establishing UX metrics •Competitive](https://reader033.vdocument.in/reader033/viewer/2022050421/5f90c40a283cf31a65069b92/html5/thumbnails/32.jpg)
* 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
![Page 33: Wireframes fpr Design and Testing May2018d2f5upgbvkx8pz.cloudfront.net/sites/default/files/inline-files... · Wireframe testing Eye tracking •Establishing UX metrics •Competitive](https://reader033.vdocument.in/reader033/viewer/2022050421/5f90c40a283cf31a65069b92/html5/thumbnails/33.jpg)
* 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
![Page 34: Wireframes fpr Design and Testing May2018d2f5upgbvkx8pz.cloudfront.net/sites/default/files/inline-files... · Wireframe testing Eye tracking •Establishing UX metrics •Competitive](https://reader033.vdocument.in/reader033/viewer/2022050421/5f90c40a283cf31a65069b92/html5/thumbnails/34.jpg)
* Design and usability of business forms* Wireframes for forms* Testing Wireframes* Iterating on the design* Takeaway
Today
34
![Page 35: Wireframes fpr Design and Testing May2018d2f5upgbvkx8pz.cloudfront.net/sites/default/files/inline-files... · Wireframe testing Eye tracking •Establishing UX metrics •Competitive](https://reader033.vdocument.in/reader033/viewer/2022050421/5f90c40a283cf31a65069b92/html5/thumbnails/35.jpg)
Thank you!
Elizabeth RosenzweigPrincipal Consultant, Bentley User Experience Center
Adjunct Professor, Bentley [email protected]
35