Prototyping Sketches, storyboards, and other prototypes

Agenda Finish Interaction styles Prototyping Exercise if we have time Next time: Visual Design and Midterm Review

Real paper Anoto digital paper and pen technology ( Other pens available: Issues?

General Issues – Pen input Initial training required Learning time to become proficient Speed of use Generality/flexibility/power Special skills Screen space required Computational resources required

Other interesting interactions Gesture input – Wii – Lots of other specialized hardware for tracking 3D interaction – Stereoscopic displays – Virtual reality Immersive displays such as glasses, caves Augmented reality – Head trackers and vision based tracking Tangible interaction – Use physical objects to express input

Examples Tabletop, gesture + speech: 5JRQ 5JRQ Play anywhere: OXk&feature=related

Design Artifacts Simulate and explain the design, in low- cost manner 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

Prototype representation How to represent the prototype? – Mockup – Storyboard – Sketches – Scenarios – Screenshots – Functional interface

Example project

Next steps: interactive prototype

Prototype scope How much to represent? – Horizontal - “Broad” prototyping Show much of the interface, but in a shallow manner – Vertical - “Deep” prototyping Show only portion of interface, but large amount of those portions

Prototype maturation Low fidelity vs. High fidelity Amount of polish should reflect maturity of the prototype Why?

Design Description Can simply have a textual description of a system design – Very detailed and complete – 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*)

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.

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.

Scenario Utility Engaging and interesting Another person’s shoes Present to different people/stakeholders Facilitates feedback and opinions Explore errors or mistakes Good for accompanying sketches, mockups, etc. (*hint, hint*)

Storyboard A story with visuals Visuals can be almost anything: – Hand drawn with people and environment – Screenshots of a system – Combination… Advantages: – Provides additional details over scenario – Can be easier to digest Disadvantages: – Story must be concise and clear – Visuals must be developed

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

Use taglines / captions Keep it short: show as much as necessary but not more

Drawing is hard… But it doesn’t have to be

Drawing is hard… It doesn’t have to be drawings..

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

Sketches Generally for depicting physical aspects of system Taken from Builder Bobs team project Summer 04

Mockups / Wireframes Good for brainstorming and early designs Focuses people on high-level design notions Not so good for illustrating flow and the details

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 Snyder

Draw/Paint programs Draw each screen, good for look Thin, horizontal prototype PhotoShop, Paint,... IP Address Cancel OK

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, Macromedia Director, HTML

Digital Wireframes SILK (Sketching Interfaces Like Krazy) / DENIM – Sketch-based GUI builder – – video.org/details.php?videoid=5018 Axure – Commercial tool for creating interface wireframes, with some functionality –

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, NetBeans, many apps for various languages

Visual Basic UI Controls Design area Control properties

Wizard of Oz Person simulates and controls system from “behind the scenes” – Use prototype interface and interact with users – Good for simulating system that would be difficult to build – Behavior should be algorithmic Advantages: – Allows user to immerse oneself in situation – See how people respond, how specify tasks

Review Low-fidelity Medium-fidelityHigh-fidelity Sketches, mock-ups Slide shows Simulations System prototypes Scenarios Storyboards For more: take ITIS 3150 Rapid Prototyping and Interface Building Offered next fall

Assignment: Storyboard Due Feb. 25 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

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 a 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.