際際滷

際際滷Share a Scribd company logo

Mobile Apps: UI & UX

m-ACADEMY
m-ACADEMY

Mobile Apps: UI & UX presented by m-ACADEMY @ Mobile Retails & Brands Masterclass, 2012-04-24, Munich (ENG) @ CeBIT 2012, Hannover (GER) @ MobileCamp 2011, Hamburg (GER)

1 of 26
Download to read offline
Mobile Retail & Brand Masterclass 24 April 2012 - Munich Mobile Apps UI & UX
? Usability User Experience
Definition Usability degree of dif鍖culty: intuitive handling (ease of use) and learnability (user adoption) also: user-friendliness
Definition Usability Quality of user interaction with a system. User interface is de鍖ned as user-friendly, if it is simple and intuitive, suits for use case and user scenario. This includes methods of measurability: practicability (suitable), ef鍖ciency (quick), accessibility (barrier-free), typography, ergonomics, etc. Only since 2010 there are international common standards and rules for measuring usability.
Definition User Experience Individual, subjective, personally felt users impression of a product.
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, 鍖uctuating and varying.
Definition User Interface Interface of human-machine interaction also: UI = graphical design and control concept
Definition User Interface Human-machine interaction (HMI) interface based on and optimized for human capabilities and needs, enabling the user to control and operate a machine or system 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, haptic feedback, 鍖nger touch and gestures, etc.
User Experience Usability + User Interface + their consistency Functionalities + added value Individual expectations Components of communication Fun factor (gami鍖cation) Context
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, insuf鍖cient de鍖nition of style guides
UX: Donts Request user input for self-evident or unnecessary information (waiver of pre鍖ll) Violation of OS style guide Adopt or copy concepts from other OS Unacceptably long start and reaction times
UX: Dos 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 Landscape mode support
UX: Examples Positive (full screen game iOS) Positive (full scrren game WP7)
UX: Examples Negative (iOS Settings) Positive (iOS Settings)
UX: Examples Negative (iOS App) Positive (iOS App)
UX: Examples Negative (Android App) Positive (Android App)
UX: Examples Negative (WP7 App) Positive (WP7 App)
UX: Examples Positive (iOS App) Positive (WP7 App)
UX: Examples Positive (iOS App) Positive (WP7 App)
UX: Context UX may also signi鍖cantly depend on context. E.g.: a banking app must not be playful or higgledy-piggledy, but serious and lucid, the design must suit to the banking and security use case and claims.
UX: Context App Store: app description and pics Information politics Update frequency Extensions: Social Plugins, sharing Utilization of app ecosystem
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 鍖gure 皹 (Phi) 1.618
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.
Golden Ratio Laying the Golden Ratios 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.
Design Guides iOS: http://bit.ly/iOSDesignGuides Android: http://bit.ly/AndroidDesignGuides Windows Phone: http://bit.ly/WP7DesignGuides
Thank You very much J Franz Haslbeck Andr辿 Haase Composed by: Franz Haslbeck, Andr辿 Haase Presented by: Franz Haslbeck

More Related Content

Mobile Apps: UI & UX

  • 1. Mobile Retail & Brand Masterclass 24 April 2012 - Munich Mobile Apps UI & UX
  • 2. ? Usability User Experience
  • 3. Definition Usability degree of dif鍖culty: intuitive handling (ease of use) and learnability (user adoption) also: user-friendliness
  • 4. Definition Usability Quality of user interaction with a system. User interface is de鍖ned as user-friendly, if it is simple and intuitive, suits for use case and user scenario. This includes methods of measurability: practicability (suitable), ef鍖ciency (quick), accessibility (barrier-free), typography, ergonomics, etc. Only since 2010 there are international common standards and rules for measuring usability.
  • 5. Definition User Experience Individual, subjective, personally felt users impression of a product.
  • 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, 鍖uctuating and varying.
  • 7. Definition User Interface Interface of human-machine interaction also: UI = graphical design and control concept
  • 8. Definition User Interface Human-machine interaction (HMI) interface based on and optimized for human capabilities and needs, enabling the user to control and operate a machine or system 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, haptic feedback, 鍖nger touch and gestures, etc.
  • 9. User Experience Usability + User Interface + their consistency Functionalities + added value Individual expectations Components of communication Fun factor (gami鍖cation) Context
  • 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, insuf鍖cient de鍖nition of style guides
  • 11. UX: Donts Request user input for self-evident or unnecessary information (waiver of pre鍖ll) Violation of OS style guide Adopt or copy concepts from other OS Unacceptably long start and reaction times
  • 12. UX: Dos 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 Landscape mode support
  • 13. UX: Examples Positive (full screen game iOS) Positive (full scrren game WP7)
  • 14. UX: Examples Negative (iOS Settings) Positive (iOS Settings)
  • 15. UX: Examples Negative (iOS App) Positive (iOS App)
  • 16. UX: Examples Negative (Android App) Positive (Android App)
  • 17. UX: Examples Negative (WP7 App) Positive (WP7 App)
  • 18. UX: Examples Positive (iOS App) Positive (WP7 App)
  • 19. UX: Examples Positive (iOS App) Positive (WP7 App)
  • 20. UX: Context UX may also signi鍖cantly depend on context. E.g.: a banking app must not be playful or higgledy-piggledy, but serious and lucid, the design must suit to the banking and security use case and claims.
  • 21. UX: Context App Store: app description and pics Information politics Update frequency Extensions: Social Plugins, sharing Utilization of app ecosystem
  • 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 鍖gure 皹 (Phi) 1.618
  • 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. Golden Ratio Laying the Golden Ratios 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. Design Guides iOS: http://bit.ly/iOSDesignGuides Android: http://bit.ly/AndroidDesignGuides Windows Phone: http://bit.ly/WP7DesignGuides
  • 26. Thank You very much J Franz Haslbeck Andr辿 Haase Composed by: Franz Haslbeck, Andr辿 Haase Presented by: Franz Haslbeck