1 / 21

Prototyping

Learn about prototyping key notions to express your design ideas quickly with flexibility to change. Explore early and late prototyping methods, from low-fidelity sketches to high-fidelity simulations, and tools like storyboards and scenarios. Discover computer-based and non-computer methods, including Wizard of Oz simulation for complex systems. Get insights into rapid prototyping methods for soliciting feedback and refining designs efficiently.

chavezc
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

  2. Design Document • How express your design ideas. • Key notions • Cheap, Fast • Flexibility to change • Promotes feedback

  3. The Problem Can’t evaluate until built? After building, changes to the design are difficult SOLUTION: Simulate the design, in low-cost manner

  4. Terminology Early prototyping Late prototyping Low-fidelity prototype High-fidelity prototype

  5. Prototyping Late Early Medium-fidelity High-fidelity Low-fidelity Sketches, mock-ups Slide shows System prototypes Scenarios Simulations Storyboards

  6. Rapid Prototyping Methods Typically earlier in process Typically later in process Non-computer vs. computer-based

  7. Non-Computer Methods Goal: Want to express design ideas and get quick & cheap opinions on system Methods?.......our Design Plan Document

  8. Sketches, Mock-ups….our Design Sheets “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

  9. Another idea…..Storyboarding • Pencil and paper simulation or walkthrough of system look and functionality • Use sequence of diagrams/drawings • Show key snap shots • Quick & easy

  10. Example

  11. Another idea…Scenarios • Hypothetical or fictional situations of use • Typically involving some person, event, situation and environment • Provide context of operation • Often in narrative form, but can also be sketches or even videos • Engaging and interesting • Allows designer to look at problem from another person’s point of view • Facilitates feedback and opinions • Can be very futuristic and creative

  12. Other Techniques Tutorials & Manuals

  13. Computer Methods • Simulate more (not necessarily all) of system functionality • Focus on interactivity, more seamless flow • More details of design/UI given • More engaging. • Danger: Users are more reluctant to suggest changes once they see more realistic prototype

  14. More Terminology Very broad, does or shows much of the interface,but does this in a shallow manner Fewer features or aspects of the interface simulated,but done in great detail Horizontal prototype Vertical prototype

  15. Prototyping Tools – Draw/Paint IP Address OK Cancel Thin, horizontal prototype PhotoShop, …. • Draw each screen, good for look

  16. Tool – slide show • Put storyboard-like views down with (animated) transitions between them • Can give user very specific script to follow • Often called chauffeured prototyping • Examples: PowerPoint, Macromedia Director, HTML, …

  17. Powerpoint Transition Controls Mouse click actions: Next slide Previous slide First slide Last slide Last slide viewed End show Custom show URL File

  18. Multimedia Tool – e.g. Macromedia Director • Media + interactions + script/Lingo language • Place and Time concepts • 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

  19. Prototyping Technique Can be either computer-based or not • 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

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

More Related