1 / 35

HCI

HCI. 3. Rapid Prototyping 2013. Fall. Paper Prototypes & Mock-up. Use Stage-Appropriate Tools. Outline. Storyboarding Creating paper prototypes Testing paper prototypes Digital mock-ups. Storyboarding. Isn’t about “Pretty pictures” It’s about communicating ideas (visually)

patch
Download Presentation

HCI

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. HCI 3. Rapid Prototyping 2013. Fall

  2. Paper Prototypes & Mock-up Use Stage-Appropriate Tools

  3. Outline Storyboarding Creating paper prototypes Testing paper prototypes Digital mock-ups

  4. Storyboarding Isn’t about “Pretty pictures” It’s about communicating ideas (visually) * Star people

  5. Storyboarding

  6. Storyboarding

  7. Storyboards should convey Setting People involved Environment Task being accomplished

  8. Storyboards should convey Sequence What steps are involved? What leads someone to use the app? What task is being illustrated?

  9. Storyboards should convey Satisfaction What motivates people to use this system? What does it enable people to accomplish? What need does the system fill?

  10. Benefits of Storyboarding Holistic focus: helps emphasize how an interface accomplishes a task Avoids commitment to a particular user interface (no button yet) Helps get all the stakeholders on the same page in terms of the goal Better in team work (have time limits – 10min)

  11. Paper Prototyping

  12. Paper Prototyping Tips & Tricks Keep all your materials in one place Work quickly & make reusable components (buttons, etc) If difficult to simulate, verbally describe the interaction Backgrounds (11” x 14” poster board) can be useful Don’t be afraid to mix & match h/w and s/w.

  13. Get Creative with Materials Widgets : Paper, Cardboard, Transparencies Connectors : Tape, Glue, Rubber cement Drawing : Pens, Pencils, Markers … and more

  14. Digital Mock-ups

  15. Digital Mock-ups Wizard-of-Oz Prototyping Simulates machine behavior with human operators Make an interactive application without (much) code Get feedback from users people

  16. The Wizard of Oz Technique

  17. The Wizard of Oz Technique

  18. The Wizard of Oz Technique

  19. The Wizard of Oz Technique

  20. The Wizard of Oz Technique

  21. The Wizard of Oz Technique A lot of critique feedback from the users when low quality/fidelity Requires some kind of interface Very useful to mimic some kind of AI in a cheap & quick way Help the design understand the logic of his application

  22. Video Prototyping Benefits Cheap & fast Great communication tools Can serve as a ‘spec’ for developers Ties interface designs to tasks

  23. What should the video show? Like a storyboard, the whole task including motivation & success Draw on tasks you’ve observed Illustrate important tasks your system enables Can help scope a minimum-viable-product Change what design teams argue about (in a good way)

  24. What are the steps? Like anything, start with an outline (or your storyboards) Fine to extemporize Equipment (camera, people, location ..) In general, focus on message more than production values

  25. Considerations Can use audio or silent movie with title cards (audio can be finicky) Interface can be paper, mock-ups, code, or invisible (just showing the task) Can show both success & failure (of your interfaces & others) Edit as little as possible because editing is hugely time-consuming (In-camera/pause editing is most efficient)

  26. Creating & Comparing Alternatives Quantity vs. Quality (better) Parallel prototyping yields to more diverse designs In early stages of the design process, you should rather use parallel prototyping that serial prototyping

  27. Creating & Comparing Alternatives Quantity vs. Quality (better)

  28. Creating & Comparing Alternatives Quantity vs. Quality (better)

  29. Creating & Comparing Alternatives Quantity vs. Quality (better)

  30. Creating & Comparing Alternatives

  31. Creating & Comparing Alternatives

  32. Creating & Comparing Alternatives

  33. Creating & Comparing Alternatives

  34. Creating & Comparing Alternatives

  35. Creating & Comparing Alternatives

More Related