Mobile UX Tools & Methods for UX Australia 2011

4,624 views

Published on

Rod Farmer & I delivered this presentation at UX Australia in August 2011

Published in: Design, Technology
3 Comments
6 Likes
Statistics
Notes
  • Glad you enjoyed :-)
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Really enjoyed the presentation and very interesting to see how the tools fit within your overall workflow.

    Check out FluidUI - www.fluidui.com - It has iPhone and Android widget sets, allows for image uploads and linking with hotspots, touch gestures and animated page transitions.

    Currently in beta but you can signup for early access on the site.

    Ian
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Brilliant analysis!! Thanks guys.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
4,624
On SlideShare
0
From Embeds
0
Number of Embeds
553
Actions
Shares
0
Downloads
44
Comments
3
Likes
6
Embeds 0
No embeds

No notes for slide

Mobile UX Tools & Methods for UX Australia 2011

  1. 1. Tools & Methods forMobile PrototypingOliver Weidlich & Rod FarmerCo-FoundersMobile Experience26th August 2011 @ UX Australia
  2. 2. @oliverw@rodfarmer
  3. 3. 1. On Device
  4. 4. 2. Watch
  5. 5. 3. Case Study
  6. 6. Who’s worked on mobile UX?
  7. 7. Please askquestions
  8. 8. 1. On Device
  9. 9. Images - ProsEasy to get onto any phoneEasy to get rapid feedbackTaking photos of sketches with your phonePerfect for hallway testingRapid auto-ethnography
  10. 10. Images - ConsNo intelligenceRestrictive interaction with end users - need to teachthem to swipe between screeensAbove the fold onlyNot a great workflowIssues with order of screens and re-work
  11. 11. Keynotopia - ProsRelatively easy to set upClickable PDF to set up task flowsCan create task lists from index screenWorks offlineiPhone & iPad
  12. 12. Keynotopia - ConsPuts a slight white surround on the imageNo landscape for iPad (yet?)Doesn’t support longer pagesTouchspots can be odd
  13. 13. Interface - ProsEdit-in-PlaceSee and use immediatelyFolders for usability tasksAvailable for iPhone & iPadLibrary of native controlsWorks offline
  14. 14. Interface - ConsLaborious...“Live preview mode has been REMOVED from thisupdate due to App Store & SDK restriction.” So youneed to go via XCodeNo ability to design an iPhone App on the iPadDoesn’t have a desktop app equivalent
  15. 15. Prototypes - ProsFast and easy to do on computerChange the linking within the applicationCan use any images (most common formats)Upload to website for access via mobile web
  16. 16. Prototypes - ConsDoesn’t allow for longer screensPuts it’s own Carrier bar at the topYou can’t reposition the imageNeed internet accessMac Only
  17. 17. iWeb - ProsNo prescriptive workflowQuick to create mockupsEasy to link elementsSet canvas size for deviceAdd HTML for interactivitySet ViewPort, FullScreen, Offline
  18. 18. iWeb - ConsiWeb sucks to useCan’t really get into the guts of thingsNot a great prototyping tool (workflow integration)Offline mode (unless you hack the code)Getting it right is harder than you thinkMac only (obviously)
  19. 19. BluePrint - OverviewDrag and dropPredefined widgetsConfigurableRun on tabletExport to PDF/PNG
  20. 20. BluePrint - ProsCreate visually rich iPhone prototypesSimulate most native iOS featuresQuickly configure highly customisable interfaceLink and rearrange screens rapidly (click paths)Pretty straightforward
  21. 21. BluePrint - ConsAll done within the iPad AppPoor exporting capabilityDoesn’t fit within (my) existing workflowPotentially higher fidelity than you require at first (?)Slow performance on prototypesNo visual feedback on interactions (user issues)
  22. 22. Flowella - Quick Video
  23. 23. Flowella - ProsNokia documentation and forumsSimple image based toolsSketching prototypesVisualise click pathsSet canvas size- Omnigraffle vs iWebDid I say simple yet?
  24. 24. Flowella - ConsTheoretically restricted to Nokia devicesWidget or Flash Lite output- Limited device supportLimited interactivityAir! (difficult to integrate into workflow)
  25. 25. AppCooker - OverviewHighly sophisticated iOS on-device prototyping tools
  26. 26. AppCooker - ProsLots of different bells and whistlesTries to help developers create better designs (advice)Highly customisableGesture supportOverview of screens, visualise click paths etc.Test with users quickly in iOS devicesEasily share designs with observers
  27. 27. AppCooker - ConsDesigning on the iPad isn’t idealNot a “rapid” prototyping toolLacks a comprehensive iOS library (vis-a-vis Blueprint)Over-cooked - not focused enough on design tasksLack of visual feedback
  28. 28. [Redacted]
  29. 29. DIY
  30. 30. What do you use?
  31. 31. 2. Watch
  32. 32. LiveView
  33. 33. Video Out
  34. 34. Fixed Camera
  35. 35. Eye Tracker
  36. 36. Our Mobile Camera
  37. 37. Bob’s In-store Research Thanks to @Hello_Bob_Burns!
  38. 38. 3. Case Study
  39. 39. Tablet Prototype TestingFuture touch screen ATMRapidly generate multiple interactive prototypesTest on iPadShare screenCapture user inputGenerate analytics
  40. 40. Various ToolsOver-the-shoulder videoPicture in place videoAxure (Omnigraffle, iWeb, Stiched images)DropboxSilverbackAtomic WebLoop11
  41. 41. Prototyping Setup #1 Ceiling and over the iPad: User interacts directly with Analytics: User click paths and shoulder mounted video 1 prototype running in Atomic browser 3 task conversion captured captureObservation room VGA output to 60” monitor Analytics and task monitoring WWW environment Loop 11 Loop11 User PiP capture iPad screen sharing: VGA out of iPad 4 screen for stakeholder observation HTML5 ATM simulation prototypes Mobile Experience Mobile Experience PiP Recording: Direct user 2 video capture (portrait)
  42. 42. Prototyping #1: Non-Web iPad Control: iPad directly controls and Prototype: Served directly Ceiling mounted video 2 mimics laptop screen which is showing an 1 from laptop capture of studio ATM simulation within an iPad layout VGA output toObservation room 60” monitor Local install: HTML5 ATM simulation prototypes Mobile Experience Mobile Experience Click-based screen VNC screen interaction recording share interaction User PiP capture Screen sharing: VGA out from laptop Capture: User clicks, PiP, tasks and 4 for stakeholder observation 3 highlights are capture in recordings
  43. 43. Nice SetupDropboxLoop 11Silverback (Morae for remote collaboration)VNCAtomic (Video Out)Video Muxer (?)Axure (with jiggery pokery) --> insert alternative please
  44. 44. Thanks!

×