TUR - Prototyping

How to have a satisfied user? What are the sources of user satisfaction? What are the sources of user satisfaction? Where the user satisfaction can be influenced? Where the user satisfaction can be influenced? What is the usual course of events? What is the usual course of events? NUR - Prototyping (low fidelity) (3)

Dilemma You can’t evaluate design until it’s built You can’t evaluate design until it’s built –But… After building, changes to the design are difficult After building, changes to the design are difficult Simulate the design, in low-cost manner Simulate the design, in low-cost manner

How and when to test user interface

9 Rapid Prototyping Methods Non-computer vs. computer-based Typically earlier in processTypically later in process

10 Non-Computer Methods Goal: Want to express design ideas and get quick & cheap opinions on system Methods?

11 Sketches, Mock-ups Paper-based “drawings” of interfaces Good for brainstorming Focuses people on high-level design notions Not so good for illustrating flow and the details Quick and cheap -> helpful feedback

12 Physical Mock-Ups Wooden blocks and labels - device control (Three versions of a hand-held controller)

13 Computer Methods Simulate more of system functionality – –Usually just some features or aspects – –Can focus on more of details – –Typically engaging – –Danger: Users are more reluctant to suggest changes once they see more realistic prototype

14 Prototyping Tools - Drawing Pgms. Draw/Paint programs – –Draw each screen, good for look Thin, horizontal prototypePhotoShop, Corel Draw,... IP Address CancelOK

15 Prototyping Tools - Scripting Scripted simulations/slide shows – –Put storyboard-like views down with (animated) transitions between them – –Can give user very specific script to follow Often called chauffeured prototyping – –Examples: PowerPoint, Hypercard, HTML, Macromedia Director

Powerpoint Transition Controls Mouse click actions: Next slide Previous slide First slide Last slide Last slide viewed End show Custom show URL File

Sketching and Prototyping Early design Late design Brainstorm different representations Choose a representation Rough out interface style Sketches & low fidelity paper prototypes Task centered walkthrough and redesign Fine tune interface, screen design Heuristic evaluation and redesign Usability testing and redesign Medium fidelity prototypes Limited field testing Alpha/Beta tests High fidelity prototypes Working systems

Sketches & Low Fidelity Prototypes Paper mock-up of the interface look, feel, functionality Paper mock-up of the interface look, feel, functionality –quick and cheap to prepare and modify Purpose Purpose –brainstorm competing representations –elicit user reactions –elicit user modifications / suggestions

Sketches –drawing of the outward appearance of the intended system –crudity means people concentrate on high level concepts –but hard to envision a dialog’s progression Computer Telephone Last Name: First Name: Phone: Place CallHelp

E-SHOP…….BUYING BABY STROLLER EXAMPLE NUR - Prototyping (low fidelity) (20)

Sketches & Low Fidelity Prototypes Paper mock-up of the interface look, feel, functionality Paper mock-up of the interface look, feel, functionality –quick and cheap to prepare and modify Purpose Purpose –brainstorm competing representations –elicit user reactions –elicit user modifications / suggestions

Sketches –drawing of the outward appearance of the intended system –crudity means people concentrate on high level concepts –but hard to envision a dialog’s progression Computer Telephone Last Name: First Name: Phone: Place CallHelp

Scan the stroller -> Change the color -> Place the order -> Initial screen

Scan the shirt -> Touch previous item -> Delete that item-> Alternate path…

Paper mock-up

Tools for creation of paper prototypes

Složitější příklad PP

Storyboarding Spotlight: an interactive foam core and paper sketch/storyboard Credit: Sue-Tze Tan, Dept Industrial Design, University of Washington Spotlight: an interactive foam core and paper sketch/storyboard Credit: Sue-Tze Tan, Dept Industrial Design, University of Washington From Design for the Wild, Bill Buxton (in press) with permission

WHERE IS THE USER? Up to now only technicalities were described NUR - Prototyping (low fidelity) (41)

Methods for involving the user At the very least, talk to users At the very least, talk to users –surprising how many designers don’t! Contextual interviews + site visits Contextual interviews + site visits –interview users in their workplace, as they are doing their job –discover user’s culture, requirements, expectations,…

User involvement User should be involved in all stages of the design User should be involved in all stages of the design Prototyping (plus testing) is an integral part of the design Prototyping (plus testing) is an integral part of the design NUR - Prototyping (low fidelity) (43)

Methods for involving the user Explain designs Explain designs –describe what you’re going to do –get input at all design stages all designs subject to revisionall designs subject to revision Important to have visuals and/or demos Important to have visuals and/or demos –people react far differently with verbal explanations –this is why prototypes are critical

Na počítač trochu pomalé. Ale funguje to! MHz

47 Prototyping Technique Wizard of Oz - Person simulates and controls system from “behind the scenes” Wizard of Oz - Person simulates and controls system from “behind the scenes” –Use mock interface and interact with users –Good for simulating system that would be difficult to build Can be either computer-based or not

48 Wizard of Oz Method: Method: –Behavior should be algorithmic –Good for voice recognition systems Advantages: Advantages: –Allows designer to immerse oneself in situation –See how people respond, how specify tasks

Wizard of Oz A method of testing a system that does not exist A method of testing a system that does not exist –the listening typewriter, IBM 1984 Dear Henry What the user sees Speech Computer From Gould, Conti & Hovanvecz, Comm ACM 26(4) 1983.

Wizard of Oz A method of testing a system that does not exist A method of testing a system that does not exist –the listening typewriter, IBM 1984 What the user sees The wizard Speech Computer Dear Henry From Gould, Conti & Hovanvecz, Comm ACM 26(4) 1983.

Wizard of Oz Human ‘wizard’ simulates system response Human ‘wizard’ simulates system response –interprets user input according to an algorithm –controls computer to simulate appropriate output –uses real or mock interface –wizard sometimes visible, sometimes hidden “pay no attention to the man behind the curtain!”“pay no attention to the man behind the curtain!” good for: good for: –adding simulated and complex vertical functionality –testing futuristic ideas

52 Review of Prototyping Concepts (Summary) Low-fidelity Medium-fidelityHigh-fidelity Sketches, mock-ups Slide shows Simulations System prototypes Scenarios Storyboards Wizard of Oz

Mummy - construction site inspection Paper prototype Electronic prototype (HTML, PPT)

NUR - Prototyping (low fidelity) (54) Mummy: construction site inspection Inspector Construction site Mummy Server construction plans Remote expert Collaboration Adaptation

NUR - Prototyping (low fidelity) (55) Mummy: construction site inspection

Paper prototype

NUR - Prototyping (low fidelity) (57) Electronic prototype HTML prototype PPT prototype

NUR - Prototyping (low fidelity) (58) What must be done before User research (D1) Problem description, UI modelling – –HTA, STN

NUR - Prototyping (low fidelity) (59) MS PowerPoint Vector graphics Hyperlinks Embedded videos, images Animations

NUR - Prototyping (low fidelity) (60) Electronic program guide Visual design - Gimp Photographs Snapshost series + JavaScript

NUR - Prototyping (low fidelity) (61) EPG - prototype showcase... simple approach

NUR - Prototyping (low fidelity) (62)

NUR - Prototyping (low fidelity) (63)

NUR - Prototyping (low fidelity) (64)

NUR - Prototyping (low fidelity) (65)

NUR - Prototyping (low fidelity) (66)

Some sophisticated user interfaces

Representation, navigation …. The user should be able to know always what to do, where s/he is in a structure, should always understand to the data presentation etc…… The user should be able to know always what to do, where s/he is in a structure, should always understand to the data presentation etc…… NUR - Prototyping (low fidelity) (68)

Which representation is best? depends heavily on task depends heavily on task What is precise value? How does the performance now compared to its peak? How does performance change over time? Windows 95 System Monitor

Detailed navigation plus precision General navigation plus orientation Where am I? Windows NT Hover Game

Inxight Magnifind

PhotoFinder University of Maryland Human Computer Interaction Laboratory

Table Lens Inxight Table Lens

Table Lens Inxight Table Lens

Infinite Zoom Pad++:Graphical Sketchpad for Expt al Journal of Visual Languages and Computing 7, 1996

Fisheye Menus Bederson, B.B. (May 2000) University of Maryland

Saul’s focus (local user) Carl’s focus Andy’s focus Fisheye Text groupware Greenberg, Graphics Interface

Perspective Wall Leung and Apperly TOCHI’94 Mackinlay / Robertson / Card: Proc ACM CHI'91

Document Lens Robertson, Mackinlay ACM UIST 1993

Data Mountain Robertson / Czerwinski / Larson / Robbins / Thiel / van Dantzich Data Mountain: Using Spatial Memory for Document Management Proc ACM UIST’98

Task Gallery

Cone Trees Robertson / Mackinlay / Card Cone Trees: Animated 3D Visualizations of Hierarchical Information. Proc ACM CHI'91

Hyperbolic Lens Xerox Parc - Inxight

Thank you for your attention