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.

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

2. We are all Elephants

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

4. Chapter 1
5 Challenges
Chapter 2
Tools
Chapter 3
Practice!

5. Chapter 1
5 Challenges

6. 1
Know your audience

7. Finding out user behavior
regarding touch & mobile.

8. Define the relevant criteria
Relevant = High impact on experience
• Age.
• Devices.
• Location.
• Homogeneity.
• Education / Professional background.

9. Age

13. • Single Page
• No Chrome
• No adds
• No wrong
places
visit
http://preview.liip.ch/zoo
on an iPad or iPhone.

14. Location

15. Züriwald App Educational Hiking
Planning
Offline =
Download
Closed Places
Weather

16. 2
Make it tangible

17. Users have a hard time to
understand paper or desktop
prototypes for mobile.

18. Get as close to the
real deal as possible

19. Jungfraubahnen Tourism
Scribbles Balsamiq HTML-Web
Prototype

20. Make users interact
on the device.

21. Neue Zürcher Zeitung Webpaper

22. Our Fingers
44px
44px
Short Thick

23. 44px
44px

24. Provide the proper
affordances
Some gestures are
more established
than others.

25. 3
Testability

26. The more interactive,
the easier to test,
the harder to record.

27. Do it.
Early. Often.
More on testing later

28. 4
Quality

29. Speed vs. Accuracy
Pick one.

30. Speed vs. Accuracy
Pick one.

31. 5
Data

32. Do anything to get
real data.
Does it exist?
How does it look like?

33. Prototype Data:
(Fonds in an application
for bankers)
VF - European Mid and Small Cap Equity B (Lux)
Real Data: Aberdeen Global - Emerging Markets Equity A Acc
UBS (Lux) Medium Term Bond Fund - CHF P-acc
UBS (Lux) Medium Term Bond Fund - EUR P-acc
UBS (Lux) Medium Term Bond Fund - USD P-acc

35. Chapter 2
Tools

36. Pen and Paper
The usual start to any
prototyping

37. What you need
Extremely rudimental
Affordable
Fast and without
electricity

38. What you get
Extremely rudimental
Affordable
Fast and without
electricity

39. Handy Helpers
Templates and
stencils
http://tinyurl.com/2cbebjb
http://www.uistencils.com

40. Technique matters:
Design Studio

41. Libraries and Tools
for Responsive and Mobile
Prototyping

42. PoP - Prototyping on Paper
http://popapp.in

43. Balsamiq

44. Balsamiq
• Wide range of standard elements
• Static desktop application or webapp
• Templates and Snippets
• Everything inside the desktop

45. Bootstrap
http://twitter.github.com

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

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

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

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

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

51. Do yourself a favor:
Learn how to code.

52. Livetyping: http://livetyping.capcloud.com

53. GUI Editoren

54. JETSTRAP
Webbased WISIWYG Editor for Bootstrap Components
http://jetstrap.com

55. EASEL
http://easel.io

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

57. Fireworks & TAP
Touch Application Prototypes
http://unitid.nl/2011/03/touch-application-prototypes-tap-for-iphone-and-ipad-using-adobe-fireworks/

58. Fireworks & TAP
• 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.

59. Testing

60. Previewers
LiveView Screencaster
Android Design Preview
Preview Prototypes via WiFi/USB on the devices

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

62. UX Recorder
WTF?
Record users that are testing a
Website.
Sound, facial expression and
gestures are recorded as well
http://www.uxrecorder.com

63. Chapter 3
Practice!

64. 1. Sketch up
on Paper
2. Stitch up
with Prototype on Paper

65. Bicycle Hiking Companion
An app for hikers that helps
them solve problems with
their bike while on the road.

66. User Stories
I want to get instructions on how to
fix a problem.
I want to get professional help.