fall 2002cs/psy 67501 rapid prototyping sketches, storyboards, mock-ups and scenarios agenda...
TRANSCRIPT
![Page 1: Fall 2002CS/PSY 67501 Rapid Prototyping Sketches, Storyboards, Mock-Ups and Scenarios Agenda Dimensions and terminology Non-computer methods Computer methods](https://reader036.vdocuments.mx/reader036/viewer/2022070409/56649e905503460f94b9465a/html5/thumbnails/1.jpg)
Fall 2002 CS/PSY 6750 1
Rapid PrototypingSketches, Storyboards, Mock-Ups and Scenarios
Agenda• Dimensions and terminology• Non-computer methods• Computer methods• Poster session preview• Exam recap
![Page 2: Fall 2002CS/PSY 67501 Rapid Prototyping Sketches, Storyboards, Mock-Ups and Scenarios Agenda Dimensions and terminology Non-computer methods Computer methods](https://reader036.vdocuments.mx/reader036/viewer/2022070409/56649e905503460f94b9465a/html5/thumbnails/2.jpg)
Fall 2002 CS/PSY 6750 2
Your Project Group
![Page 3: Fall 2002CS/PSY 67501 Rapid Prototyping Sketches, Storyboards, Mock-Ups and Scenarios Agenda Dimensions and terminology Non-computer methods Computer methods](https://reader036.vdocuments.mx/reader036/viewer/2022070409/56649e905503460f94b9465a/html5/thumbnails/3.jpg)
Fall 2002 CS/PSY 6750 3
Design Artifacts
• How do we 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 Promote valuable feedback
*** Facilitate iterative design and evaluation ***
![Page 4: Fall 2002CS/PSY 67501 Rapid Prototyping Sketches, Storyboards, Mock-Ups and Scenarios Agenda Dimensions and terminology Non-computer methods Computer methods](https://reader036.vdocuments.mx/reader036/viewer/2022070409/56649e905503460f94b9465a/html5/thumbnails/4.jpg)
Fall 2002 CS/PSY 6750 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 manner
![Page 5: Fall 2002CS/PSY 67501 Rapid Prototyping Sketches, Storyboards, Mock-Ups and Scenarios Agenda Dimensions and terminology Non-computer methods Computer methods](https://reader036.vdocuments.mx/reader036/viewer/2022070409/56649e905503460f94b9465a/html5/thumbnails/5.jpg)
Fall 2002 CS/PSY 6750 5
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 is just the interface (mock-up) or does it
include some computational component?
![Page 6: Fall 2002CS/PSY 67501 Rapid Prototyping Sketches, Storyboards, Mock-Ups and Scenarios Agenda Dimensions and terminology Non-computer methods Computer methods](https://reader036.vdocuments.mx/reader036/viewer/2022070409/56649e905503460f94b9465a/html5/thumbnails/6.jpg)
Fall 2002 CS/PSY 6750 6
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 oneEvolutionary - Keep changing previous design
![Page 7: Fall 2002CS/PSY 67501 Rapid Prototyping Sketches, Storyboards, Mock-Ups and Scenarios Agenda Dimensions and terminology Non-computer methods Computer methods](https://reader036.vdocuments.mx/reader036/viewer/2022070409/56649e905503460f94b9465a/html5/thumbnails/7.jpg)
Fall 2002 CS/PSY 6750 7
Terminology
• Early prototyping
• Late prototyping
• Low-fidelity prototype
• High-fidelity prototype
![Page 8: Fall 2002CS/PSY 67501 Rapid Prototyping Sketches, Storyboards, Mock-Ups and Scenarios Agenda Dimensions and terminology Non-computer methods Computer methods](https://reader036.vdocuments.mx/reader036/viewer/2022070409/56649e905503460f94b9465a/html5/thumbnails/8.jpg)
Fall 2002 CS/PSY 6750 8
Rapid Prototyping Methods
• Non-computer vs. computer-based
Typically earlier in processTypically later in process
![Page 9: Fall 2002CS/PSY 67501 Rapid Prototyping Sketches, Storyboards, Mock-Ups and Scenarios Agenda Dimensions and terminology Non-computer methods Computer methods](https://reader036.vdocuments.mx/reader036/viewer/2022070409/56649e905503460f94b9465a/html5/thumbnails/9.jpg)
Fall 2002 CS/PSY 6750 9
Non-Computer Methods
• Goal: Want to express design ideas and get quick & cheap opinions on system
• Methods?
![Page 10: Fall 2002CS/PSY 67501 Rapid Prototyping Sketches, Storyboards, Mock-Ups and Scenarios Agenda Dimensions and terminology Non-computer methods Computer methods](https://reader036.vdocuments.mx/reader036/viewer/2022070409/56649e905503460f94b9465a/html5/thumbnails/10.jpg)
Fall 2002 CS/PSY 6750 10
Design Description
• Can simply have a textual description of a system design Obvious weakness is that it’s so far from
eventual system Doesn’t do a good job representing
visual aspects of interface
![Page 11: Fall 2002CS/PSY 67501 Rapid Prototyping Sketches, Storyboards, Mock-Ups and Scenarios Agenda Dimensions and terminology Non-computer methods Computer methods](https://reader036.vdocuments.mx/reader036/viewer/2022070409/56649e905503460f94b9465a/html5/thumbnails/11.jpg)
Fall 2002 CS/PSY 6750 11
Sketches, Mock-ups
• Paper-based “drawings” of interfaces• Good for brainstorming• Focuses people on high-level design
notions• Not so good for illustrating flow and
the details• Quick and cheap -> helpful feedback
![Page 12: Fall 2002CS/PSY 67501 Rapid Prototyping Sketches, Storyboards, Mock-Ups and Scenarios Agenda Dimensions and terminology Non-computer methods Computer methods](https://reader036.vdocuments.mx/reader036/viewer/2022070409/56649e905503460f94b9465a/html5/thumbnails/12.jpg)
Fall 2002 CS/PSY 6750 12
Storyboarding
• Pencil and paper simulation or walkthrough of system look and functionality Use sequence of diagrams/drawings Show key snap shots Quick & easy
![Page 13: Fall 2002CS/PSY 67501 Rapid Prototyping Sketches, Storyboards, Mock-Ups and Scenarios Agenda Dimensions and terminology Non-computer methods Computer methods](https://reader036.vdocuments.mx/reader036/viewer/2022070409/56649e905503460f94b9465a/html5/thumbnails/13.jpg)
Fall 2002 CS/PSY 6750 13
Example
![Page 14: Fall 2002CS/PSY 67501 Rapid Prototyping Sketches, Storyboards, Mock-Ups and Scenarios Agenda Dimensions and terminology Non-computer methods Computer methods](https://reader036.vdocuments.mx/reader036/viewer/2022070409/56649e905503460f94b9465a/html5/thumbnails/14.jpg)
Fall 2002 CS/PSY 6750 14
Scenarios
• Hypothetical or fictional situations of use Typically involving some person, event,
situation and environment Provide context of operation Often in narrative form, but can also be
sketches or even videos
![Page 15: Fall 2002CS/PSY 67501 Rapid Prototyping Sketches, Storyboards, Mock-Ups and Scenarios Agenda Dimensions and terminology Non-computer methods Computer methods](https://reader036.vdocuments.mx/reader036/viewer/2022070409/56649e905503460f94b9465a/html5/thumbnails/15.jpg)
Fall 2002 CS/PSY 6750 15
Scenario Utility
• Engaging and interesting• Allows designer to look at problem
from another person’s point of view• Facilitates feedback and opinions• Can be very futuristic and creative
![Page 16: Fall 2002CS/PSY 67501 Rapid Prototyping Sketches, Storyboards, Mock-Ups and Scenarios Agenda Dimensions and terminology Non-computer methods Computer methods](https://reader036.vdocuments.mx/reader036/viewer/2022070409/56649e905503460f94b9465a/html5/thumbnails/16.jpg)
Fall 2002 CS/PSY 6750 16
Other Techniques
• Tutorials & Manuals Maybe write them out ahead of time to
flesh out functionality Forces designer to be explicit about
decisions Putting it on paper is valuable
![Page 17: Fall 2002CS/PSY 67501 Rapid Prototyping Sketches, Storyboards, Mock-Ups and Scenarios Agenda Dimensions and terminology Non-computer methods Computer methods](https://reader036.vdocuments.mx/reader036/viewer/2022070409/56649e905503460f94b9465a/html5/thumbnails/17.jpg)
Fall 2002 CS/PSY 6750 17
Computer Methods
• Simulate more of system functionality Usually just some features or aspects Can focus on more of details Typically engaging Danger: Users are more reluctant to
suggest changes once they see more realistic prototype
![Page 18: Fall 2002CS/PSY 67501 Rapid Prototyping Sketches, Storyboards, Mock-Ups and Scenarios Agenda Dimensions and terminology Non-computer methods Computer methods](https://reader036.vdocuments.mx/reader036/viewer/2022070409/56649e905503460f94b9465a/html5/thumbnails/18.jpg)
Fall 2002 CS/PSY 6750 18
Terminology
• 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
![Page 19: Fall 2002CS/PSY 67501 Rapid Prototyping Sketches, Storyboards, Mock-Ups and Scenarios Agenda Dimensions and terminology Non-computer methods Computer methods](https://reader036.vdocuments.mx/reader036/viewer/2022070409/56649e905503460f94b9465a/html5/thumbnails/19.jpg)
Fall 2002 CS/PSY 6750 19
Prototyping Tools
• 1.Draw/Paint programs Draw each screen, good for look
Thin, horizontal prototype PhotoShop, Corel Draw,...
IP Address
CancelOK
![Page 20: Fall 2002CS/PSY 67501 Rapid Prototyping Sketches, Storyboards, Mock-Ups and Scenarios Agenda Dimensions and terminology Non-computer methods Computer methods](https://reader036.vdocuments.mx/reader036/viewer/2022070409/56649e905503460f94b9465a/html5/thumbnails/20.jpg)
Fall 2002 CS/PSY 6750 20
Prototyping Tools
• 2. 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, Hypercard, Macromedia Director, HTML
![Page 21: Fall 2002CS/PSY 67501 Rapid Prototyping Sketches, Storyboards, Mock-Ups and Scenarios Agenda Dimensions and terminology Non-computer methods Computer methods](https://reader036.vdocuments.mx/reader036/viewer/2022070409/56649e905503460f94b9465a/html5/thumbnails/21.jpg)
Fall 2002 CS/PSY 6750 21
Scripting Example
Ctrl-p
![Page 22: Fall 2002CS/PSY 67501 Rapid Prototyping Sketches, Storyboards, Mock-Ups and Scenarios Agenda Dimensions and terminology Non-computer methods Computer methods](https://reader036.vdocuments.mx/reader036/viewer/2022070409/56649e905503460f94b9465a/html5/thumbnails/22.jpg)
Fall 2002 CS/PSY 6750 22
Beware!
![Page 23: Fall 2002CS/PSY 67501 Rapid Prototyping Sketches, Storyboards, Mock-Ups and Scenarios Agenda Dimensions and terminology Non-computer methods Computer methods](https://reader036.vdocuments.mx/reader036/viewer/2022070409/56649e905503460f94b9465a/html5/thumbnails/23.jpg)
Fall 2002 CS/PSY 6750 23
Apple Hypercard
• Once a very popular prototyping tool for simulating UI
• Allows control of simple card transitions
• More complex behaviorson mouseUp play “boing” wait for 3 seconds visual effect wipe left very fast to black click at 150,100 type “goodbye”end mouseUp
![Page 24: Fall 2002CS/PSY 67501 Rapid Prototyping Sketches, Storyboards, Mock-Ups and Scenarios Agenda Dimensions and terminology Non-computer methods Computer methods](https://reader036.vdocuments.mx/reader036/viewer/2022070409/56649e905503460f94b9465a/html5/thumbnails/24.jpg)
Fall 2002 CS/PSY 6750 24
Macromedia Director
• Combines various media with script written in Lingo language
• Concerned with place and time Objects positioned in space on “stage” Objects positioned in time on “score”
• Easy to transition between screens• Can export as executable or as Web
Shockwave file
![Page 25: Fall 2002CS/PSY 67501 Rapid Prototyping Sketches, Storyboards, Mock-Ups and Scenarios Agenda Dimensions and terminology Non-computer methods Computer methods](https://reader036.vdocuments.mx/reader036/viewer/2022070409/56649e905503460f94b9465a/html5/thumbnails/25.jpg)
Fall 2002 CS/PSY 6750 25
![Page 26: Fall 2002CS/PSY 67501 Rapid Prototyping Sketches, Storyboards, Mock-Ups and Scenarios Agenda Dimensions and terminology Non-computer methods Computer methods](https://reader036.vdocuments.mx/reader036/viewer/2022070409/56649e905503460f94b9465a/html5/thumbnails/26.jpg)
Fall 2002 CS/PSY 6750 26
Prototyping Tools
• 3. Interface Builders Tools for laying out windows, controls,
etc. of interfaceHave build and test modes that are
good for exhibiting look and feelGenerate code to which back-end
functionality can be added through programming
Examples: Visual Basic, Delphi, UIMX, ...
![Page 27: Fall 2002CS/PSY 67501 Rapid Prototyping Sketches, Storyboards, Mock-Ups and Scenarios Agenda Dimensions and terminology Non-computer methods Computer methods](https://reader036.vdocuments.mx/reader036/viewer/2022070409/56649e905503460f94b9465a/html5/thumbnails/27.jpg)
Fall 2002 CS/PSY 6750 27
Visual Basic
UI Controls
Design area
Controlproperties
![Page 28: Fall 2002CS/PSY 67501 Rapid Prototyping Sketches, Storyboards, Mock-Ups and Scenarios Agenda Dimensions and terminology Non-computer methods Computer methods](https://reader036.vdocuments.mx/reader036/viewer/2022070409/56649e905503460f94b9465a/html5/thumbnails/28.jpg)
Fall 2002 CS/PSY 6750 28
More to Come…
• We’ll learn more about VB and will even have an assignment with it
• This verges on the topic of UI Software so we’ll defer our discussion until we encounter that topic in a couple weeks
![Page 29: Fall 2002CS/PSY 67501 Rapid Prototyping Sketches, Storyboards, Mock-Ups and Scenarios Agenda Dimensions and terminology Non-computer methods Computer methods](https://reader036.vdocuments.mx/reader036/viewer/2022070409/56649e905503460f94b9465a/html5/thumbnails/29.jpg)
Fall 2002 CS/PSY 6750 29
Prototyping Technique
• Wizard of Oz - Person simulates and controls system from “behind the scenes” Use mock interface and
interact with users Good for simulating
system that would be difficult to build
Can be either computer-based or not
![Page 30: Fall 2002CS/PSY 67501 Rapid Prototyping Sketches, Storyboards, Mock-Ups and Scenarios Agenda Dimensions and terminology Non-computer methods Computer methods](https://reader036.vdocuments.mx/reader036/viewer/2022070409/56649e905503460f94b9465a/html5/thumbnails/30.jpg)
Fall 2002 CS/PSY 6750 30
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
![Page 31: Fall 2002CS/PSY 67501 Rapid Prototyping Sketches, Storyboards, Mock-Ups and Scenarios Agenda Dimensions and terminology Non-computer methods Computer methods](https://reader036.vdocuments.mx/reader036/viewer/2022070409/56649e905503460f94b9465a/html5/thumbnails/31.jpg)
Fall 2002 CS/PSY 6750 31
Prototyping Tools
• Good features Easy to develop & modify screens Supports type of interface you are developing Supports variety I/O devices Easy to link screens and modify links Allows calling external procedures & program Allows importing text, graphics, other media Easy to learn and use Good support from vendor
![Page 32: Fall 2002CS/PSY 67501 Rapid Prototyping Sketches, Storyboards, Mock-Ups and Scenarios Agenda Dimensions and terminology Non-computer methods Computer methods](https://reader036.vdocuments.mx/reader036/viewer/2022070409/56649e905503460f94b9465a/html5/thumbnails/32.jpg)
Fall 2002 CS/PSY 6750 32
Prototyping
Low-fidelity Medium-fidelity High-fidelity
Sketches, mock-ups Slide shows
Simulations
System prototypes
Scenarios
Storyboards