Mobile Retail      & Brand      Masterclass      24 April 2012 - MunichMobile Apps
?Usability  User  Experience
Definition „Usability“   degree of difficulty:    intuitive handling (ease of use)    and learnability (user adoption)  ...
Definition „Usability“Quality of user interaction with a system.User interface is defined as user-friendly, if it is simpl...
Definition „User Experience“    Individual, subjective, personally     „felt“ user‘s impression of a product.
Definition „User Experience“ Combination and interaction of anticipation & expectations, impressions, practical experience...
Definition „User Interface“   Interface of human-machine    interaction   also: UI =    graphical design and control con...
Definition „User Interface“Human-machine interaction (HMI) interfacebased on and optimized for human capabilities and need...
User Experience   Usability + User Interface + their consistency   Functionalities + added value   Individual expectati...
UX: Consistency   Inconsistency of control concept and    graphical design of mobile OS,    esp. BlackBerry, Symbian and ...
UX: Don‘ts   Request user input for self-evident or    unnecessary information (waiver of    prefill)   Violation of OS ...
UX: Do‘s   Consistent, clear and obvious structure   Intuitive controls (not requiring manuals)   Short distances for c...
UX: ExamplesPositive (full screen game iOS)   Positive (full scrren game WP7)
UX: ExamplesNegative (iOS Settings)   Positive (iOS Settings)
UX: ExamplesNegative (iOS App)   Positive (iOS App)
UX: ExamplesNegative (Android App)   Positive (Android App)
UX: ExamplesNegative (WP7 App)   Positive (WP7 App)
UX: ExamplesPositive (iOS App)   Positive (WP7 App)
UX: ExamplesPositive (iOS App)   Positive (WP7 App)
UX: ContextUX may also significantly depend oncontext.E.g.: a banking app must not be playful orhiggledy-piggledy, but ser...
UX: Context   App Store: app description and    pics   Information politics   Update frequency   Extensions: Social Pl...
Golden Ratio      Since ≈ 2400 years,      in mathematics and arts,      the Golden Ratio or Divine Proportion      applie...
Rule of Thirds       Every photographer knows that       desired objects are to be placed       in thirds.       Laying su...
Golden Ratio      Laying the Golden Ratio‘s helix      onto the display you can see      that empty spaces are also set   ...
Design Guides   iOS:http://bit.ly/iOSDesignGuides   Android:http://bit.ly/AndroidDesignGuides   Windows Phone:http://bi...
Thank Youvery much      Franz Haslbeck         André Haase Composed by: Franz Haslbeck, André Haase Presented by: Franz H...
Upcoming SlideShare
Loading in …5
×

Camerjam mobile marketing masterclass m academy

1,100 views

Published on

Mobile UI/UX presentation

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,100
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
21
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Camerjam mobile marketing masterclass m academy

  1. 1. Mobile Retail & Brand Masterclass 24 April 2012 - MunichMobile Apps
  2. 2. ?Usability User Experience
  3. 3. Definition „Usability“ degree of difficulty: intuitive handling (ease of use) and learnability (user adoption) also: user-friendliness
  4. 4. Definition „Usability“Quality of user interaction with a system.User interface is defined as user-friendly, if it is simpleand intuitive, suits for use case and user scenario.This includes methods of measurability:practicability (suitable), efficiency (quick),accessibility (barrier-free), typography, ergonomics,etc.Only since 2010 there are international common
  5. 5. Definition „User Experience“  Individual, subjective, personally „felt“ user‘s impression of a product.
  6. 6. Definition „User Experience“ Combination and interaction of anticipation & expectations, impressions, practical experience and evaluation (incl. both, usability and fun factor) of a product, system or service (or sum of them), involving or integrating context, with subjectively imposed standards and user estimation, fluctuating and varying.
  7. 7. Definition „User Interface“ Interface of human-machine interaction also: UI = graphical design and control concept
  8. 8. Definition „User Interface“Human-machine interaction (HMI) interfacebased on and optimized for human capabilities and needs,enabling the user to control and operate a machine orsystem with mutual input / output interpretation.This includes graphical design, display (visual),microphone and speakers (audio), human-device interface(HDI) accessories like keyboard, mouse or pen, hapticfeedback, finger touch and gestures, etc.
  9. 9. User Experience Usability + User Interface + their consistency Functionalities + added value Individual expectations Components of communication Fun factor (gamification) Context
  10. 10. UX: Consistency Inconsistency of control concept and graphical design of mobile OS, esp. BlackBerry, Symbian and Android e.g. on Android: allocation of „Back“ and „Menu“ buttons, insufficient definition of style guides
  11. 11. UX: Don‘ts Request user input for self-evident or unnecessary information (waiver of prefill) Violation of OS style guide Adopt or copy concepts from other OS Unacceptably long start and reaction
  12. 12. UX: Do‘s Consistent, clear and obvious structure Intuitive controls (not requiring manuals) Short distances for clicks Obvious Use Cases (smartphone vs. tablet !) and dedicated added value versus mobile web site Reasonable and complete standard settings
  13. 13. UX: ExamplesPositive (full screen game iOS) Positive (full scrren game WP7)
  14. 14. UX: ExamplesNegative (iOS Settings) Positive (iOS Settings)
  15. 15. UX: ExamplesNegative (iOS App) Positive (iOS App)
  16. 16. UX: ExamplesNegative (Android App) Positive (Android App)
  17. 17. UX: ExamplesNegative (WP7 App) Positive (WP7 App)
  18. 18. UX: ExamplesPositive (iOS App) Positive (WP7 App)
  19. 19. UX: ExamplesPositive (iOS App) Positive (WP7 App)
  20. 20. UX: ContextUX may also significantly depend oncontext.E.g.: a banking app must not be playful orhiggledy-piggledy, but serious and lucid,the design must suit to the banking andsecurity use case and claims.
  21. 21. UX: Context App Store: app description and pics Information politics Update frequency Extensions: Social Plugins, sharing Utilization of app ecosystem
  22. 22. Golden Ratio Since ≈ 2400 years, in mathematics and arts, the Golden Ratio or Divine Proportion applies to 2 quantities as follows: This ratio is the golden figure ⱷ (Phi) ≈ 1.618
  23. 23. Rule of Thirds Every photographer knows that desired objects are to be placed in thirds. Laying such a pattern of lines onto a WP7 display you can easily see that elements are placed in an optimal way.
  24. 24. Golden Ratio Laying the Golden Ratio‘s helix onto the display you can see that empty spaces are also set in an optimal way. Live Tiles are especially emphasized and the total composition looks balanced.
  25. 25. Design Guides iOS:http://bit.ly/iOSDesignGuides Android:http://bit.ly/AndroidDesignGuides Windows Phone:http://bit.ly/WP7DesignGuides
  26. 26. Thank Youvery much  Franz Haslbeck André Haase Composed by: Franz Haslbeck, André Haase Presented by: Franz Haslbeck

×