Upload
oliver-weidlich
View
123
Download
4
Tags:
Embed Size (px)
DESCRIPTION
Rod Farmer & I delivered this presentation at UX Australia in August 2011
Citation preview
Oliver Weidlich & Rod FarmerCo-FoundersMobile Experience26th August 2011 @ UX Australia
Tools & Methods for Mobile Prototyping
@oliverw@rodfarmer
1. On Device
2. Watch
3. Case Study
Who’s worked on mobile UX?
Please ask questions
1. On Device
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
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
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
Keynotopia - Cons
Puts a slight white surround on the image
No landscape for iPad (yet?)
Doesn’t support longer pages
Touchspots can be odd
Interface - Pros
Edit-in-Place
See and use immediately
Folders for usability tasks
Available for iPhone & iPad
Library of native controls
Works offline
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
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
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
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
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)
BluePrint - Overview
Drag and drop
Predefined widgets
Configurable
Run on tablet
Export to PDF/PNG
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
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)
Flowella - Quick Video
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?
Flowella - Cons
Theoretically restricted to Nokia devices
Widget or Flash Lite output
- Limited device support
Limited interactivity
Air! (difficult to integrate into workflow)
AppCooker - Overview
Highly sophisticated iOS on-device prototyping tools
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
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
[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 Testing
Future touch screen ATM
Rapidly generate multiple interactive prototypes
Test on iPad
Share screen
Capture user input
Generate analytics
Various Tools
Over-the-shoulder video
Picture in place video
Axure (Omnigraffle, iWeb, Stiched images)
Dropbox
Silverback
Atomic Web
Loop11
Prototyping Setup #1
Loop11
PiP Recording: Direct user video capture (portrait)2
iPad: User interacts directly with prototype running in Atomic browser1
Mobile Experience
VGA output to 60” monitorObservation room
HTML5 ATM simulation prototypes
User PiP capture
Analytics and task monitoring environmentWWW
iPad screen sharing: VGA out of iPad screen for stakeholder observation4
Ceiling and over the shoulder mounted video capture
Analytics: User click paths and task conversion captured3
Mobile Experience
Loop 11
Prototyping #1: Non-Web
Prototype: Served directly from laptop1
iPad Control: iPad directly controls and mimics laptop screen which is showing an ATM simulation within an iPad layout
2
Mobile Experience
VGA output to 60” monitorObservation room
Local install: HTML5 ATM simulation prototypes
Screen sharing: VGA out from laptop for stakeholder observation4
Ceiling mounted video capture of studio
Capture: User clicks, PiP, tasks and highlights are capture in recordings3
User PiP capture
VNC screen share interaction
Click-based screen interaction recording
Mobile Experience
Nice Setup
Dropbox
Loop 11
Silverback (Morae for remote collaboration)
VNC
Atomic (Video Out)
Video Muxer (?)
Axure (with jiggery pokery) --> insert alternative please
Thanks!