creating compelling mobile user experiences

Download Creating Compelling Mobile User Experiences

Post on 12-Jan-2015

1.317 views

Category:

Technology

2 download

Embed Size (px)

DESCRIPTION

These are the slides that I presented at the 2010 Adobe MAX conference. Explore the role of prototyping in designing and developing compelling mobile applications. We'll examine the forms that prototypes can take (from paper prototypes to rich, interactive simulations), their advantages and costs, and how Adobe tools can be used to create them. Then we'll walk through creating a user interface for a mobile application using Adobe Illustrator, Photoshop, Flash Professional, Flash Catalyst, and Flash Builder. This presentation also covers best practices for UX, as well as developer-focused tips and tricks.

TRANSCRIPT

  • 1. Creating Compelling Mobile User Experiences: What You Need to Know
    Chris Griffith

2. Disclaimer
2
These opinions and thoughts are my own, and may or may not reflect the opinions of the company that I work for.
3. 3
4. 4
5. 5
6. About Me
6
7. 7
My Personal Recent Mobile Applications
Adobe MAX unconference
Adobe MAX 2010
8. Mobile is Everywhere
8
[photo from last years MAX before the sneaks with everyone holding up their devices]
Mobile is Everywhere
9. 9
Mobile First
10. 10
11. 11
12. 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)
13. 13
14. 14
15. 15
Technical Prototype
16. 16
17. 17
18. 18
19. 19
20. 21. Prototype Spectrum
21
22. Low Fidelity Prototyping Tools
22
23. Low Fidelity Prototyping
Quick to develop
Allows for explorations of ideas
Can be more difficult to conduct user studies
Zero coding!
23
24. 24
Source: http://usereccentric.com/entries/000333.html
25. Device Central
25
26. 26
Emulator
Device
27. Adobe on Android
27
Flash Player 10.1 for Android
AIR for Android
Available onothe Android Market
(for selected devices)
28. Medium Fidelity Prototyping Tools
28
29. Medium Fidelity Prototyping
More real user experience
Longer design time
Longer development time
Some level of programming
Golden Path / Slideshow
29
30. 30
31. Fireworks Prototype Demo
31
32. Add a little to your life
32
33. High Fidelity Prototyping Tools
33
34. 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
35. Flash Prototyping Demo
35
36. 36
So what can
Prototyping solve?
37. 37
Data based on respective products published technical specifications
38. Pixels Per Inch (PPI)
38
Data based on respective products published technical specifications
39. Bitmaps vs. Vectors
39
Bitmap
Vector
40. Touch Targets
40
41. Touch Targets
41
42. Screen Orientation
42
43. Ergonomics
43
You are holding it wrong ;)
44. Ergonomics
How will they touch it?
One Thumb?
Two Thumbs?
Pointer Finger?
44
45. Hero Flex Mobile
45
46. 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. 47
Prototyping
Pitfalls
48. 48
It is a Fidelity Trap
49. 49
Looks Done to me! Ship IT!
50. Prototyping: A Practitioner's Guide
50
51. Resources
51
52. 52
A few guidelines
for better
mobile experiences
53. Design Tips
Very short learning curve
Fast
Look beautiful
Entertain the user
Design In Context
53
54. Layout Tips
Use screen space efficiently
Condense information
Mobilize, don't miniaturize
54
55. Content Tips
Optimize lists
Minimize scrolling
Minimize Typing
Large hit areas
Simple images
Readable text
55
56. Hardware Tips
Varied screen sizes
Conform to the platform
Varied input hardware
Conserve power
56
57. 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

58. Minimize Downloads 59. Minimize Typing 60. Mobilize, don't miniaturize 61. Look beautiful 62. Entertain the user 63. Varied input hardware 64. Conform to the platform 65. Conserve power