Prototyping Sketches storyboards and other prototypes Agenda Questions

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 l But… ¢ After building, changes to the design are difficult ¢ Simulate the design, in low-cost manner

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

Dimensions of Prototypes Representation ¢ Scope ¢ Executability ¢ Maturation ¢

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

Prototype scope ¢ How much to represent? l Vertical - “Deep” prototyping • Show much of the interface, but in a shallow manner l 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 ¢ l ¢ 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: l ¢ Comic art / cartoons Used in: l Movie / multimedia design l Product / software development

How is it done? ¢ Determine the story l l 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 l Use of words l Level of detail l Inclusion of people l Time passage l

Challenges in storyboarding ¢ This is your assignment… what do you think? ¢ My thoughts: l l ¢ 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 l Summative evaluation tool l

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 l Less effort spent sketching than building l ¢ Get feedback on context of use

Revisiting the challenges ¢ Here’s another challenge: Computing is moving off-the-desktop l Drawing just the interfaces is sometimes not enough… l ¢ 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

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

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 l Doesn’t do a good job representing visual aspects of interface l l Good for accompanying visual description in report (*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. ” Taken from Paper Prototyping by Carolyn Snyder http: //www. paperprototyping. com/ 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. )

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

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

Prototyping Tools ¢ Draw/Paint programs l Draw each screen, good for look IP Address OK Thin, horizontal prototype Cancel Photo. Shop, Corel Draw, . . .

Prototyping Tools ¢ Scripted simulations/slide shows Put storyboard-like views down with (animated) transitions between them l Can give user very specific script to follow l Often called chauffeured prototyping l l Examples: Power. Point, 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 mouse. Up play “boing” wait for 3 seconds visual effect wipe left very fast to black click at 150, 100 type “goodbye” end mouse. Up

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

Prototyping Tools ¢ Interface Builders l 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 l Examples: Visual Basic, Delphi, UIMX, . . .

Visual Basic UI Controls Design area Control properties

Prototyping Tools l l l l 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 ¢ http: //www. openvideo. org/video/chi 96_07_m 1. 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 l Good for simulating system that would be difficult to build l Can be either computer-based or not

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

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

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