Wireframes fpr Design and Testing May2018 › sites › default...•Sketching •Task flow analysis...
Transcript of Wireframes fpr Design and Testing May2018 › sites › default...•Sketching •Task flow analysis...
![Page 1: Wireframes fpr Design and Testing May2018 › sites › default...•Sketching •Task flow analysis •Use case scenarios •Expert UX review •Competitive assessment •Paper prototype](https://reader033.fdocuments.in/reader033/viewer/2022060209/5f045e877e708231d40da34a/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 May2018 › sites › default...•Sketching •Task flow analysis •Use case scenarios •Expert UX review •Competitive assessment •Paper prototype](https://reader033.fdocuments.in/reader033/viewer/2022060209/5f045e877e708231d40da34a/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 May2018 › sites › default...•Sketching •Task flow analysis •Use case scenarios •Expert UX review •Competitive assessment •Paper prototype](https://reader033.fdocuments.in/reader033/viewer/2022060209/5f045e877e708231d40da34a/html5/thumbnails/3.jpg)
3
![Page 4: Wireframes fpr Design and Testing May2018 › sites › default...•Sketching •Task flow analysis •Use case scenarios •Expert UX review •Competitive assessment •Paper prototype](https://reader033.fdocuments.in/reader033/viewer/2022060209/5f045e877e708231d40da34a/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 May2018 › sites › default...•Sketching •Task flow analysis •Use case scenarios •Expert UX review •Competitive assessment •Paper prototype](https://reader033.fdocuments.in/reader033/viewer/2022060209/5f045e877e708231d40da34a/html5/thumbnails/5.jpg)
User Experience Honeycomb
by Peter Morville
5
![Page 6: Wireframes fpr Design and Testing May2018 › sites › default...•Sketching •Task flow analysis •Use case scenarios •Expert UX review •Competitive assessment •Paper prototype](https://reader033.fdocuments.in/reader033/viewer/2022060209/5f045e877e708231d40da34a/html5/thumbnails/6.jpg)
Methods and Tools
6
![Page 7: Wireframes fpr Design and Testing May2018 › sites › default...•Sketching •Task flow analysis •Use case scenarios •Expert UX review •Competitive assessment •Paper prototype](https://reader033.fdocuments.in/reader033/viewer/2022060209/5f045e877e708231d40da34a/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 May2018 › sites › default...•Sketching •Task flow analysis •Use case scenarios •Expert UX review •Competitive assessment •Paper prototype](https://reader033.fdocuments.in/reader033/viewer/2022060209/5f045e877e708231d40da34a/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 May2018 › sites › default...•Sketching •Task flow analysis •Use case scenarios •Expert UX review •Competitive assessment •Paper prototype](https://reader033.fdocuments.in/reader033/viewer/2022060209/5f045e877e708231d40da34a/html5/thumbnails/9.jpg)
• Validatedesignsintherealworld• Greatercustomerinsight• Defineuserrequirements• Sparksinnovation
Discovery:FieldResearch
9
![Page 10: Wireframes fpr Design and Testing May2018 › sites › default...•Sketching •Task flow analysis •Use case scenarios •Expert UX review •Competitive assessment •Paper prototype](https://reader033.fdocuments.in/reader033/viewer/2022060209/5f045e877e708231d40da34a/html5/thumbnails/10.jpg)
Sketching
Useful for ideation and initial form creation
10
![Page 11: Wireframes fpr Design and Testing May2018 › sites › default...•Sketching •Task flow analysis •Use case scenarios •Expert UX review •Competitive assessment •Paper prototype](https://reader033.fdocuments.in/reader033/viewer/2022060209/5f045e877e708231d40da34a/html5/thumbnails/11.jpg)
• Exploredesignconceptswithagroupoftargetedcustomersorprospects
• Comparedesignalternatives,earlyprototypes,andwireframes
• Groupactivitiesmightincludesketching,cardsorting,orpaired-comparisons
Discovery:FocusGroups
11
![Page 12: Wireframes fpr Design and Testing May2018 › sites › default...•Sketching •Task flow analysis •Use case scenarios •Expert UX review •Competitive assessment •Paper prototype](https://reader033.fdocuments.in/reader033/viewer/2022060209/5f045e877e708231d40da34a/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 May2018 › sites › default...•Sketching •Task flow analysis •Use case scenarios •Expert UX review •Competitive assessment •Paper prototype](https://reader033.fdocuments.in/reader033/viewer/2022060209/5f045e877e708231d40da34a/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 May2018 › sites › default...•Sketching •Task flow analysis •Use case scenarios •Expert UX review •Competitive assessment •Paper prototype](https://reader033.fdocuments.in/reader033/viewer/2022060209/5f045e877e708231d40da34a/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 May2018 › sites › default...•Sketching •Task flow analysis •Use case scenarios •Expert UX review •Competitive assessment •Paper prototype](https://reader033.fdocuments.in/reader033/viewer/2022060209/5f045e877e708231d40da34a/html5/thumbnails/15.jpg)
• Collectsdataaboutwhereparticipantsarelookinginrealtime
• Testwithstaticimages,websites,printmedia,video,orcommercials
Design&Evaluation:EyeTracking
15
![Page 16: Wireframes fpr Design and Testing May2018 › sites › default...•Sketching •Task flow analysis •Use case scenarios •Expert UX review •Competitive assessment •Paper prototype](https://reader033.fdocuments.in/reader033/viewer/2022060209/5f045e877e708231d40da34a/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 May2018 › sites › default...•Sketching •Task flow analysis •Use case scenarios •Expert UX review •Competitive assessment •Paper prototype](https://reader033.fdocuments.in/reader033/viewer/2022060209/5f045e877e708231d40da34a/html5/thumbnails/17.jpg)
Wireframes
17
![Page 18: Wireframes fpr Design and Testing May2018 › sites › default...•Sketching •Task flow analysis •Use case scenarios •Expert UX review •Competitive assessment •Paper prototype](https://reader033.fdocuments.in/reader033/viewer/2022060209/5f045e877e708231d40da34a/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 May2018 › sites › default...•Sketching •Task flow analysis •Use case scenarios •Expert UX review •Competitive assessment •Paper prototype](https://reader033.fdocuments.in/reader033/viewer/2022060209/5f045e877e708231d40da34a/html5/thumbnails/19.jpg)
• Onlineusabilitystudywherebyparticipantsareinteractingwithaproductfromtheirhome/workguidedbythesurveytool
• Largesamplesizes,excellentforcapturingkeymetrics,comparingdesignalternativesorsubtledesigntreatments,validationofdesign
• Notlimitedtoweborsoftware,canbeusedforanytechnology
Benchmarking:LargeQuantitativeUXStudies
19
![Page 20: Wireframes fpr Design and Testing May2018 › sites › default...•Sketching •Task flow analysis •Use case scenarios •Expert UX review •Competitive assessment •Paper prototype](https://reader033.fdocuments.in/reader033/viewer/2022060209/5f045e877e708231d40da34a/html5/thumbnails/20.jpg)
Iterative Design and Testing
20
![Page 21: Wireframes fpr Design and Testing May2018 › sites › default...•Sketching •Task flow analysis •Use case scenarios •Expert UX review •Competitive assessment •Paper prototype](https://reader033.fdocuments.in/reader033/viewer/2022060209/5f045e877e708231d40da34a/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 May2018 › sites › default...•Sketching •Task flow analysis •Use case scenarios •Expert UX review •Competitive assessment •Paper prototype](https://reader033.fdocuments.in/reader033/viewer/2022060209/5f045e877e708231d40da34a/html5/thumbnails/22.jpg)
Creating Wireframe Designs
22
![Page 23: Wireframes fpr Design and Testing May2018 › sites › default...•Sketching •Task flow analysis •Use case scenarios •Expert UX review •Competitive assessment •Paper prototype](https://reader033.fdocuments.in/reader033/viewer/2022060209/5f045e877e708231d40da34a/html5/thumbnails/23.jpg)
What is a wireframe design?
23
![Page 24: Wireframes fpr Design and Testing May2018 › sites › default...•Sketching •Task flow analysis •Use case scenarios •Expert UX review •Competitive assessment •Paper prototype](https://reader033.fdocuments.in/reader033/viewer/2022060209/5f045e877e708231d40da34a/html5/thumbnails/24.jpg)
Balsamiq wireframe
24
![Page 25: Wireframes fpr Design and Testing May2018 › sites › default...•Sketching •Task flow analysis •Use case scenarios •Expert UX review •Competitive assessment •Paper prototype](https://reader033.fdocuments.in/reader033/viewer/2022060209/5f045e877e708231d40da34a/html5/thumbnails/25.jpg)
Axure Wireframes
25
![Page 26: Wireframes fpr Design and Testing May2018 › sites › default...•Sketching •Task flow analysis •Use case scenarios •Expert UX review •Competitive assessment •Paper prototype](https://reader033.fdocuments.in/reader033/viewer/2022060209/5f045e877e708231d40da34a/html5/thumbnails/26.jpg)
Axure Wireframes
26
![Page 27: Wireframes fpr Design and Testing May2018 › sites › default...•Sketching •Task flow analysis •Use case scenarios •Expert UX review •Competitive assessment •Paper prototype](https://reader033.fdocuments.in/reader033/viewer/2022060209/5f045e877e708231d40da34a/html5/thumbnails/27.jpg)
Wireframeslayoutshowplacementofgraphicsandtextfields.
27
![Page 28: Wireframes fpr Design and Testing May2018 › sites › default...•Sketching •Task flow analysis •Use case scenarios •Expert UX review •Competitive assessment •Paper prototype](https://reader033.fdocuments.in/reader033/viewer/2022060209/5f045e877e708231d40da34a/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 May2018 › sites › default...•Sketching •Task flow analysis •Use case scenarios •Expert UX review •Competitive assessment •Paper prototype](https://reader033.fdocuments.in/reader033/viewer/2022060209/5f045e877e708231d40da34a/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 May2018 › sites › default...•Sketching •Task flow analysis •Use case scenarios •Expert UX review •Competitive assessment •Paper prototype](https://reader033.fdocuments.in/reader033/viewer/2022060209/5f045e877e708231d40da34a/html5/thumbnails/30.jpg)
Clickable Wireframes
30
![Page 31: Wireframes fpr Design and Testing May2018 › sites › default...•Sketching •Task flow analysis •Use case scenarios •Expert UX review •Competitive assessment •Paper prototype](https://reader033.fdocuments.in/reader033/viewer/2022060209/5f045e877e708231d40da34a/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 May2018 › sites › default...•Sketching •Task flow analysis •Use case scenarios •Expert UX review •Competitive assessment •Paper prototype](https://reader033.fdocuments.in/reader033/viewer/2022060209/5f045e877e708231d40da34a/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 May2018 › sites › default...•Sketching •Task flow analysis •Use case scenarios •Expert UX review •Competitive assessment •Paper prototype](https://reader033.fdocuments.in/reader033/viewer/2022060209/5f045e877e708231d40da34a/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 May2018 › sites › default...•Sketching •Task flow analysis •Use case scenarios •Expert UX review •Competitive assessment •Paper prototype](https://reader033.fdocuments.in/reader033/viewer/2022060209/5f045e877e708231d40da34a/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 May2018 › sites › default...•Sketching •Task flow analysis •Use case scenarios •Expert UX review •Competitive assessment •Paper prototype](https://reader033.fdocuments.in/reader033/viewer/2022060209/5f045e877e708231d40da34a/html5/thumbnails/35.jpg)
Thank you!
Elizabeth RosenzweigPrincipal Consultant, Bentley User Experience Center
Adjunct Professor, Bentley [email protected]
35