prototyping
DESCRIPTION
Prototyping. Sketches, storyboards, and other prototypes. Agenda. Questions? Prototyping terms Scenarios and Sketches Storyboards Interface Prototypes Exercise Next time: Design of Everyday Things. Dilemma. You can’t evaluate a design until it’s built But… - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Prototyping](https://reader036.vdocuments.site/reader036/viewer/2022070402/56813832550346895d9fe1ab/html5/thumbnails/1.jpg)
Prototyping
Sketches, storyboards, and other prototypes
![Page 2: Prototyping](https://reader036.vdocuments.site/reader036/viewer/2022070402/56813832550346895d9fe1ab/html5/thumbnails/2.jpg)
Agenda
Questions? Prototyping terms Scenarios and Sketches Storyboards Interface Prototypes Exercise Next time: Design of Everyday Things
![Page 3: Prototyping](https://reader036.vdocuments.site/reader036/viewer/2022070402/56813832550346895d9fe1ab/html5/thumbnails/3.jpg)
Dilemma
You can’t evaluate a design until it’s built– But…
After building, changes to the design are difficult
Simulate the design, in low-cost manner
![Page 4: Prototyping](https://reader036.vdocuments.site/reader036/viewer/2022070402/56813832550346895d9fe1ab/html5/thumbnails/4.jpg)
Design Artifacts
Expressing design ideas:– Make it fast!!!– Allow lots of flexibility for radically different
designs– Make it cheap– Promote valuable feedback
Facilitate iterative design and evaluation
![Page 5: Prototyping](https://reader036.vdocuments.site/reader036/viewer/2022070402/56813832550346895d9fe1ab/html5/thumbnails/5.jpg)
Prototype representation
How to represent the prototype?– Mockup– Storyboard– Sketches– Scenarios– Screenshots– Functional interface
![Page 6: Prototyping](https://reader036.vdocuments.site/reader036/viewer/2022070402/56813832550346895d9fe1ab/html5/thumbnails/6.jpg)
Prototype scope
How much to represent?– Vertical - “Deep” prototyping
Show much of the interface, but in a shallow manner
– Horizontal - “Broad” prototyping Show only portion of interface, but large amount of those
portions
![Page 7: Prototyping](https://reader036.vdocuments.site/reader036/viewer/2022070402/56813832550346895d9fe1ab/html5/thumbnails/7.jpg)
Prototype maturation
Low fidelity vs. High fidelity
Amount of polish should reflect maturity of the prototype
Why?
![Page 8: Prototyping](https://reader036.vdocuments.site/reader036/viewer/2022070402/56813832550346895d9fe1ab/html5/thumbnails/8.jpg)
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
– Good for accompanying visual description in report (*hint hint*)
![Page 9: Prototyping](https://reader036.vdocuments.site/reader036/viewer/2022070402/56813832550346895d9fe1ab/html5/thumbnails/9.jpg)
Scenarios
Fictional stories with characters, products, events and environments.
Typically narratives, but can be videos, simulations
Jane likes to take walks every morning. This morning, as she places her hand on the door, she hears “75% chance of rain, better bring your umbrella.” Thankful for the notice, she grabs her umbrella and heads out for her morning walk.
![Page 10: Prototyping](https://reader036.vdocuments.site/reader036/viewer/2022070402/56813832550346895d9fe1ab/html5/thumbnails/10.jpg)
Scenario Utility
Engaging and interesting Another person’s shoes Present to different people Facilitates feedback and opinions Explore errors or mistakes
Good for accompanying sketches, mockups, etc.
![Page 11: Prototyping](https://reader036.vdocuments.site/reader036/viewer/2022070402/56813832550346895d9fe1ab/html5/thumbnails/11.jpg)
Storyboard
Determine the story– A very iterative process through a lot of initial
drafts– Includes a lot of brainstorming
Sketch on pen + paper Generate more polished art for
presentation Develop
![Page 12: Prototyping](https://reader036.vdocuments.site/reader036/viewer/2022070402/56813832550346895d9fe1ab/html5/thumbnails/12.jpg)
More detailed scenario
Jane’s class just got out and she wants to know whether to take the shuttle or walk back to her dorm. She opens her cell phone and starts the web browser. She opens her bookmarks and clicks on the bus location page. The page displays a list of the shuttle lines on campus. She selects the Nugget. The next page is a list of bus stops. She scrolls down and selects Woodward Hall. The page then displays that the next shuttle should arrive in 2 minutes. Jane leaves the building to head down to the bus stop to wait for the shuttle.
![Page 13: Prototyping](https://reader036.vdocuments.site/reader036/viewer/2022070402/56813832550346895d9fe1ab/html5/thumbnails/13.jpg)
Use taglines / captions
Keep it short: show as much as necessary but not more
![Page 14: Prototyping](https://reader036.vdocuments.site/reader036/viewer/2022070402/56813832550346895d9fe1ab/html5/thumbnails/14.jpg)
Drawing is hard…
But it doesn’t have to be
![Page 15: Prototyping](https://reader036.vdocuments.site/reader036/viewer/2022070402/56813832550346895d9fe1ab/html5/thumbnails/15.jpg)
Drawing is hard…
It doesn’t have to be drawings..
![Page 16: Prototyping](https://reader036.vdocuments.site/reader036/viewer/2022070402/56813832550346895d9fe1ab/html5/thumbnails/16.jpg)
Remember…
Different presentation format means you can do more!
Think about how long you have a captive audience
Think about how much you want to tell Think about options for presenting
sequences of drawing
![Page 17: Prototyping](https://reader036.vdocuments.site/reader036/viewer/2022070402/56813832550346895d9fe1ab/html5/thumbnails/17.jpg)
Sketches
Generally for depicting physical aspects of system
Taken from Builder Bobs team project Summer 04
![Page 18: Prototyping](https://reader036.vdocuments.site/reader036/viewer/2022070402/56813832550346895d9fe1ab/html5/thumbnails/18.jpg)
Mockups / Wireframes
Good for brainstorming Focuses people on high-level design notions Not so good for illustrating flow and the
details
![Page 19: Prototyping](https://reader036.vdocuments.site/reader036/viewer/2022070402/56813832550346895d9fe1ab/html5/thumbnails/19.jpg)
Paper prototyping
“Paper prototyping is a variation of usability testing where representative users perform realistic tasks by interacting with a paper version of the interface that is manipulated by a person ‘playing computer,’ who doesn’t explain how the interface is intended to work.”
The "Computer" highlights the item the user has just selected. A member of the development team observes and takes notes. (Photo courtesy of Timo Jokela.)
Taken from Paper Prototyping by Carolyn Snyderhttp://www.paperprototyping.com/
![Page 20: Prototyping](https://reader036.vdocuments.site/reader036/viewer/2022070402/56813832550346895d9fe1ab/html5/thumbnails/20.jpg)
Draw/Paint programs
Draw each screen, good for look
Thin, horizontal prototype
PhotoShop, Paint,...
IP Address
CancelOK
![Page 21: Prototyping](https://reader036.vdocuments.site/reader036/viewer/2022070402/56813832550346895d9fe1ab/html5/thumbnails/21.jpg)
Simulations
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 22: Prototyping](https://reader036.vdocuments.site/reader036/viewer/2022070402/56813832550346895d9fe1ab/html5/thumbnails/22.jpg)
Interface Builders
Tools for laying out windows, controls, etc. of interface
– Easy to develop & modify screens– Supports type of interface you are developing– Good look and feel– Can add back-end functionality
Examples: Visual Basic, .NET, many apps for various languages
![Page 23: Prototyping](https://reader036.vdocuments.site/reader036/viewer/2022070402/56813832550346895d9fe1ab/html5/thumbnails/23.jpg)
Visual Basic
UI Controls
Design area
Controlproperties
![Page 24: Prototyping](https://reader036.vdocuments.site/reader036/viewer/2022070402/56813832550346895d9fe1ab/html5/thumbnails/24.jpg)
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: Prototyping](https://reader036.vdocuments.site/reader036/viewer/2022070402/56813832550346895d9fe1ab/html5/thumbnails/25.jpg)
Specialized
SILK (Sketching Interfaces Like Krazy) / DENIM– Sketch-based GUI builder– http://dub.washington.edu/denim/– http://www.open-video.org/details.php?
videoid=5018
by James Landay’s and his former group at UC Berkeley
![Page 26: Prototyping](https://reader036.vdocuments.site/reader036/viewer/2022070402/56813832550346895d9fe1ab/html5/thumbnails/26.jpg)
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 27: Prototyping](https://reader036.vdocuments.site/reader036/viewer/2022070402/56813832550346895d9fe1ab/html5/thumbnails/27.jpg)
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 28: Prototyping](https://reader036.vdocuments.site/reader036/viewer/2022070402/56813832550346895d9fe1ab/html5/thumbnails/28.jpg)
Review
Low-fidelity Medium-fidelity High-fidelity
Sketches, mock-ups Slide shows
Simulations
System prototypes
Scenarios
Storyboards
For more: take ITIS 3050 (number will soon change)
Rapid Prototyping and Interface Building Offered next fall
![Page 29: Prototyping](https://reader036.vdocuments.site/reader036/viewer/2022070402/56813832550346895d9fe1ab/html5/thumbnails/29.jpg)
Assignment: Storyboard
Due next Tuesday Create a storyboard for your project
– This CAN be about a potential design– 4 to 6 panels is sufficient
Bring to class on paper if you do not have access to a scanner
![Page 30: Prototyping](https://reader036.vdocuments.site/reader036/viewer/2022070402/56813832550346895d9fe1ab/html5/thumbnails/30.jpg)
Crazy design time
Remember all the ways of doing interaction? Voice, pen, gesture, and even ways we didn’t talk about
Come up with a design idea for system at bus or train stops. Should allow you to do useful or entertaining things – perhaps buy tickets, check on schedules, get maps, tell you about the area, etc...
Be a little crazy – think of the user, but don’t just do the plain and expected kiosk.
Express your design ideas with low fidelity prototypes. Sketch. Storyboard. Scenario.