Creating Compelling Mobile User Experiences

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Creating Compelling Mobile User Experiences:
What You Need to Know
Chris Griffith

Disclaimer
2
These opinions and thoughts are my own,
and may or may not reflect the opinions of
the company that I work for.

About Me
6

Mobile is Everywhere
8
 [photo from last year’s MAX before the sneaks with everyone holding up
their devices]
Mobile is Everywhere

Mobile First

What is prototype?
12
…incomplete versions of the software program being
developed. A prototype typically implements only a
small subset of the features of the eventual program,
and the implementation may be completely different
from that of the eventual product.
(http://en.wikipedia.org/wiki/Software_prototyping)

Technical Prototype

Prototype Spectrum
21

Low Fidelity Prototyping Tools
22

Low Fidelity Prototyping
 Quick to develop
 Allows for explorations of ideas
 Can be more difficult to conduct user
studies
 Zero coding!
23

Source: http://usereccentric.com/entries/000333.html

Device Central
25

Emulator Device

Adobe on Android
27
Flash Player 10.1 for Android
AIR for Android
Available onothe Android Market
(for selected devices)

Medium Fidelity Prototyping Tools
28

Medium Fidelity Prototyping
 More “real” user experience
 Longer design time
 Longer development time
 Some level of programming
 “Golden Path” / Slideshow
29

Fireworks Prototype Demo
31

Add a little <meta> to your life
32

High Fidelity Prototyping Tools
33

High Fidelity Prototyping
 Closer to reality
 Greater design requirements
 More development time
 Can serve as a reference platform for
other groups (Engineering, QA, Marketing)
34

Flash Prototyping Demo
35

So what can
Prototyping solve?

Data based on respective products published technical specifications

Pixels Per Inch (PPI)
Device Resolution PPI Physical
Nexus One/ HTC Incredible/
HTC Desire
800x480 254 3.7’
HTC EVO/ HTC Desire HD 800x480 217 4.3’
Droid/ Droid 2 854x480 265 3.7’
Droid X 854x480 240 4.3’
Samsung Galaxy S Vibrant 800x480 232 4.0’
iPhone 3GS and lower 480x320 163 3.5’
iPhone 4 960x640 326 3.5’
iPad 1024x768 132 9.7’
Galaxy Tab 1024x600 170 7’
38
Data based on respective products published technical specifications

Bitmaps vs. Vectors
39
Bitmap Vector

Touch Targets
40

Touch Targets
41

Screen Orientation
42

Ergonomics
43
You are holding it
wrong ;)

Ergonomics
44
How will they touch it?
 One Thumb?
 Two Thumbs?
 Pointer Finger?

“Hero” – Flex Mobile
45

Hero in a Nutshell: Mobile Application Development
Allow developers to create a single mobile project
that will run on multiple mobile environments
 UI components supporting touchscreen
interaction
 Application framework fitted with common
mobile UI patterns
 Interactive performance tuned for mobile
devices
46

Prototyping
Pitfalls

“It is a Fidelity
Trap”

“Looks Done to me!
Ship IT!”

Prototyping: A Practitioner's Guide
50

Resources
51

A few guidelines
for better
mobile experiences…

Design Tips
 Very short learning curve
 Fast
 Look beautiful
 Entertain the user
 Design In Context
53

Layout Tips
 Use screen space efficiently
 Condense information
 Mobilize, don't miniaturize
54

Content Tips
 Optimize lists
 Minimize scrolling
 Minimize Typing
 Large hit areas
 Simple images
 Readable text
55

Hardware Tips
 Varied screen sizes
 Conform to the platform
 Varied input hardware
 Conserve power
56

Q&A

Contact Me
chris.griffith@gmail.com
Twitter: @chrisgriffith
Blog: http://chrisgriffith.wordpress.com/
59

Turn in your Surveys for a chance to WIN!
 Hand in your surveys to the room
monitors
 One survey will be selected as a
winner of the Adobe Press e-book
Adobe Flash Platform from
Start to Finish: Working
Collaboratively Using Adobe
Creative Suite 5
 Winners will be notified via e-mail
at the end of each day
60

Creating Compelling Mobile User Experiences

More Related Content

What's hot

Viewers also liked

Similar to Creating Compelling Mobile User Experiences

More from Chris Griffith

Recently uploaded

Creating Compelling Mobile User Experiences

Editor's Notes