Prototype

Paper Protyping• After you have a storyboard, then figure out the user

interface.

• Paper prototype is a mock-up of an interface.

• Not on a computer. Paper, post-it notes, marker.

Why paper prototyping?• Faster to build

– Sketching is faster than programming– Get feedback earlier

• Easier to change – Easy to make changes between user tests– Experiment with alternatives – No code investment– everything can be thrown away

• Focuses attention on big picture – Designer doesn’t waste time on details

• Nonprogrammers can help – Only kindergarten skills are required

• Cheaper

Paper Prototype Examples

• Paper Prototype Example 1• Paper Prototype Example 2• Paper Prototype Example 3

Tips• Work quickly.

– Make reusable components (buttons, etc)– You can photocopy when necessary– You can use actual screenshots.

• When appropriate you can add context by adding in parts of chrome etc. to show it’s part of the larger operating system if that would help users.

• You can use material – posterboard or index cards for the back.

• The users can help here too. Test on users.

Prototyping Software -Mockups• NinjaMock http://www.ninjamock.com/

NinjaMock delivers all of the typical controls used in mobile apps and web designs. iOS, Android, Windows Phone, Surface: we have all you need to start prototyping apps for your mobile device projects. NinjaMock Example

• POP (Prototyping on Paper): https://marvelapp.com/pop/

Transforms pen and paper ideas into a real working prototype. POP Example

Digital Mock-up

• 3D computer graphics.• Takes more time, planning, resources compared

to other rapid prototyping techniques. • However, with drawing it needs to be redone

with each new version. This simplifies the updating process.

Web Domain

• In a web domain you would have: – Some static HTML– Then, dynamic– Then, Database and any other more complicated

components

Wizard-of-Oz Prototype• If you want an interactive application without writing a lot of code you can use Wizard of Oz Prototype.

• Human-Operator manipulates it behind the scenes.

• Wizard of Oz – little man behind the curtain- looked big and scary wizard. Wizard of Oz video

• Examples: – Person on other end of phone pretending to be the

automated system. Before implement the automated system. Can do it before speech recognition was even good.

– Another Wizard of Oz dialogue system: Adler, R. F., Iacobelli, F. and Gutstein, Y. 2016. Are You Convinced? A Wizard of Oz Study to Test Emotional vs. Rational Persuasion Strategies in Dialogues

Wizard of Oz, cont.• Have some kind of user-interface. Not much

code behind it. Mirage from human.

• Faster, cheaper, and easier than building the real thing.

Prototyping• Prototying is valuable. It can help you rapidly build your

design. • Get quick feedback before heading down the wrong path.• You can learn from it. It does not need to be complete. • Easy to modify. • Example: – Build a camera, with the buttons, but it won’t actually

work. Incomplete.

Another Example

• Palm Pilot (organizer) Jeff Hawkins, co-founder created a block of wood and used it like it was a device. Tap and enter information notes, record in calendar.

• Was he free for lunch on Wednesday? Hawkins would haul out the block and tap on it as if he were checking his schedule.

• If he needed a phone number, he would pretend to look it up on the wood.

• Occasionally he would try out different design faces with various button configurations, using paper printouts glued to the block."

http://pretotyping.blogspot.com/2010/08/one-of-my-favorite-pretotype-stories.html

Boeing Airplane Prototype

Airplane Prototype

• Why?

• Had people come in with luggage to try it out and experience it. With flight attendants. – You can see if seats are comfortable– if aisles are wide enough

Video Prototype

• The goal of a video prototype is to persuade.

• It should persuade someone (a potential user or someone who might pay to have your design implemented), that investing in implementing your design would be worthwhile and effective.

Video Prototyping• Showing what you imagine it will be like.

• Interface can be:– paper prototype– digital mockup– real code– invisible -Fake tablet – shows what user is accomplishing –

later can figure out what you need to accomplish it.

Video Prototyping Benefits

• Benefits:– Cheap and fast to make– Great communication tools, shows the context of

use, explains your idea– Ties interface design decisions to tasks.

• Video will help you sell your ideas.

Video Prototyping, cont.• Video Prototype shows the entire task.

– Motivation and success outcome. – Introduce the task.

• Storyboards will help you.• Don’t need a fancy camera. You don’t need much time.

Camera phone is fine for a video prototype. • Edit as little as possible – that’s time-consuming. Do it

in one take or pause for editing.

Student Example Videos

• Voting App

• Parking Buddy

Other Video Prototype Examples• Videos:

– Video Prototype Example 2– Video Prototype Example 3