Experience & Design in the Mobile World
User Interface and Experience Design
Nathan Freitas, Oliver+Coady
nathan@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 • Vibration
• “Click” Tap via Touch (or Stylus) • Sound / Music
• Wheel or Trackball • Wireless Network Coverage
• GPS or Network Location • Environment Lighting
• Accelerometer Motion • Multitouch and Gestures
• Orientation / Compass / Altitude • 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 message
directions, scores, stocks, weather...
60 minute = long, in-depth interaction while
relaxing, wasting time or on a train or plane
networked game, writing / reading / browsing, movies, podcasts,
project / finance management

Casual
Dice Flashlight
Game Utility
RPG Banking
Serious

What Would Fisher Price Do?
Easy, Fun, Instant Feedback, Limited Choices

12 Myths of Mobile User-Interface Design
• Users want power and aesthetics. • Mobile devices will essentially be
Features are everything phones, organizers, or combinations,
with maybe music/video added on
• What we really need is a Swiss army
knife • The industry is converging on a UI
standard
• 3G is here!
• Highly usable systems are just
• Focus groups and other traditional around the corner
market analysis tools are the best
way to determine user needs • One underlying operating system will
dominate
• If it works in New York, it will work
anywhere • Mobile devices will be free-or nearly
free
• The killer app will be games, --er, no,
I mean, nightlife, or gps.... uh... • 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 While I am shopping at a store,
open happy hours nearby so I I want to be able to find out if I
can save money can get it cheaper online
I want to be able to poll my I am walking to get fast food
friends for advice at any moment and I’d really like my lunch to
be ready when I get there
As I go for a run, I want to
The camera should wait until
know how my pace is
my hand is still and the shot is
compared to others my age.
level before the picture is taken.

Think About Where & When
• At the office, during a meeting • At a sales meeting, for a $$$ deal
• By a parent, during breakfast • By a single parent, making dinner
• In the backseat of a taxi • In the drivers seat of a semi-truck
• By a doctor in a hospital • By a doctor in Rwanda
• By a soldier at a base • 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
Android
iPhone
Blackberry

Browser-based / Multi-Device
Opera /
XHTML
Android
iPhone
Blackberry

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)
Content Drop-down Menu
Splash Screen

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.com
blog: http://openideals.com