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

1. Tools & Methods for
Mobile Prototyping
Oliver Weidlich & Rod Farmer
Co-Founders
Mobile Experience
26th August 2011 @ UX Australia

2. @oliverw
@rodfarmer

3. 1. On Device

4. 2. Watch

5. 3. Case Study

6. Who’s worked on
mobile UX?

7. Please ask
questions

8. 1. On Device

10. Images - Pros
Easy to get onto any phone
Easy to get rapid feedback
Taking photos of sketches with your phone
Perfect for hallway testing
Rapid auto-ethnography

11. Images - Cons
No intelligence
Restrictive interaction with end users - need to teach
them to swipe between screeens
Above the fold only
Not a great workflow
Issues with order of screens and re-work

17. Keynotopia - Pros
Relatively easy to set up
Clickable PDF to set up task flows
Can create task lists from index screen
Works offline
iPhone & iPad

18. Keynotopia - Cons
Puts a slight white surround on the image
No landscape for iPad (yet?)
Doesn’t support longer pages
Touchspots can be odd

21. Interface - Pros
Edit-in-Place
See and use immediately
Folders for usability tasks
Available for iPhone & iPad
Library of native controls
Works offline

22. Interface - Cons
Laborious...
“Live preview mode has been REMOVED from this
update due to App Store & SDK restriction.” So you
need to go via XCode
No ability to design an iPhone App on the iPad
Doesn’t have a desktop app equivalent

25. Prototypes - Pros
Fast and easy to do on computer
Change the linking within the application
Can use any images (most common formats)
Upload to website for access via mobile web

26. Prototypes - Cons
Doesn’t allow for longer screens
Puts it’s own Carrier bar at the top
You can’t reposition the image
Need internet access
Mac Only

27. iWeb - Pros
No prescriptive workflow
Quick to create mockups
Easy to link elements
Set canvas size for device
Add HTML for interactivity
Set ViewPort, FullScreen, Offline

28. iWeb - Cons
iWeb sucks to use
Can’t really get into the guts of things
Not a great prototyping tool (workflow integration)
Offline mode (unless you hack the code)
Getting it right is harder than you think
Mac only (obviously)

29. BluePrint - Overview
Drag and drop
Predefined widgets
Configurable
Run on tablet
Export to PDF/PNG

30. BluePrint - Pros
Create visually rich iPhone prototypes
Simulate most native iOS features
Quickly configure highly customisable interface
Link and rearrange screens rapidly (click paths)
Pretty straightforward

31. BluePrint - Cons
All done within the iPad App
Poor exporting capability
Doesn’t fit within (my) existing workflow
Potentially higher fidelity than you require at first (?)
Slow performance on prototypes
No visual feedback on interactions (user issues)

32. Flowella - Quick Video

33. Flowella - Pros
Nokia documentation and forums
Simple image based tools
Sketching prototypes
Visualise click paths
Set canvas size
- Omnigraffle vs iWeb
Did I say simple yet?

34. Flowella - Cons
Theoretically restricted to Nokia devices
Widget or Flash Lite output
- Limited device support
Limited interactivity
Air! (difficult to integrate into workflow)

35. AppCooker - Overview
Highly sophisticated iOS on-device prototyping tools

36. AppCooker - Pros
Lots of different bells and whistles
Tries to help developers create better designs (advice)
Highly customisable
Gesture support
Overview of screens, visualise click paths etc.
Test with users quickly in iOS devices
Easily share designs with observers

37. AppCooker - Cons
Designing on the iPad isn’t ideal
Not a “rapid” prototyping tool
Lacks a comprehensive iOS library (vis-a-vis Blueprint)
Over-cooked - not focused enough on design tasks
Lack of visual feedback

38. [Redacted]

39. DIY

40. What do you use?

41. 2. Watch

42. LiveView

43. Video Out

44. Fixed Camera

45. Eye Tracker

46. Our Mobile Camera

47. Bob’s In-store Research
Thanks to @Hello_Bob_Burns!

48. 3. Case Study

49. Tablet Prototype Testing
Future touch screen ATM
Rapidly generate multiple interactive prototypes
Test on iPad
Share screen
Capture user input
Generate analytics

50. Various Tools
Over-the-shoulder video
Picture in place video
Axure (Omnigraffle, iWeb, Stiched images)
Dropbox
Silverback
Atomic Web
Loop11

51. 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
capture
Observation 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)

52. 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 to
Observation 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

53. Nice Setup
Dropbox
Loop 11
Silverback (Morae for remote collaboration)
VNC
Atomic (Video Out)
Video Muxer (?)
Axure (with jiggery pokery) --> insert alternative please

54. Thanks!