Prototyping. Oct 3, 2016

Transcription

1 Prototyping Oct 3, 2016

2 Announcements A1 marks available A2 due Wednesday

3 Questions?

4 What is a prototype? In interaction design a prototype can be (among other things): a series of screen sketches a storyboard, i.e. a cartoon-like series of scenes a Powerpoint slide show, e.g., simulation a video simulating the use of a system a lump of wood (e.g. PalmPilot) a cardboard mock-up a piece of software with limited functionality written in the target language or in another language

5 Why Prototype? Prototypes are useful for numerous purposes including: Promoting reflection (Schon 1983) Clarifying requirements Exploring alternatives Initial user testing

6 What to Prototype Screen layouts and information display: placement of different widgets, types of widgets, etc e.g. should edit fields come after/before control buttons Work flow, task design: the sequence of steps required to achieve the task e.g. flow from one screen to another, changes on the screen Difficult, controversial, critical areas: provide alternative solutions to be assessed e.g. business critical reports with specific alignment of fields Technical issues: E.g., will the graphics rendered be fast enough?

7 Low-Fidelity Prototyping How: Paper-based sketches Physical mock-ups using paper, cardboard

8 Paper Prototyping Two common types: Index cards Storyboards

9 Storyboards

10 Low-Fidelity Prototyping Some issues Sometimes difficult to fake/simulate behaviour Client (i.e., the person paying you) might be confused by the lack of programming Can give a mistaken impression of how hard stuff is User/client feedback might involve requests for things that are extremely difficult to implement (e.g., speech recognition)

11 Higher-Fidelity Prototyping Prototyping with a computer Simulate some but not all features of the interface Purpose Provides sophisticated but limited scenario for the user to try Can test more subtle design issues

12 Limiting Functionality Vertical prototypes includes in-depth functionality for only a few selected features common design ideas can be tested in depth Horizontal prototypes the entire surface interface with no underlying functionality a simulation; no real work can be performed Scenario scripts of particular, fixed uses of the system; no deviation allowed (i.e., system won t work with deviations)

13 Limiting Functionality Scenario Horizontal prototype Full System Vertical prototype

14 Prototyping with mock-up tools PowerPoint, Photoshop, etc. can also be used to simulate very specific interaction scenarios Limits flexibility, but more concrete -> higher end of low-fidelity prototype nda/interactive/sampleprototype.ppt

15 Interface Builders (or HTML + CSS with no interactivity) tools for letting a designer lay out the common widgets excellent for showing look and feel a broader horizontal prototype but constrained to widget library vertical functionality added selectively through programming

16 vertical high-fi prototypes (a common focus for HCI research!!!)

17 Prototyping functionality: Wizard-of-Oz Common problem: it s difficult to prototype some piece of functionality Need: test whether it is actually good before building it!!! Solution: fake it! Make the interaction as authentic as possible Key: user has no idea that the interaction is being faked

18 Wizard of Oz A method of testing a system that does not exist the listening typewriter, IBM 1983 Dear Henry What the user sees Speech Computer

19 Wizard of Oz A method of testing a system that does not exist the listening typewriter, IBM 1984 Dear Henry Dear Henry Speech Computer What the user sees The wizard

20 Wizard of Oz: the point Up until the point the wizard is discovered, the thoughts, feelings, and actions of Dorothy and the others were all genuine They were genuinely experiencing what it would be like to talk to a powerful and terrible wizard

21 Wizard of Oz: anti-gravity bar -gkqd

22 Wizard-of-Oz: some issues not always as easy as it seems need some means of controlling system may need ways to perform hard computations quickly must be realistic If simulating error-prone technology (e.g., speech recognition), must include such errors in testing Fall 2016 COMP 3020

23 High-Fidelity Prototyping: Issues Feedback often minimal and detailoriented Users reluctant to challenge designer Little reflection on overall interaction or information flow Client/management may think its real!

24 Summary: Hi-Fi vs. Lo-Fi Advantages Disadvantages Lo-Fi» ***fast***, explore» cheap» easy kindergarten skills!» can simulate actual product» great way to communicate with / get feedback from stakeholders» evaluate multiple ideas» encourage criticism» slow response time» can t get feedback about aesthetics» poor error checking» user may question design quality» limited use for usability, testing Hi-Fi» better sense of finished product» interactive» can judge aesthetic appeal» more realistic experience» can evaluate the experience better» probably more convincing for stakeholders» users may focus on unnecessary details» takes a lot of time to make» users may lose track of big picture» not effective for developing requirements (why?)

25 Summary: Prototypes Vertical prototypes includes in-depth functionality for only a few selected features common design ideas can be tested in depth Horizontal prototypes the entire surface interface with no underlying functionality a simulation; no real work can be performed Fall 2016 COMP 3020

26 Which Prototyping Method is Best? Choose the method that works best for what you are trying to achieve (pragmatics). user flow» storyboard screen layouts/page flow» paper prototypes overall experience» video prototype look and feel» PowerPoint functionality» software etc. Alternately, maybe you are at different stages in the design. Early on, use techniques that are cheap and quick; later on, use techniques that give a stronger sense of finished idea.

27 Lifetime of Prototypes Question: how do we integrate prototyping into the overall development cycle? Three methods for managing this integration: 1. evolutionary 2. modular (incremental) 3. throw-away

28 Evolutionary Prototypes iteratively change the prototype to incorporate changes eventually, the reworked prototype becomes the final system test prototype design prototype system implement prototype

29 Modular (Incremental) Prototyping Design component Build the system as separate modules/components Design component Test component Implement component Design component Each module is designed, prototyped and build separately before being combed into a final system Test component Implement component system Test component Implement component

30 Throw-Away Prototyping Design prototype Prototype is used to get rapid feedback (i.e. to learn lessons) Test prototype Implement prototype Test prototype Design prototype Implement prototype Prototype is built, tested, and deployed (or discarded) Test prototype Design prototype Implement prototype

31 Summary: Prototyping Prototyping is a very useful way to help reduce the number of designs by: trying them, getting input on them, exploring if they would actually work, etc. We learned about a range of high and low-fidelity prototyping methods, for both horizontal and vertical prototypes Prototyping can be integrated into the product design cycle in various ways, including as evolutionary, modular, and throwaway prototypes