Prototyping for mobile

66
Memi Beltrame @bratwurstkomet Prototyping for Mobile UX Romandie meets COMEM+ February 26th 2013

description

This talk looks at the challenges we are facing when prototyping for mobile and gives an overview about the tools and handy helpers that you can use to deliver tappable, sharable and testable prototypes.

Transcript of Prototyping for mobile

Page 1: Prototyping for mobile

Memi Beltrame@bratwurstkomet

Prototyping for Mobile

UX Romandie meets COMEM+February 26th 2013

Page 2: Prototyping for mobile

We are all Elephants

Page 3: Prototyping for mobile

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

Practice!

Page 4: Prototyping for mobile

Chapter 1

5 ChallengesChapter 2

ToolsChapter 3

Practice!

Page 5: Prototyping for mobile

5 ChallengesChapter 1

Page 6: Prototyping for mobile

1Know your audience

Page 7: Prototyping for mobile

Finding out user behavior regarding touch & mobile.

Page 8: Prototyping for mobile

Define the relevant criteria

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

Relevant = High impact on experience

Page 9: Prototyping for mobile

Age

Page 10: Prototyping for mobile
Page 11: Prototyping for mobile
Page 12: Prototyping for mobile
Page 13: Prototyping for mobile

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

places

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

Page 14: Prototyping for mobile

Location

Page 15: Prototyping for mobile

Züriwald App Educational Hiking

Planning Offline =Download

Closed Places

Weather

Page 16: Prototyping for mobile

2Make it tangible

Page 17: Prototyping for mobile

Users have a hard time to understand paper or desktop

prototypes for mobile.

Page 18: Prototyping for mobile

Get as close to the real deal as possible

Page 19: Prototyping for mobile

Jungfraubahnen Tourism

Scribbles HTML-WebPrototype

Balsamiq

Page 20: Prototyping for mobile

Make users interact on the device.

Page 21: Prototyping for mobile

Neue Zürcher Zeitung Webpaper

Page 22: Prototyping for mobile

Our Fingers

Short

44px

44px

Thick

Page 23: Prototyping for mobile

44px

44px

Page 24: Prototyping for mobile

Provide the proper affordances

Some gestures are more established than others.

Page 25: Prototyping for mobile

3Testability

Page 26: Prototyping for mobile

The more interactive, the easier to test,

the harder to record.

Page 27: Prototyping for mobile

Do it.Early. Often.More on testing later

Page 28: Prototyping for mobile

4Quality

Page 29: Prototyping for mobile

Speed vs. Accuracy

Pick one.

Page 30: Prototyping for mobile

Speed vs. Accuracy

Pick one.

Page 31: Prototyping for mobile

5Data

Page 32: Prototyping for mobile

Do anything to get real data.

Does it exist?How does it look like?

Page 33: Prototyping for mobile

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:

Page 34: Prototyping for mobile
Page 35: Prototyping for mobile

ToolsChapter 2

Page 36: Prototyping for mobile

Pen and PaperThe usual start to any

prototyping

Page 37: Prototyping for mobile

Extremely rudimentalAffordableFast and without electricity

What you need

Page 38: Prototyping for mobile

Extremely rudimentalAffordableFast and without electricity

What you get

Page 39: Prototyping for mobile

Handy Helpers

Templates and stencils

http://www.uistencils.com

http://tinyurl.com/2cbebjb

Page 40: Prototyping for mobile

Technique matters:Design Studio

Page 41: Prototyping for mobile

Libraries and Toolsfor Responsive and Mobile

Prototyping

Page 42: Prototyping for mobile

PoP - Prototyping on Paper

http://popapp.in

Page 43: Prototyping for mobile

Balsamiq

Page 44: Prototyping for mobile

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

• Everything inside the desktop

Balsamiq

Page 45: Prototyping for mobile

Bootstrap

http://twitter.github.com

Page 46: Prototyping for mobile

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.

Page 47: Prototyping for mobile

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

Ratchet

Page 48: Prototyping for mobile

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.

Page 49: Prototyping for mobile

Protostrap

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

Page 50: Prototyping for mobile

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.

Page 51: Prototyping for mobile

Do yourself a favor:Learn how to code.

Page 52: Prototyping for mobile

Livetyping: http://livetyping.capcloud.com

Page 53: Prototyping for mobile

GUI Editoren

Page 54: Prototyping for mobile

JETSTRAPWebbased WISIWYG Editor for Bootstrap Components

http://jetstrap.com

Page 55: Prototyping for mobile

EASEL

http://easel.io

Page 56: Prototyping for mobile

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.

Page 57: Prototyping for mobile

Fireworks & TAP

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

Touch Application Prototypes

Page 58: Prototyping for mobile

• 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

Page 59: Prototyping for mobile

Testing

Page 60: Prototyping for mobile

LiveView Screencaster

Preview Prototypes via WiFi/USB on the devices

Android Design Preview

Previewers

Page 61: Prototyping for mobile

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

Page 62: Prototyping for mobile

UX Recorder

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

WTF?

http://www.uxrecorder.com

Page 63: Prototyping for mobile

Practice!Chapter 3

Page 64: Prototyping for mobile

1. Sketch up on Paper

2. Stitch up with Prototype on Paper

Page 65: Prototyping for mobile

An app for hikers that helps them solve problems with

their bike while on the road.

Bicycle Hiking Companion

Page 66: Prototyping for mobile

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

I want to get professional help.

User Stories