1 / 30

Prototyping

Prototyping. Sketches, storyboards, and other prototypes. Agenda. Questions? Prototyping terms Scenarios and Sketches Storyboards Interface Prototypes Exercise Next time: Design of Everyday Things. Dilemma. You can’t evaluate a design until it’s built But…

jerome-grimes
Download Presentation

Prototyping

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Prototyping Sketches, storyboards, and other prototypes

  2. Agenda • Questions? • Prototyping terms • Scenarios and Sketches • Storyboards • Interface Prototypes • Exercise • Next time: Design of Everyday Things

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

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

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

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

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

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

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

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

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

  12. More detailed scenario • Jane’s class just got out and she wants to know whether to take the shuttle or walk back to her dorm. She opens her cell phone and starts the web browser. She opens her bookmarks and clicks on the bus location page. The page displays a list of the shuttle lines on campus. She selects the Nugget. The next page is a list of bus stops. She scrolls down and selects Woodward Hall. The page then displays that the next shuttle should arrive in 2 minutes. Jane leaves the building to head down to the bus stop to wait for the shuttle.

  13. Use taglines / captions • Keep it short: show as much as necessary but not more

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

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

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

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

  18. Mockups / Wireframes • Good for brainstorming • Focuses people on high-level design notions • Not so good for illustrating flow and the details

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

  20. IP Address OK Cancel Draw/Paint programs Draw each screen, good for look PhotoShop, Paint,... Thin, horizontal prototype

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

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

  23. Visual Basic UI Controls Controlproperties Design area

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

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

  26. Prototyping Technique • Wizard of Oz - Person simulates and controls system from “behind the scenes” • Use mock interface andinteract with users • Good for simulatingsystem that would be difficult to build Can be either computer-based or not

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

  28. Review Late Early Medium-fidelity High-fidelity Low-fidelity Sketches, mock-ups Slide shows System prototypes Scenarios Simulations Storyboards For more: take ITIS 3050 (number will soon change) Rapid Prototyping and Interface Building Offered next fall

  29. Assignment: Storyboard • Due next Tuesday • Create a storyboard for your project • This CAN be about a potential design • 4 to 6 panels is sufficient • Bring to class on paper if you do not have access to a scanner

  30. Crazy design time Remember all the ways of doing interaction? Voice, pen, gesture, and even ways we didn’t talk about Come up with a design idea for system at bus or train stops. Should allow you to do useful or entertaining things – perhaps buy tickets, check on schedules, get maps, tell you about the area, etc... Be a little crazy – think of the user, but don’t just do the plain and expected kiosk. Express your design ideas with low fidelity prototypes. Sketch. Storyboard. Scenario.

More Related