Creating Compelling Mobile User Experiences: What You Need to Know

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

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

3

4

5

About Me 6

7 Adobe MAX unconference Adobe MAX 2010 My Personal Recent Mobile Applications

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

9 Mobile First

10

11

What is prototype? 12 …incomplete versions of the so ware program being developed. A prototype typically implements only a small subset of the features of the eventual program, and the implementation may be completely diﬀerent from that of the eventual product. (h p://en.wikipedia.org/wiki/So ware_prototyping)

13

14

15 Technical Prototype

16

17

18

19

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

24 Source: h p://usereccentric.com/entries/000333.html

Device Central 25

26 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

30

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

36 So what can Prototyping solve?

37 Data based on respective products published technical speci cations

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 speci cations

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

47 Prototyping Pitfalls

48 “It is a Fidelity Trap”

49 “Looks Done to me! Ship IT!”

Prototyping: A Practitioner's Guide 50

Resources 51

52 A few guidelines for be er 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

A few guidelines for better mobile experiences… §  Very short learning curve §  Use screen space efficiently §  Large hit areas §  Simple images §  Optimize lists §  Minimize scrolling §  Varied screen sizes §  Readable text §  Interruptible §  Fast 57 §  Condense information §  Minimize Downloads §  Minimize Typing §  Mobilize, don't miniaturize §  Look beautiful §  Entertain the user §  Varied input hardware §  Conform to the platform §  Conserve power

58 Q&A

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

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

Creating Compelling Mobile User Experiences: What You Need to Know

Creating Compelling Mobile User Experiences: What You Need to Know

More Decks by Chris Griffith

Other Decks in Technology

Featured

Transcript