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

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

Disclaimer

2

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

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 3

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 4

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 5

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

About Me

6

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

Mobile is Everywhere

8

[photo from last year’s MAX before the sneaks with everyone holding up their devices]

Mobile is Everywhere

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 9

Mobile First

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 10

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 11

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

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)

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 13

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 14

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 15

Technical Prototype

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 16

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 17

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 18

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 19

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

Prototype Spectrum

21

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

Low Fidelity Prototyping Tools

22

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

Low Fidelity Prototyping

Quick to develop Allows for explorations of ideas Can be more difficult to conduct user

studies Zero coding!

23

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 24Source: http://usereccentric.com/entries/000333.html

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

Device Central

25

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 26

Emulator Device

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

Adobe on Android

27

Flash Player 10.1 for Android

AIR for Android

Available onothe Android Market(for selected devices)

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

Medium Fidelity Prototyping Tools

28

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

Medium Fidelity Prototyping

More “real” user experience Longer design time Longer development time Some level of programming “Golden Path” / Slideshow

29

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 30

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

Fireworks Prototype Demo

31

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

Add a little <meta> to your life

32

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

High Fidelity Prototyping Tools

33

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

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

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

Flash Prototyping Demo

35

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 36

So what canPrototyping

solve?

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 37Data based on respective products published technical specifications

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

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

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

Bitmaps vs. Vectors

39

Bitmap Vector

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

Touch Targets

40

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

Touch Targets

41

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

Screen Orientation

42

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

Ergonomics

43

You are holding it wrong ;)

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

Ergonomics

44

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

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

“Hero” – Flex Mobile

45

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

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

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 47

PrototypingPitfalls

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 48

“It is a Fidelity Trap”

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 49

“Looks Done to me! Ship IT!”

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

Prototyping: A Practitioner's Guide

50

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

Resources

51

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 52

A few guidelines for better

mobile experiences…

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

Design Tips

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

53

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

Layout Tips

Use screen space efficiently Condense information Mobilize, don't miniaturize

54

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

Content Tips

Optimize lists Minimize scrolling Minimize Typing Large hit areas Simple images Readable text

55

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

Hardware Tips

Varied screen sizes Conform to the platform Varied input hardware Conserve power

56

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 58

Q&A

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

Contact Me

chris.griffith@gmail.com

Twitter: @chrisgriffith

Blog: http://chrisgriffith.wordpress.com/

59

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 60

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

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.