Experience & Design in the Mobile World

User Interface and Experience DesignNathan Freitas, Oliver+Coadynathan@olivercoady.com

When developing software for the web or a desktop computer, you only need to consider the mouse and the keyboard.

With a mobile device, you must take into account the entire world around you (and your users).

Possible User Input Sources for a Mobile Device

• Keyboard

• “Click” Tap via Touch (or Stylus)

• Wheel or Trackball

• GPS or Network Location

• Accelerometer Motion

• Orientation / Compass / Altitude

• Vibration

• Sound / Music

• Wireless Network Coverage

• Environment Lighting

• Multitouch and Gestures

• Device Security / Loss

Three Device Classes

Mobile devices can be categorized by their physical dimensions, network connectivity,

software capabilities and more

Low: WAP / SMS

text NATHANF to 41411

(my SMS business card)

Medium: Java / J2ME / Symbian

High: Apple iPhone, Android, Windows Mobile

User Experience, Desires & Dreams

Think about the “60 second” use case...

and then think about the “60 minute” use case.

60 second = quick reference, lookup or messagedirections, scores, stocks, weather...

60 minute = long, in-depth interaction while relaxing, wasting time or on a train or planenetworked game, writing / reading / browsing, movies, podcasts, project / finance management

Casual

Serious

UtilityGame

Dice

RPG

Flashlight

Banking

What Would Fisher Price Do?

Easy, Fun, Instant Feedback, Limited Choices

12 Myths of Mobile User-Interface Design

• Users want power and aesthetics. Features are everything

• What we really need is a Swiss army knife

• 3G is here!

• Focus groups and other traditional market analysis tools are the best way to determine user needs

• If it works in New York, it will work anywhere

• The killer app will be games, --er, no, I mean, nightlife, or gps.... uh...

• Mobile devices will essentially be phones, organizers, or combinations, with maybe music/video added on

• The industry is converging on a UI standard

• Highly usable systems are just around the corner

• One underlying operating system will dominate

• Mobile devices will be free-or nearly free

• Advanced data-oriented services are just around the corner

http://nickcowie.com/2008/revisited-12-myths-of-mobile-user-interface-design/

Create Your User Stories

I want to be able to find all the open happy hours nearby so I

can save money

While I am shopping at a store, I want to be able to find out if I

can get it cheaper online

I want to be able to poll my friends for advice at any moment

I am walking to get fast food and I’d really like my lunch to

be ready when I get there

As I go for a run, I want to know how my pace is

compared to others my age.The camera should wait until

my hand is still and the shot is level before the picture is taken.

Think About Where & When

• At the office, during a meeting

• By a parent, during breakfast

• In the backseat of a taxi

• By a doctor in a hospital

• By a soldier at a base

• At a sales meeting, for a $$$ deal

• By a single parent, making dinner

• In the drivers seat of a semi-truck

• By a doctor in Rwanda

• By a soldier, under fire

Simple Wireframing

Iterating with Paper

At some point, ink turns into pixels

Apple iPhone Human Interface Guidelines

http://developer.apple.com/iphone

Use Standard Buttons / Icons / Assets

Tools to Discuss & Download

Better Design through Stenciling

LWUIT: Make J2ME Sexier

Lightweight UI Toolkit aka “Swing for Mobile”

Xcode Interface Builder

DroidDraw

Application Case Studies

Web Portal -> Mobile Application

Browser-based / Multi-Device

Opera / XHTML

Blackberry

Android

iPhone

Browser-based / Multi-Device

Opera / XHTML

Blackberry

Android

iPhone

Geo Reporting Application

Form-based application with Multimedia Capture

Mobile Apps Connect to the Web

Also accessible via SMS, Twitter, VOIP/Telephone

http://coovents.com

Mobile Content Management System (CMS)

Splash Screen Content Drop-down Menu

In Summary

• Spend at least half your time thinking, drawing, designing and planning

• Don’t just design for the lowest common denominator

• Mouse Click != Finger Tap

• For Web -> Mobile, extract just the most useful bits of functionality

• Connectivity is Your Enemy

• and more?

Links

• Apple iPhone HIG: http://developer.apple.com/iphone

• Inauguration Report: http://npr.org/inaugurationreport

• Ultimate iPhone Stencil: http://graffletopia.com/stencils/413

• DroidDraw: http://www.droiddraw.org/

• J2ME LWUIT: https://lwuit.dev.java.net/

Thank You!

email: nathan@olivercoady.comblog: http://openideals.com