1 / 22

User Centered Design and Prototyping

User Centered Design and Prototyping. Why user-centered design is important Prototyping and user centered design Prototyping methods.

medge-cruz
Download Presentation

User Centered 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. User Centered Design and Prototyping Why user-centered design is important Prototyping and user centered design Prototyping methods Slide deck by Saul Greenberg. Permission is granted to use this for non-commercial purposes as long as general credit to Saul Greenberg is clearly maintained. Warning: some material in this deck is used from other sources without permission. Credit to the original source is given if it is known.

  2. Sketching and Prototyping • Sketches / low / medium / high fidelity prototypes • as investment in design increases (red arrow), so does the formality of the criteria whereby concepts are reviewed or accepted • From design to evaluation • similarly, interface design(idea generation) progressesto usability testing (ideadebugging and refinement) From Design for the Wild, Bill Buxton (in press) with permission

  3. Brainstorm different representations Choose a representation Rough out interface style Sketches & low fidelity paper prototypes Task centered walkthrough and redesign Fine tune interface, screen design Heuristic evaluation and redesignUsability testing and redesign Medium fidelity prototypes High fidelity prototypes Working systems Limited field testing Alpha/Beta tests Sketching and Prototyping Early design Late design

  4. Computer Telephone Last Name: First Name: Phone: Place Call Help Sketches • drawing of the outward appearance of the intended system • crudity means people concentrate on high level concepts • but hard to envision a dialog’s progression

  5. Storyboarding • a series of key frames as sketches • originally from film; used to get the idea of a scene • snapshots of the interface at particular points in the interaction • users can evaluate quickly the direction the interface is heading Excerpts from Disney’s Robin Hood storyboard, www.animaart.com/Cellar/disneyart/90robin%20storyboard.jpg.html

  6. note how each scene in this storyboardis annotated From www.michaelborkowski.com/storyboards/images/big_bigguy1.gif

  7. Scan the stroller -> Initial screen Place the order -> Change the color ->

  8. Scan the shirt -> Alternatepath… Delete that item-> Touch previous item ->

  9. Storyboarding • Spotlight: an interactive foam core and paper sketch/storyboard Credit: Sue-Tze Tan, Dept Industrial Design, University of Washington From Design for the Wild, Bill Buxton (in press) with permission

  10. PICTIVE (Plastic Interface for Collaborative Technology Initiatives through Video Exploration) • Can pre-make paper interface components buttons menu alert box combo box tabs list box entries

  11. Horizontal prototype Scenario Full interface Vertical prototype Limiting prototype functionality • vertical prototypes • includes in-depth functionality for only a few selected features • common design ideas can be tested in depth • horizontal prototypes • the entire surface interface with no underlying functionality • a simulation; no real work can be performed • scenario • scripts of particular fixed uses of the system; no deviation allowed Nielsen, J. (1993) Usability Engineering, p93-101, Academic Press.

  12. Can use painting/drawing packages • draw each storyboard scene on computer • very thin horizontal prototype • does not capture the interaction “feel”

  13. Control panel for pump 2 Control panel for pump 2 DANGER! coolant flow 45 % coolant flow 0 % retardant 20% retardant 20% speed 100% speed 100% Shut Down Shut Down Scripted simulations • create storyboard with media tools • scene transition activated by simple user inputs • a simple vertical prototype • user given a very tight script/task to follow • appears to behave as a real system • script deviations blow the simulation

  14. Interface builders • Design tools for laying out common widgets • excellent for showing look and feel • a broader horizontal prototype • but constrained to widget library • vertical functionality added selectively • through programming

  15. Wizard of Oz • A method of testing a system that does not exist • the listening typewriter, IBM 1984 Dear Henry SpeechComputer What the user sees From Gould, Conti & Hovanvecz, Comm ACM 26(4) 1983.

  16. Dear Henry Wizard of Oz • A method of testing a system that does not exist • the listening typewriter, IBM 1984 Dear Henry SpeechComputer What the user sees The wizard From Gould, Conti & Hovanvecz, Comm ACM 26(4) 1983.

More Related