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!