User Centered Design Process. Prototyping II. What is a prototype? Prototyping phases Oct 11, 2017

Transcription

1 User Centered Design Process Prototyping II Oct 11, 2017 Produce something tangible Identify challenges Uncover subtleties 2 What is a prototype? A prototype is defined less by form, and more by its function: A prototype expresses and realizes a design concept for the purposes of trying it out and for communication. Prototype qualities Fast Disposable Focused Prototype roles Test Get feedback Communicate Persuade 3 Prototyping phases brainstorm different representations choose a representation sketch out interface style task centered walkthrough fine tune interface, screen design heuristic evaluation and redesign Fall 2017 usability testing and redesign limited field testing alpha/beta tests Early design Late design COMP 3020 low fidelity prototypes medium-fidelity prototypes high-fidelity prototypes / restricted systems working systems less cost more cost 4 1

2 Low-Fidelity Prototyping Fidelity refers to level of detail High fidelity implies finished or detailed Low fidelity implies incomplete or lacking some detail Why low-fidelity? Cheaper, faster to create Can explore multiple alternative designs without getting stuck on technical details Users often more inclined to comment on designs that appear less finished Low-Fidelity Prototyping How: Paper-based sketches Paper prototypes Physical mock-ups using paper, cardboard 5 6 Why sketching? Forces you to visualize how things come together Communicates ideas to others (and oneself) to inspire new designs Drawing ability irrelevant Disposable If you can t afford to throw it away, it s not a sketch Not as attached as a fully implemented prototype The way it s rendered (e.g., style, form, signals) makes it distinctive that it is a sketch Promotes constructive criticism 7 8 2

3 Freedom Sense of openness and freedom Abstracts away details Opposite of engineering drawing, which is tight and precise Storyboards comic book approach, a series of keyframes as sketches illustrates a sequence originally from film; used to get the idea of a scene snapshots of the interface at particular key points in the interaction stakeholders can evaluate quickly the direction the interface is heading use with your personas (i.e., user profiles) and tasks vs Storyboards Properties of a Good Storyboard A good storyboard conveys: Setting: People involved Environment Task being accomplished Sequence: What steps are involved What leads to someone using the system Satisfaction: What s the user s motivation What s the end result What need are you satisfying? (from ~1:00 4:40)

4 Paper Prototyping Hand-drawn interfaces Can be interactive Elements can added, modified, etc based on user actions Purpose Instantiate/explore/refine specific ideas and interactions Making a paper prototype interactive Use sticky notes to make widgets and screens on the fly Use transparencies for overlays, backgrounds, etc. How to draw on transparencies? White board markers! 13 Fall 2017 COMP Paper Prototypes Examples:

5 Tangible Prototypes 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., gesture recognition) Additional video for at home Prototyping and user feedback in a tight loop 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

6 Limiting Functionality 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) Full System Scenario Vertical prototype Horizontal prototype Prototyping with mock-up tools PowerPoint, photoshop, etc. can also be used to simulate very specific interaction scenarios Three are also specific mock-up tools like Balsamic Limits flexibility, but more concrete -> higher end of low-fidelity prototype Interface Builders (or HTML + CSS with no interactivity) tools for letting a designer lay out the common widgets Can conveying a specific look and feel a broader horizontal prototype vertical functionality added selectively through programming but constrained to widget library interactive/sampleprototype.ppt