Wireframes fpr Design and Testing...

35
Wireframes for Testing and Design Elizabeth Rosenzweig Principal Consultant, Bentley User Experience Center Adjunct Professor, Bentley University [email protected] 1

Transcript of Wireframes fpr Design and Testing...

Page 1: Wireframes fpr Design and Testing May2018d2f5upgbvkx8pz.cloudfront.net/sites/default/files/inline-files... · Wireframe testing Eye tracking •Establishing UX metrics •Competitive

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

* 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

3

Page 4: Wireframes fpr Design and Testing May2018d2f5upgbvkx8pz.cloudfront.net/sites/default/files/inline-files... · Wireframe testing Eye tracking •Establishing UX metrics •Competitive

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

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

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

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

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

• 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

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

• 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

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

• 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

• 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

• 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

• 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

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

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

• 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

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

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

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

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

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

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

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

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

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

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

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

* 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

* 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

* 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

* 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

Thank you!

Elizabeth RosenzweigPrincipal Consultant, Bentley User Experience Center

Adjunct Professor, Bentley [email protected]

35