1 / 14

Design and Prototyping

Design and Prototyping. CS 5115 Fall 2013 September 18. Agenda for today. Project check-in Due tomorrow De sign and Prototyping. Paper (Low Fidelity) Prototypes. Sketches of interface and task completion paper, post-its, or screen drawings. Examples and References.

keiran
Download Presentation

Design and 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. Design and Prototyping CS 5115 Fall 2013 September 18

  2. Agenda for today • Project check-in • Due tomorrow • Design and Prototyping

  3. Paper (Low Fidelity) Prototypes • Sketches of interface and task completion • paper, post-its, or screen drawings

  4. Examples and References • http://www.nngroup.com/reports/prototyping/video_stills.html • http://www.paperprototyping.com/references.html • http://www.alistapart.com/articles/paperprototyping • http://webdesignledger.com/inspiration/18-great-examples-of-sketched-ui-wireframes-and-mockups • http://speckyboy.com/2010/06/24/10-effective-video-examples-of-paper-prototyping/

  5. Let’s watch some videos • http://speckyboy.com/2010/06/24/10-effective-video-examples-of-paper-prototyping/ (1st video) • http://www.youtube.com/watch?v=9wQkLthhHKA&list=TLUW7xIcYFqfQ • http://www.youtube.com/watch?v=GrV2SZuRPv0&list=TLUW7xIcYFqfQ • http://www.youtube.com/watch?v=V8LNDqMIapY&list=TLL0ibcpJyZas • http://www.youtube.com/watch?v=_g4GGtJ8NCY

  6. LoFi pluses • Easy to produce • Rapid iteration / generate then test • To get a good idea, get lots of ideas • Never look for the “best way” – look for hundreds of ways • Users focus on the important stuff • Bugs don’t halt testing • Status is clear – proper expectations • Designers don’t get emotionally invested

  7. LoFi limits • Hard to capture timed, dynamic interaction

  8. What to prototype? • Screen layouts and information display • Work flow, task design • Technical issues • Difficult, controversial, critical areas

  9. Resources • Paper widgets you can download and print http://www.userfocus.co.uk/resources/prototype.html • Electronic tools • Balsamic: http://www.balsamiq.com/ • Pencil: http://pencil.evolus.vn/en-US/Home.aspx • Stencils available for Android 4.0 http://evoluspencil.googlecode.com/files/Android.GUI_v2.zip

  10. Prototyping Exercise

  11. Prototyping Exercise, 1 • Individually: sketch a campus kiosk system designed to help people find their way around the University of Minnesota campus. The kiosks will be located at a number of positions around campus.

  12. Prototyping Exercise, 2 • In groups of 3-4 • Review the individual prototypes • Pick a starting point for a second (revised) prototype • Draw a second prototype as a group

  13. Prototyping Exercise, 3 • Still in your group: select a task... • Find a building: get directions from current location to that building • Find a class: find the time and location of a class (for example, “User Interface Design” or “CS 5115”) • Find a person in the campus directory, get directions to their office And did you think about who your users were? Did you have an implicit persona in mind? • Evaluate how well your prototype supports that task • Redesign your prototype as necessary • (If necessary) redraw your prototype for presentation to the class

  14. Discussion • How much difference was there between the individual designs? • Did you think some were better than others? Why? • How much did the task focus help? Did considering a task make you change your design significantly? • How did you think about users and usage?

More Related