Mobile UX Tools & Methods for UX Australia 2011
Upcoming SlideShare
Loading in...5

Mobile UX Tools & Methods for UX Australia 2011



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

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



Total Views
Views on SlideShare
Embed Views



4 Embeds 480 409 69 1 1



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • Glad you enjoyed :-)
    Are you sure you want to
    Your message goes here
  • Really enjoyed the presentation and very interesting to see how the tools fit within your overall workflow.

    Check out FluidUI - - 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.

    Are you sure you want to
    Your message goes here
  • Brilliant analysis!! Thanks guys.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Mobile UX Tools & Methods for UX Australia 2011 Mobile UX Tools & Methods for UX Australia 2011 Presentation Transcript

  • Tools & Methods forMobile PrototypingOliver Weidlich & Rod FarmerCo-FoundersMobile Experience26th August 2011 @ UX Australia
  • @oliverw@rodfarmer
  • 1. On Device
  • 2. Watch
  • 3. Case Study
  • Who’s worked on mobile UX?
  • Please askquestions
  • 1. On Device
  • Images - ProsEasy to get onto any phoneEasy to get rapid feedbackTaking photos of sketches with your phonePerfect for hallway testingRapid auto-ethnography
  • 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
  • Keynotopia - ProsRelatively easy to set upClickable PDF to set up task flowsCan create task lists from index screenWorks offlineiPhone & iPad
  • Keynotopia - ConsPuts a slight white surround on the imageNo landscape for iPad (yet?)Doesn’t support longer pagesTouchspots can be odd
  • Interface - ProsEdit-in-PlaceSee and use immediatelyFolders for usability tasksAvailable for iPhone & iPadLibrary of native controlsWorks offline
  • 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
  • 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
  • Prototypes - ConsDoesn’t allow for longer screensPuts it’s own Carrier bar at the topYou can’t reposition the imageNeed internet accessMac Only
  • iWeb - ProsNo prescriptive workflowQuick to create mockupsEasy to link elementsSet canvas size for deviceAdd HTML for interactivitySet ViewPort, FullScreen, Offline
  • 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)
  • BluePrint - OverviewDrag and dropPredefined widgetsConfigurableRun on tabletExport to PDF/PNG
  • BluePrint - ProsCreate visually rich iPhone prototypesSimulate most native iOS featuresQuickly configure highly customisable interfaceLink and rearrange screens rapidly (click paths)Pretty straightforward
  • 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)
  • Flowella - Quick Video
  • Flowella - ProsNokia documentation and forumsSimple image based toolsSketching prototypesVisualise click pathsSet canvas size- Omnigraffle vs iWebDid I say simple yet?
  • Flowella - ConsTheoretically restricted to Nokia devicesWidget or Flash Lite output- Limited device supportLimited interactivityAir! (difficult to integrate into workflow)
  • AppCooker - OverviewHighly sophisticated iOS on-device prototyping tools
  • 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
  • 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
  • [Redacted]
  • DIY
  • What do you use?
  • 2. Watch
  • LiveView
  • Video Out
  • Fixed Camera
  • Eye Tracker
  • Our Mobile Camera
  • Bob’s In-store Research Thanks to @Hello_Bob_Burns!
  • 3. Case Study
  • Tablet Prototype TestingFuture touch screen ATMRapidly generate multiple interactive prototypesTest on iPadShare screenCapture user inputGenerate analytics
  • Various ToolsOver-the-shoulder videoPicture in place videoAxure (Omnigraffle, iWeb, Stiched images)DropboxSilverbackAtomic WebLoop11
  • 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)
  • 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
  • Nice SetupDropboxLoop 11Silverback (Morae for remote collaboration)VNCAtomic (Video Out)Video Muxer (?)Axure (with jiggery pokery) --> insert alternative please
  • Thanks!