Memi Beltrame@bratwurstkomet

Prototyping for Mobile

UX Romandie meets COMEM+February 26th 2013

We are all Elephants

Prototypen für Mobile sind auf Papier oder am Computer schwierig zu verstehen.

Practice!

Chapter 1

5 ChallengesChapter 2

ToolsChapter 3

Practice!

5 ChallengesChapter 1

1Know your audience

Finding out user behavior regarding touch & mobile.

Define the relevant criteria

• Age. • Devices. • Location. • Homogeneity.• Education / Professional background.

Relevant = High impact on experience

Age

• Single Page• No Chrome• No adds • No wrong

places

visit http://preview.liip.ch/zooon an iPad or iPhone.

Location

Züriwald App Educational Hiking

Planning Offline =Download

Closed Places

Weather

2Make it tangible

Users have a hard time to understand paper or desktop

prototypes for mobile.

Get as close to the real deal as possible

Jungfraubahnen Tourism

Scribbles HTML-WebPrototype

Balsamiq

Make users interact on the device.

Neue Zürcher Zeitung Webpaper

Our Fingers

Short

44px

44px

Thick

44px

44px

Provide the proper affordances

Some gestures are more established than others.

3Testability

The more interactive, the easier to test,

the harder to record.

Do it.Early. Often.More on testing later

4Quality

Speed vs. Accuracy

Pick one.

Speed vs. Accuracy

Pick one.

5Data

Do anything to get real data.

Does it exist?How does it look like?

Prototype Data:(Fonds in an application

for bankers)

VF - European Mid and Small Cap Equity B (Lux)Aberdeen Global - Emerging Markets Equity A AccUBS (Lux) Medium Term Bond Fund - CHF P-accUBS (Lux) Medium Term Bond Fund - EUR P-accUBS (Lux) Medium Term Bond Fund - USD P-acc

Real Data:

ToolsChapter 2

Pen and PaperThe usual start to any

prototyping

Extremely rudimentalAffordableFast and without electricity

What you need

Extremely rudimentalAffordableFast and without electricity

What you get

Handy Helpers

Templates and stencils

http://www.uistencils.com

http://tinyurl.com/2cbebjb

Technique matters:Design Studio

Libraries and Toolsfor Responsive and Mobile

Prototyping

PoP - Prototyping on Paper

http://popapp.in

Balsamiq

•Wide range of standard elements• Static desktop application or webapp• Templates and Snippets

• Everything inside the desktop

Balsamiq

Bootstrap

http://twitter.github.com

Bootstrap

•Widely adopted (also for productive sites)• Library with CSS and Javascript Files•HTML has to be copied individually from Bootstrap site•Not documented well in all respects.

• No ability to define Templates/Snippets, (if the navigation changes, it has to be adapted on every single page)

• No mobile functionality like iOS Tabbars, „Save to Homescreen“ etc.

http://maker.github.com/ratchet/

Ratchet

Ratchet

•Mobile only, mobile optimised elements• Library with CSS und Javascript Files•HTML has to be copied individually from Ratchet site •Having a good editor is essential.

• No ability to define Templates/Snippets• No mobile functionality like iOS Tabbars, „Save to

Homescreen“ etc.

Protostrap

Code: https://github.com/liip/ProtostrapDemo: http://preview.liip.ch/Protostrap/

Protostrap•Based on Boostrap• Library with CSS and Javascript Files• PHP Files to hold templates and snippets together•Documentation and examples in the package•Optimized for Mobile:

- fast tap recognistion- iOS Tabbar for Prototyping of native apps- „Add to home“

•Basic PHP knowledge needed•Not pretty, but functional!•Can get messy.

Do yourself a favor:Learn how to code.

Livetyping: http://livetyping.capcloud.com

GUI Editoren

JETSTRAPWebbased WISIWYG Editor for Bootstrap Components

http://jetstrap.com

EASEL

http://easel.io

JETSTRAP/EASEL• Suitable wenn responsive is important• No programming skills needed• Tied to Bootstrap/Easel• You can generate HTML and CSS• Simple Base when you „need something fast“

• No ability to define Templates/Snippets• No mobile functionality like iOS Tabbars, „Save to

Homescreen“ etc.

Fireworks & TAP

http://unitid.nl/2011/03/touch-application-prototypes-tap-for-iphone-and-ipad-using-adobe-fireworks/

Touch Application Prototypes

• Prototyp In Fireworks erstellen• Seiten mit Hotspots verlinken• Als Dreamweaver Bibliothek exportieren• Auf Server laden• „Build“ Panel aufrufen und den eigentlichen

Prototypen generieren• Prototypen im Mobilen-Browser anschauen.

Fireworks & TAP

Testing

LiveView Screencaster

Preview Prototypes via WiFi/USB on the devices

Android Design Preview

Previewers

Reflector

Reflector is an AirPlay mirroring app for Mac / PC to display the screen of iPhones on a desktop.

Reflector let‘s you record the iPhones screen.

http://reflectorapp.com

UX Recorder

Record users that are testing a Website.Sound, facial expression and gestures are recorded as well

WTF?

http://www.uxrecorder.com

Practice!Chapter 3

1. Sketch up on Paper

2. Stitch up with Prototype on Paper

An app for hikers that helps them solve problems with

their bike while on the road.

Bicycle Hiking Companion

I want to get instructions on how to fix a problem.

I want to get professional help.

User Stories