Prototyping for mobile


Published on

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.

Published in: Design
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Prototyping for mobile

  1. Prototypingfor MobileMemi Beltrame@bratwurstkometUX 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 15 ChallengesChapter 2ToolsChapter 3Practice!
  5. Chapter 15 Challenges
  6. 1Know your audience
  7. Finding out user behaviorregarding touch & mobile.
  8. Define the relevant criteriaRelevant = High impact on experience • Age. • Devices. • Location. • Homogeneity. • Education / Professional background.
  9. Age
  10. • Single Page • No Chrome • No adds • No wrong placesvisit an iPad or iPhone.
  11. Location
  12. Züriwald App Educational HikingPlanning Offline = Download Closed Places Weather
  13. 2Make it tangible
  14. Users have a hard time tounderstand paper or desktop prototypes for mobile.
  15. Get as close to thereal deal as possible
  16. Jungfraubahnen Tourism Scribbles Balsamiq HTML-Web Prototype
  17. Make users interact on the device.
  18. Neue Zürcher Zeitung Webpaper
  19. Our Fingers 44px 44pxShort Thick
  20. 44px44px
  21. Provide the properaffordances Some gestures are more established than others.
  22. 3Testability
  23. The more interactive, the easier to test,the harder to record.
  24. Do it.Early. Often.More on testing later
  25. 4Quality
  26. Speed vs. Accuracy Pick one.
  27. Speed vs. Accuracy Pick one.
  28. 5Data
  29. Do anything to get real data. Does it exist? How does it look like?
  30. 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
  31. Chapter 2Tools
  32. Pen and PaperThe usual start to any prototyping
  33. What you needExtremely rudimentalAffordableFast and withoutelectricity
  34. What you getExtremely rudimentalAffordableFast and withoutelectricity
  35. Handy HelpersTemplates and stencils
  36. Technique matters:Design Studio
  37. Libraries and Toolsfor Responsive and Mobile Prototyping
  38. PoP - Prototyping on Paper
  39. Balsamiq
  40. Balsamiq• Wide range of standard elements• Static desktop application or webapp• Templates and Snippets• Everything inside the desktop
  41. Bootstrap
  42. 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.
  43. Ratchet
  44. 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.
  45. ProtostrapCode:
  46. 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.
  47. Do yourself a favor:Learn how to code.
  48. Livetyping:
  49. GUI Editoren
  50. JETSTRAPWebbased WISIWYG Editor for Bootstrap Components
  51. EASEL
  52. 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.
  53. Fireworks & TAPTouch Application Prototypes
  54. 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.
  55. Testing
  56. Previewers LiveView ScreencasterAndroid Design PreviewPreview Prototypes via WiFi/USB on the devices
  57. ReflectorReflector is an AirPlay mirroring appfor Mac / PC to display the screen ofiPhones on a desktop.Reflector let‘s you record theiPhones screen.
  58. UX Recorder WTF? Record users that are testing a Website. Sound, facial expression and gestures are recorded as well
  59. Chapter 3Practice!
  60. 1. Sketch up on Paper2. Stitch up with Prototype on Paper
  61. Bicycle Hiking CompanionAn app for hikers that helps them solve problems withtheir bike while on the road.
  62. User StoriesI want to get instructions on how tofix a problem.I want to get professional help.