Prototyping on a Shoestring with Virtually No Tech Skills!

Prototypingwith virtually no budget and no tech skills!

• Mobile development can get pricey

• Mobile development can take time and can get bogged down

• Prototyping helps manage cost and risk

• Prototyping helps get buy-in and user acceptance/usability out of the way earlier

Why prototype?

Considerations

• Building Prototypes should be EASY

• Prototypes should not need to be pixel perfect

• Prototypes goals need to be clearly spelled out prior to creation

• Build Prototypes that have an output that everyone can see

• If animations, etc. are going to be used in the final, attempt to build them in the prototype

The Basics

• Functional Fidelity and Visual Fidelity

• You need to envision the goals for the prototype

• Choose method and graphic sophistication based on the goals.

• More “Production Ready” = more time

• More graphically rich = more time

• More revisions at this point are less expensive than later

Fidelity vs. Functionality

Fidelity vs. Effort

A few prototyping options.

Pros

• Inexpensive

• Easy

Cons

• Doesn't really emulate the UX

• Hard to pull off a complicated design or one with a lot of screens/data

• None of the design elements/deliverables really will live on

• Tough to justify with so many good tools these days.

Paper prototype

Paper Example

Pros

• Inexpensive

• Easy

• Using Webkit based browsers, you can emulate mobile devices pretty well

• There are tools popping up now that ease this considerably

Cons

• More tech knowledge might be required than simple paper prototypes

• There is still very little reuse of assets for the final version, unless you are going to mobile web, not apps

HTML/CSS

HTML/CSS Examplehttp://www.adobe.com/devnet/dreamweaver/articles/getting-started-with-jquery-mobile.html

New! Rapid prototyping tools.

Pros

• Inexpensive (so I’ve been assured)

• Super-easy!

• Web/Cloud based (so it's collaborative)

• Results are pretty stellar

Cons

• It's still in beta

• Pricing is as of yet ???

• Assets are not going to be used for the final deliverable

FieldTest

Field Test Example

Tools that aren't really for prototyping, but still work pretty well.

Pros

• Most everyone has one of these

• Reasonably easy to use for any one familiar with desktop publishing tools

• Produces interactivity and animation

Cons

• It's a tad expensive if you don’t own it already

• None of the design elements/deliverables really will live on

• Good UI Stencils are tough to find or need reprep

• Output isn’t really “mobile”

Powerpoint/Keynote

Keynote Exampleshttp://keynotekungfu.com

Pros

• great toolset – highly extensible, large community

• Produces fantastic diagrams and high quality output

• Reasonably easy to use for any one familiar with desktop publishing tools

• produces interactivity

• move from wireframe to prototype easily

Cons

• It's a tad expensive

• Mac only (which might also be considered a 'Pro')

• None of the design elements/deliverables really will live on

Omnigraffle

Graffle!

Pros

• Uses InDesign

• Produces rich interactivity

• Allows for media

Cons

• Fairly pricey if you want to take it past a prototype and use it for production

• Does require InDesign, which some of you may not have

• Output is iPad only

Digital Publishing Suite

DPS

Lots more examples in App Savvy

Wrap it up, already.

• Prototyping is fast

• Prototyping is easy

• Prototyping gets stakeholders involved sooner

• Prototyping saves money

Why prototype?

• Q&A

• Discussion

Finishing up