isp 666 week 6 prototyping. design a solution from task to system from abstract to concrete task...
Post on 20-Dec-2015
221 views
TRANSCRIPT
ISP 666 Week 6
Prototyping
Design a Solution
• From task to system
• From abstract to concrete
Task Models
UI Presentationevaluation
ConceptualModel
System descriptionArchitectural
ModelPrototype
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 ***
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
Prototyping
• A Prototype is a concrete but partial implementation of system design
• A User Interface Prototype is a prototype built to explore usability issue
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?
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
Terminology
• Early Prototyping
• Late Prototyping
• High fidelity prototype
• Low fidelity prototype
Early prototypingLow fidelity
Late prototypingHigh fidelity
continuum
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
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’ notesstoryboards‘Wizard-of-Oz’
Sketch
Storyboard
• Describe a “script” of important events– leave out the details – concentrate on the important interactions
• Depict “key frame”– file & animation
• Black: page content
• Red: page title• Green:
annotations• Blue: links
A Storyboard
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
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.
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.
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
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
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
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
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
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
Food Volunteer?