1 / 23

ISP 666 Week 6

ISP 666 Week 6. Prototyping. Design a Solution. From task to system From abstract to concrete. evaluation. UI Presentation. Architectural Model. Prototype. Task Models. System description. Conceptual Model. Design Artifacts. How do we express early design ideas?

aquila
Download Presentation

ISP 666 Week 6

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. ISP 666 Week 6 Prototyping

  2. Design a Solution • From task to system • From abstract to concrete evaluation UI Presentation ArchitecturalModel Prototype Task Models System description ConceptualModel

  3. Design Artifacts • How do we express early design ideas? • No coding at this stage • Key notions • Make it fast!!! • Allow lots of flexibility for radically different designs • Make it cheap • Promote valuable feedback *** Facilitate iterative design and evaluation ***

  4. 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, easily changeable manner

  5. Prototyping • A Prototype is a concrete but partial implementation of system design • A User Interface Prototype is a prototype built to explore usability issue

  6. Prototyping Dimensions • 1. Representation • How is the design depicted or represented? • Can be just textual description or can be visuals and diagrams • 2. Scope • Is it just the interface (mock-up) or does it include some computational component?

  7. Dimensions (contd) • 3. Executability • Can the prototype be “run”? • If coding, there will be periods when it can’t • 4. Maturation • What are the stages of the product as it comes along? • Revolutionary - Throw out old one • Evolutionary - Keep changing previous design

  8. Terminology • Early Prototyping • Late Prototyping • High fidelity prototype • Low fidelity prototype continuum Early prototyping Low fidelity Late prototyping High fidelity

  9. Terminology (2) • Horizontal prototype • Vertical prototype 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

  10. Low Fidelity Prototyping • Uses a medium which is unlike the final medium, e.g. paper, cardboard • Is quick, cheap and easily changed • Examples: sketches of screens, task sequences, etc ‘Post-it’ notes storyboards ‘Wizard-of-Oz’

  11. Sketch

  12. Storyboard • Describe a “script” of important events • leave out the details • concentrate on the important interactions • Depict “key frame” • file & animation

  13. A Storyboard • Black: page content • Red: page title • Green: annotations • Blue: links

  14. Wizard of Oz • Person simulates and controls system from “behind the scenes” • Long tradition in computer industry • prototype of a PC w/ a VAX behind the curtain • Much more important for hard to implement features • Speech & handwriting recognition

  15. Wizard of Oz (2) • Can work for paper based prototypes too! • Tips • Rehearse your actions • For a complicated UI, make a flowchart which is hidden from the user • Make list of legal words for a speech interface • Stay “in role” • You are a computer, and have no common sense, or ability to understand spoken English.

  16. Paper Sketches • Advantages • support brainstorming • do not require specification of details • designers feel comfortable sketching • Drawbacks • do not evolve easily • lack support for “design memory” • force manual translation to electronic format • do not allow end-user interaction Computerized tool support may be needed.

  17. DENIM: Designing Web Sites by Sketching • DENIM’s features are based on interviews with many designers. • Support early-phase information & navigation design • Support pen-based interaction • http://guir.berkeley.edu/projects/denim/ • Video

  18. Advantage of Low-fi Prototypes • Fast • prototype -> test -> iterate • Can simulate the interaction • sketches act as prototypes • designer “plays computer” • other design team members observe & record • Kindergarten implementation skills • allows non-programmers to participate in the design process • Good for Conceptual Design

  19. High-fidelity Prototyping • Uses materials that you would expect to be in the final product. • Prototype looks more like the final system than a low-fidelity version. • Good for physical design • Look and feel • Component Layout • Interaction • Danger that users think they have a full system

  20. Tools for High-fi prototyping • Web sites • HTML/XHTML + CSS, Web IDEs • drag-and-drop GUI toolkits for standard UI mockups • e.g. Visual designers in IDEs, Hypercard, Visual Basic • scripting languages & interface libraries for additional flexibility • e.g. tcl/tk, python • graphical languages for visualization and novel interface creation • Director, Flash • special purpose tools and environments • e.g. speech, haptics, Supercard/Revolution

  21. Hi-fi Prototypes are not good for Conceptual Design • Perceptions of the tester/reviewer? • formal representation indicates “finished” nature • comments on color, fonts, and alignment • Time? • encourage precision • specifying details takes more time • Creativity? • lose track of the big picture

  22. Assignment 2 • This assignment continues your mini-project started in assignment 1 • Produce a low-fidelity prototype to implement one use case of your mini-project • If you use DENIM, send me the .dnm file • If you use paper sketches, hand in all the papers • This assignment due in class on Mar. 29

  23. Food Volunteer?

More Related