Prototyping and Usability Testing with Visio

1 1 Prototyping and UsabilityTesting with Visio Karen Bachmann Whitney Quesenbery, Whitney Interactive DesignOverview of PrototypingUses, functions andtypes of prototypes2 Prototyping and Usability Testing with VisioWhitney Quesenbery and Karen BachmannWhat is a prototype? A model of the final product A way to see what something will be like before it isbuilt. A vehicle for exploration A way to validate ideas in a low-risk environment beforemaking a final decision A proof of concept A way to test specific aspects of a design problem A method of communication A way to develop and maintain an understanding of theend result with the development teamPrototyping and Usability Testing with VisioWhitney Quesenbery and Karen BachmannWhy prototype? Explore Create a strong design by iterating through ideas rapidly Communicate Demonstrate progress against time lines in tangibleformat Collaborate Enhance collaboration with other teams through clearunderstanding and a shared vocabulary Validate Test a design in early stages when changes can bemade easily3 Prototyping and Usability Testing with VisioWhitney Quesenbery and Karen BachmannPrototyping goals1.

2 Can users work effectively with the interface Visual or information design issues Can the user find and understand the information on thescreen? Navigation issues Does the user understand the meaning of each control?Can they find the controls or information needed tocomplete their task? Efficiency issues Can the user work quickly enough to meet usabilitygoalsPrototyping and Usability Testing with VisioWhitney Quesenbery and Karen BachmannPrototyping goals2. Demonstrate the user interface Communicate the design to developers, marketing,management, or customers Walk through proposed navigation design Match screens and controls to use cases Demo proposed functionality to internal or externalgroups4 Prototyping and Usability Testing with VisioWhitney Quesenbery and Karen BachmannTypes of prototypes Low fidelity (wire-frames) Simple layout sketches which usually focus on contentand layout Slide shows High fidelity visual design, but with minimal interactivity Medium fidelity Good visual fidelity with nominal interaction capabilityfollowing a scenario High fidelity Full interaction capabilities and detailed screen and Usability Testing with VisioWhitney Quesenbery and Karen BachmannWhat to include in a prototype?

3 Horizontal Full breath of functionality, but with little depth Vertical Complete demonstration of representative tasks orinformation paths Key Screen or T-Prototype Full breadth indicated, with 1-2 tasks prototyped indetail5 Prototyping and Usability Testing with VisioWhitney Quesenbery and Karen BachmannWhen to prototype?Envision Analyze Design RefineBuild Support1234analysisdesignbuild vision prototypes expose early ideas to comment wireframes accompany use-case analysis or participatorydesign sessions key screen prototype demonstrates interactionstructure/UI architecture prototypes validate specific or complex work flows visual prototypes test layout for Usability and technology5 Prototyping and Usability Testing with VisioWhitney Quesenbery and Karen BachmannSelecting a Prototyping tool Paper low fidelity and difficultto distribute HTML good for navigation, butnot always appropriate Developmentenvironment high fidelity, but slowand can limit creativity Director(or other interactiveenvironments) good for experimentalinteractions, can berapid, can be toodifferent from finalenvironment Visio hybrid.

4 Rapid, highscreen fidelity,moderate interaction6 Visio as a Prototyping ToolEffective use of Visio to create screenprototypes that are in close fidelity to thefinal screen and Usability Testing with VisioWhitney Quesenbery and Karen BachmannIntroducing Visio An object-oriented drawing program Basic building blocks: Shapes and stencils: Range frombasic shapes and flowchartingto Windows UI and UML Templates: Support consistentuse and reuse of elementsthroughout prototype Backgrounds: Contain commonelements applied across screens7 Prototyping and Usability Testing with VisioWhitney Quesenbery and Karen BachmannVisio basics Setting up a screen layout to be correctlyproportional Working with existing templates and stencils Creating backgrounds Creating custom shapes in a drawing masterstencil Building custom stencils and templatePrototyping and Usability Testing with VisioWhitney Quesenbery and Karen BachmannVisio drawing structure Benefits of using stencils Consistency within and between projects Reusable repository of elements and layouts Rapid development of prototypes Analyzing visual design and layout Customizable grid layout Creating composite shapes for screen objects Custom stencils Custom shapes Layered backgrounds8 Creating the PrototypeHTML pages contain an imageof the Visio page and imagemap and Usability Testing with VisioWhitney Quesenbery and Karen Bachmann1.

5 Prepare Understand how the demo will be used Will the demo use a script or be free-form? What functions will be included? What Visio pages represent these functions What links or other interactivity are required? Be sure the level of interactivity is appropriate for Visio Plan strategies for complex interactions9 Prototyping and Usability Testing with VisioWhitney Quesenbery and Karen Bachmann2. Plan the interactivity Identify all pages or screens in the demo Create a single Visio file with all pages Draw an overall navigation flow How to the individual pages connect to each other Identify the links on each page (Optional) Move any global links to the background layer Identify the Visio page that is the target of each linkPrototyping and Usability Testing with VisioWhitney Quesenbery and Karen Bachmann3. Create the links To create a link: Select a shape Select Insert | Hyperlinkor Alt-K Enter the link target Address: Leave blank forthe current file Sub-Address: Select athe Visio page Description: Enterappropriate text10 Prototyping and Usability Testing with VisioWhitney Quesenbery and Karen BachmannTips Hyperlink tips Links on backgroundpages or groupedshapes only work inVisio 2000 Do not layer links ontop of each other Do not create multipletargets to a link Links work better onsolid objects, with alarger click-target Delete any shapesoutside the page layoutarea The HTML page imagewill contain all shapeson each page, includinghidden shapes or thoseon a different layer If you included browsertoolbars in the layouts,delete themPrototyping and Usability Testing with VisioWhitney Quesenbery and Karen Bachmann4.

6 Save As HTML Save your file, thenSave As HTML All HTML files will becreated in the selecteddirectory, with FileName as a prefix Files created: .js files and nav images * * * * * ifVML isselected11 Prototyping and Usability Testing with VisioWhitney Quesenbery and Karen Bachmann4a. Save As HTML options Select graphic format VML - scaleable, but onlyworks in IE5 GIF, JPEG - work in allbrowsers PNG - works in somebrowsers Select pages to include Default is all foregroundpagesBe sure to test a typical page tosee which graphics format worksbest for your page imagesPrototyping and Usability Testing with VisioWhitney Quesenbery and Karen Bachmann5. View the prototype Two ways to navigate: Use hyperlinks in your screens Use the page index in the bottom frame12 Usability Testing withVisio PrototypesConducting a Usability test with a Visio rapid Usability technique to gain insights intousers reactions to specific user interface minsPrototyping and Usability Testing with VisioWhitney Quesenbery and Karen BachmannWhat can Visio effectively test?

7 Yes Navigation between majorfunctions or within a singletask Screen layout and placementor grouping of controls Terminology and language inthe interface How well users understandfunctionality provided Choice of graphical elements,such as iconsNo Complex interaction requiringdynamic presentation ofinformation How well users can completeforms, especially withprogram response to dataentry Windows management13 Prototyping and Usability Testing with VisioWhitney Quesenbery and Karen BachmannPlanning a Usability test Establish goals and scope What do you hope to learn? Plan the Usability test What tasks or sections of the product are included? Scripted task or user-driven exploration? What functionality must be active? Recruit users and set up facility 2-3 users per round Plan facilitation and interaction areasPrototyping and Usability Testing with VisioWhitney Quesenbery and Karen BachmannGuerilla Usability tests Small in scope Looking for input on specific design problems Testing overall organization of workflow or informationarchitecture Small number of users per iteration Just enough to gain enough insight to confirm or iteratedesign14 Prototyping and Usability Testing with VisioWhitney Quesenbery and Karen BachmannHow do users interact with the prototype?

8 Navigation is done on-screen All buttons, links or other major navigation controls areactive and can be used to move from page to page Post-it notes represent Drop down menus or combo boxes Some popup windows Filling in forms on paper Print outs of the forms let users write in any data theywould enter. Talk through the actions Users describe aloud what actions they take and datathey usePrototyping and Usability Testing with VisioWhitney Quesenbery and Karen BachmannSounds crazy!..but it works. The informality is infectious It s relaxing and interactive for the users Users have little trouble moving from screen to paperwhen necessary (as long as they match) The fact that it s obviously a work in progressencourages users to make suggestions and talk easily Users will feel that they are making a real contribution tothe development of new products15 Any questions? Prototyping and Usability Testing with VisioWhitney Quesenbery and Karen BachmannReading List Prototyping Using Visio by Robin Kavanagh and John Usability Methods Toolbox (Section on Prototyping ) ~jthom/ Five Paper Prototyping Tips by Matthew ~ Using Paper Prototypes to Manage ~ Conceptual User Interface: A New Tool for Designing E-Commerce Interactive Sketching for the Early Stages of User Interface Design byJames A.

9 Landay and Brad A. ~landay/research/publications/SILK_ Microsoft Visio Tips & UsWhitney QuesenberyWhitney Interactive