Wireframes for Testing and Design

Elizabeth RosenzweigPrincipal Consultant, Bentley User Experience Center

Adjunct Professor, Bentley Universityerosenzweig@Bentley.edu

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 Universityerosenzweig@Bentley.edu

35