1. Prototyping Sketches, storyboards, and other prototypes

2. Agenda  Questions?  Part 1 feedback  Project Part 2 introduction  Prototyping terms  Scenarios and Sketches  Storyboards  Interface Prototypes

3. Part 1 feedback  Functional vs. Non-functional requirements  Be as complete and detailed as you can  Don’t commit to any solution just yet.

4. Project Part 2  Poster session on Oct. 16 Explore design space Multiple ideas, demonstrated with sketches, scenarios, mockups  Part 2 on Nov. 8 Writeup, including summary of poster designs Full description of one design Evaluation plan based on usability criteria Prototype of one design

5. What to do now  Read feedback from part 1  Start brainstorming!! Lots of ideas, then narrow down to 3 or 4  Explore design space Vary what you can – hardware, forms of input, forms of output, features, requirement priorities  Be off the wall, crazy This will lead to less crazy but original ideas

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

7. 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

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

9. 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

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

11. 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*)

12. 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.

13. 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.

14. Storyboard  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

15. Use taglines / captions  Keep it short: 4-6 frames ideal

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

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

18. 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

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

20. Mockups  Good for brainstorming  Focuses people on high-level design notions  Not so good for illustrating flow and the details

21. 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 http://www.paperprototyping.com/

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

23. Simulations  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

24. Interface Builders  Tools for laying out windows, controls, etc. of interface Easy to develop & modify screens Supports type of interface you are developing Good look and feel Can add back-end functionality  Examples: Visual Basic,.NET, many apps for various languages

25. Visual Basic UI Controls Design area Control properties

26. 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

28. Specialized  SILK (Sketching Interfaces Like Krazy) / DENIM Sketch-based GUI builder http://dub.washington.edu/denim/ http://www.open- video.org/details.php?videoid=5018  by James Landay’s and his former group at UC Berkeley

29. 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

30. 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

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

32. Assignment: Storyboard  Create a storyboard for your project  Bring to class on paper if you do not have access to a scanner

33. Class Activity  Turn the following scenario into a storyboard: Jane is running late for class. She had to spend 5 extra minutes driving around looking for parking, and its now going to take her 10 minutes to walk to her class. As Jane is leaving the parking lot, she spots a bus stop and realizes that the bus route passes her class. This might save her time! She takes out her cellphone, opens an internet browser on her phone, and finds the shortcut to the bus location page. The page lists each of the bus stops, and when the bus should reach it. She looks at the name of the stop, and finds it on the list. She realizes the bus will arrive in less than 1 minute! Oh good, now she won’t have to walk and maybe she will be on time afterall.