Prototyping Sketches, storyboards, and other prototypes

Agenda Questions? Project Part 2 introduction Prototyping terms Scenarios and Sketches Storyboards Interface Prototypes

Project Part 2 Due Oct. 13 (right after fall break) Explore design space Multiple ideas, demonstrated with sketches, scenarios, mockups Poster session on Oct. 6

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

Design Artifacts Expressing design ideas: Make it fast!!! Allow lots of flexibility for radically different designs Make it cheap Promote valuable feedback Facilitate iterative design and evaluation

Dimensions of Prototypes Representation Scope Executability Maturation

Prototype representation How to represent the prototype? Mockup Storyboard Sketches Scenarios Screenshots Functional interface

Prototype scope How much to represent? Vertical - “Deep” prototyping Show much of the interface, but in a shallow manner Horizontal - “Broad” prototyping Show only portion of interface, but large amount of those portions

Prototype executability Non-functional prototypes Functional prototypes Partially functional prototypes

Prototype maturation Low fidelity vs. High fidelity Amount of polish should reflect maturity of the prototype Why?

Prototyping Issues Throw-away or incremental? Time and planning Non-functional features Clients & contracts Design inertia Understand reasons behind usability problems

Techniques Storyboards, Sketches Models Scenarios Paper prototypes Limited functionality Wizard of Oz High-level programming support

Scenarios Fictional stories with characters, products, events and environments. Typically narratives, but can be videos, simulations Jane likes to take walks every morning. This morning, as she places her hand on the door, she hears “75% chance of rain, better bring your umbrella.” Thankful for the notice, she grabs her umbrella and heads out for her morning walk.

Scenario Utility Engaging and interesting Another person’s shoes Present to different people Facilitates feedback and opinions Explore errors or mistakes Good for accompanying sketches, mockups, etc.

Storyboard What is it?

Uses / background Very similar in nature to: Comic art / cartoons Used in: Movie / multimedia design Product / software development

How is it done? Determine the story A very iterative process through a lot of initial drafts Includes a lot of brainstorming Sketch on pen + paper Generate more polished art for presentation Develop

Elements of storyboard Visual storytelling 5 visual elements Number of frames/panes Use of words Level of detail Inclusion of people Time passage

Challenges in storyboarding This is your assignment… what do you think? My thoughts: Determining what to draw is hard Drawing is difficult! How is it presented? (time, length, attention) Often does not show enough We’ll revisit these challenges..

Why do it? Quicker / easier than building the whole application If done right, can help gain quick invaluable user feedback Formative evaluation tool Summative evaluation tool

Formative evaluation tool How? If you’re the user, how would you feel about a service:

Formative evaluation tool If you’re the user, how do you think the system worked?

Summative evaluation tool How? If storyboard is interactive… Simulating system Less effort spent sketching than building Get feedback on context of use

Revisiting the challenges Here’s another challenge: Computing is moving off-the-desktop Drawing just the interfaces is sometimes not enough… What does this mean?

Drawing is hard… But it doesn’t have to be

Drawing is hard… It doesn’t have to be drawings..

Use taglines / captions Keep it short

4-6 frames/panes is ideal More is not always better. Why? May lose focus of story May lose reader’s attention What this means: Less work on the designer Must be able to succinctly tell story

Remember… Different presentation format means you can do more! Think about how long you have a captive audience Think about how much you want to tell Think about options for presenting sequences of drawing

Design Description Can simply have a textual description of a system design Obvious weakness is that it’s so far from eventual system Doesn’t do a good job representing visual aspects of interface Good for accompanying visual description in report (*hint hint*)

Sketches Generally for depicting physical aspects of system Taken from Builder Bobs team project Summer 04

Mockups 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

Example

Paper prototyping “Paper prototyping is a variation of usability testing where representative users perform realistic tasks by interacting with a paper version of the interface that is manipulated by a person ‘playing computer,’ who doesn’t explain how the interface is intended to work.” The "Computer" highlights the item the user has just selected. A member of the development team observes and takes notes. (Photo courtesy of Timo Jokela.) Taken from Paper Prototyping by Carolyn Snyder

Other Techniques Tutorials & Manuals Maybe write them out ahead of time to flesh out functionality If it’s difficult to describe, it’s probably difficult to use! Forces designer to be explicit about decisions Putting it on paper is valuable

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

Prototyping Tools Draw/Paint programs Draw each screen, good for look Thin, horizontal prototypePhotoShop, Corel Draw,... IP Address Cancel OK

Prototyping Tools 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, Macromedia Director, HTML

Apple Hypercard Once a very popular prototyping tool for simulating UI Allows control of simple card transitions More complex behaviors on mouseUp play “boing” wait for 3 seconds visual effect wipe left very fast to black click at 150,100 type “goodbye” end mouseUp

Macromedia Director Combines various media with script written in Lingo language Concerned with place and time Objects positioned in space on “stage” Objects positioned in time on “score” Easy to transition between screens Can export as executable or as Web Shockwave file

Prototyping Tools Interface Builders Tools for laying out windows, controls, etc. of interface Have build and test modes that are good for exhibiting look and feel Generate code to which back-end functionality can be added through programming Examples: Visual Basic, Delphi, UIMX,...

Visual Basic UI Controls Design area Control properties

Prototyping Tools Easy to develop & modify screens Supports type of interface you are developing Supports variety I/O devices Easy to link screens and modify links Allows calling external procedures & program Allows importing text, graphics, other media Easy to learn and use Good support from vendor

Combination SILK (Sketching Interfaces Like Krazy) / DENIM Sketch-based GUI builder video.org/video/chi/chi96_07_m1.mpg by James Landay’s and his former group at UC Berkeley

Prototyping Technique 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

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

Review Low-fidelity Medium-fidelityHigh-fidelity Sketches, mock-ups Slide shows Simulations System prototypes Scenarios Storyboards

Assignment 6 Create a storyboard for your project Bring to class on paper if you do not have access to a scanner