1 / 45

Prototyping the User Interface

Prototyping the User Interface. Sketches, storyboards, mock-ups, scenarios and tools.

laurel-salas
Download Presentation

Prototyping the User Interface

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 the User Interface Sketches, storyboards, mock-ups, scenarios and tools This material has been developed by Georgia Tech HCI faculty, and continues to evolve. Contributors include Gregory Abowd, Jim Foley, Diane Gromala, Elizabeth Mynatt, Jeff Pierce, Colin Potts, Chris Shaw, John Stasko, and Bruce Walker. Comments directed to foley@cc.gatech.edu are encouraged. Permission is granted to use with acknowledgement for non-profit purposes. Last revision: Feb. 2012.

  2. Agenda • Why prototype? • Prototyping dimensions • Prototyping terminology • Non-computer methods • Computer methods UI Design - Georgia Tech

  3. Why Prototype? UI Design - Georgia Tech

  4. Why Prototype? AKA Why not Straight to Code? • Leads to better designs • Iterative creativity • Explore design space • Facilitates communications • To all stakeholders • To see and to use is to comprehend • Facilitates (early) user input • Helps with (early) usability assessment • Can help assess implementation feasibility UI Design - Georgia Tech

  5. Prototype as a Design Artifact • To express early design ideas? • No software coding at this stage • Key notions • Make it fast!!! • Allow lots of flexibility for radically different designs • Make it cheap to fail early, fail often • Promote valuable feedback *** Facilitate iterative design and evaluation *** UI Design - Georgia Tech

  6. Dilemma • You can’t evaluate design until it’s built • But… • After building, changes to the design are difficult • Simulate the design, in low-cost manner UI Design - Georgia Tech

  7. Four Considerations for Prototyping 1. Representation • How is the design depicted or represented? • Can be just textual description or can be visuals and diagrams 2. Scope • Depth and breadth of prototype • How much of overall design is prototyped UI Design - Georgia Tech

  8. Four Considerations (contd) 3. Executability • Can the prototype be “run”? • If coding, there may be periods when it can’t 4. Maturation • What are the stages of the product as it comes along? • Revolutionary - Throw out old prototype • Evolutionary - Keep changing previous prototype UI Design - Georgia Tech

  9. Terminology • Early prototyping, Late prototyping • Low-fidelity prototype, High-fidelity prototype • Horizontal prototype • Very broad, does or shows much of the interface,but does this in a shallow manner • Example: all first and second-level menu commands • Vertical prototype • Fewer features or aspects of the interface simulated,but done in great detail • Possibly even execution of a few important actions • This is what you’re doing for project part 3 UI Design - Georgia Tech

  10. Rapid Prototyping Methods • Non-computer vs. computer-based Tools like Balsamiq bridge this gap Typically earlier in process Typically lower fidelity Typically later in process Typically higher fidelity UI Design - Georgia Tech

  11. Non-Computer Methods • Goal: Want to express design ideas and get quick & cheap opinions on system • Methods? UI Design - Georgia Tech

  12. Design Description • Can simply have a textual description of a system design • Obvious weakness – it’s so far from eventual system • Doesn’t do a good job representing visual aspects of interface • Not nearly enough • Sort of OK for ideation • Not OK as a way to get meaningful feedback UI Design - Georgia Tech

  13. Sketches, Mock-ups • Paper-based “drawings” of interfaces • Good for brainstorming • Focuses on high-level design notions • Not so good for illustrating flow and the details • Quick and cheap -> helpful feedback UI Design - Georgia Tech

  14. Physical Mock-Ups • Wooden blocks and labels - device control (Three versions of a hand-held controller) UI Design - Georgia Tech

  15. Physical Mock-Up • Styrofoam and Buttons Spring 2004 CS 4750 project “Golf Caddy” by: Chris Hamilton Linda Kang Luigi Montanez Ben Tomassetti UI Design - Georgia Tech

  16. Storyboarding • Pencil and paper simulation or walkthrough of system look and functionality • Quick & easy • Show key snap shots • Use sequence of screen shots • Use cases can be driver for sequencing UI Design - Georgia Tech

  17. Storyboarding Example • Sketches solves two problems with use of more fully-developed prototypes • User reluctance to suggest changes to what might look like a finished product • User focus too much on details (graphic design, etc) of UI rather than big picture UI Design - Georgia Tech

  18. Other Techniques • Tutorials & Manuals • Maybe write them out ahead of time to flesh out functionality • If it’s difficult to describe, it’s probably difficult to use! • Forces designer to be explicitabout decisions • So putting it on paperis valuable • Early involvement by tutorial & help text team UI Design - Georgia Tech

  19. Computer Methods • Simulate more of system functionality • Usually just some features or aspects • Can focus on more of details • Typically engaging • Caution: Users more reluctant to suggest changes once they see more realistic prototype • So make prototype intentionally not so realistic UI Design - Georgia Tech

  20. Prototyping Tools - Drawing Pgms. • Draw/Paint programs • Draw each screen, good for look IP Address OK Cancel Thin, horizontal prototype PhotoShop, Corel Draw,... UI Design - Georgia Tech

  21. 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 UI Design - Georgia Tech

  22. 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 UI Design - Georgia Tech

  23. Prototyping Tools - Scripting • Scripted simulations/slide shows • Put storyboard-like views down with (animated) transitions between them • Can give user very specific script to follow • Often called chauffeured prototyping • Examples: PowerPoint,BalsamIQ UI Design - Georgia Tech

  24. Powerpoint Transition Controls Mouse click actions: Next slide Previous slide First slide Last slide Last slide viewed End show Custom show URL File UI Design - Georgia Tech

  25. Beware! UI Design - Georgia Tech

  26. BalsamIQ UI Design - Georgia Tech

  27. Balsamiq balsamiq.com • Video • Balsamiq Mockups | Balsamiq.flv • Free seven-day download • Try it, you’ll like it  • Live demo…… UI Design - Georgia Tech

  28. Balsamiq Pros and Cons (Fall 2010) • Like • Easy to use • Create links from one screen to another – capability and method • Big widget library • Special iPhone options • Widget search/selection • Don’t like • Limited set of gadgets • Can’t easily drop in pictures • Selection of stacked items is hard • Late determination that target of link was deleted • Dead-end • can’t add code or data base access UI Design - Georgia Tech

  29. Pencil • http://pencil.evolus.vn/en-US/Home.aspx • Similar to Balsamiq • Open-source • Works with Firefoxor as an app • OSX • Windows • GNU/Linux UI Design - Georgia Tech

  30. Easy to Get Lost with PPt or Balsamiq – see Caretta Design http://www.carettasoftware.com/guidesignstudio/gui-design-studio-demo.html Also in Denim UI Design - Georgia Tech

  31. CogTool - Prototyping + KSLM! • Great Prototyper • Usual drag and drop design capability • Shows transition graph • Transitions can be caused by • Mouse actions • Keyboard entry (commands, data fields) • Speech!! • More robust than most (any) others • Plus ….. http://cogtool.hcii.cs.cmu.edu/ UI Design - Georgia Tech

  32. CogTool - KSLM • Automated KSLM, based on user demonstration of action sequences • Compare alternative designs • KSLM generally within 20% of real timing • CogTool KSLM better because does not make mistakes with Mental preparation placements – claims 10% • But – could practice a bit and have CogTool measure your time UI Design - Georgia Tech

  33. CogTool Overview Screen Shot UI Design - Georgia Tech

  34. CogTool Transition Graph UI Design - Georgia Tech

  35. Prototyping Tools - Interface Builders • Tools for laying out windows, controls, etc. of interface • Have build and test modes that are good for exhibiting look and feel • Generate code to which back-end functionality can be added through programming • Examples: Visual Basic, Visual C##, Denim, SketchFlow UI Design - Georgia Tech

  36. Visual Basic UI Controls Controlproperties Design area UI Design - Georgia Tech

  37. Denim – Web Site Prototyper • Download at http://dub.washington.edu:2007/denim/ • Very smooth interaction • Gestures, zoom in and out • Navigate created web site • http://dub.washington.edu:2007/denim/denim_daily_files/page149.html • Very ‘rough’ look but navigable • Video at • http://dub.washington.edu:2007/denim/media/denim_talk.rm UI Design - Georgia Tech

  38. Microsoft SketchFlow • http://www.microsoft.com/Expression/products/SketchFlow_Overview.aspx UI Design - Georgia Tech

  39. Audio Interface (Telephony) Builder Tools • SUEDE - flow-chart speech interface dialogue • Landay et al • For wizard-of-Oz studies • Could be used to drive real system • guir.berkeley.edu/projects/suede/index.shtml UI Design - Georgia Tech

  40. SUEDE VIDEO UI Design - Georgia Tech

  41. Eyepatch: Prototyping Camera-Based Interaction Video on next page UI Design - Georgia Tech

  42. Tool Surveys (via Google ) • There are a LOT!! • www.badlanguage.net/seven-website-mockup-tools • c2.com/cgi/wiki?GuiPrototypingTools • ** www.dexodesign.com/2008/11/07/review-16-user-interface-prototyping-tools/ • http://socialcompare.com/en/comparison/mockup-wireframing-design-tools UI Design - Georgia Tech

  43. Review of Prototyping Concepts Late Early Horizontal Medium-fidelity High-fidelity Low-fidelity Vertical Vertical Sketches, mock-ups Slide shows System prototypes Scenarios Storyboards Simulations Wizard of Oz UI Design - Georgia Tech

  44. How do These Tools Stack Up? • Ramp-up time to learn? • Regarding fidelity of the prototype? • Regarding depth and breadth of prototypes that can easily be supported? • Regarding executability of the prototype? • Regarding how easily the prototype can be transitioned to a deliverable product? UI Design - Georgia Tech

  45. The End UI Design - Georgia Tech

More Related