mobile apps: ui & ux

Download Mobile Apps: UI & UX

Post on 18-Dec-2014




2 download

Embed Size (px)


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. Mobile Retail & Brand Masterclass 24 April 2012 - MunichMobile AppsUI & UX
  • 2. ?Usability User Experience
  • 3. Definition Usability degree of difculty: intuitive handling (ease of use) and learnability (user adoption) also: user-friendliness
  • 4. Definition UsabilityQuality of user interaction with a system.User interface is dened as user-friendly, if it is simple andintuitive, suits for use case and user scenario.This includes methods of measurability:practicability (suitable), efciency (quick),accessibility (barrier-free), typography, ergonomics, etc.Only since 2010 there are international common standardsand rules for measuring usability.
  • 5. Definition User Experience Individual, subjective, personally felt users impression of a product.
  • 6. Definition User ExperienceCombination 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 imposedstandards 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 InterfaceHuman-machine interaction (HMI) interfacebased on and optimized for human capabilities and needs,enabling the user to control and operate a machine or systemwith mutual input / output interpretation. This includes graphical design, display (visual), microphone andspeakers (audio), human-device interface (HDI) accessories likekeyboard, mouse or pen, haptic feedback, nger touch andgestures, etc.
  • 9. User Experience Usability + User Interface + their consistency Functionalities + added value Individual expectations Components of communication Fun factor (gamication) 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, insufcient denition of style guides
  • 11. UX: Donts Request user input for self-evident or unnecessary information (waiver of prell) 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: ExamplesPositive (full screen game iOS) Positive (full scrren game WP7)
  • 14. UX: ExamplesNegative (iOS Settings) Positive (iOS Settings)
  • 15. UX: ExamplesNegative (iOS App) Positive (iOS App)
  • 16. UX: ExamplesNegative (Android App) Positive (Android App)
  • 17. UX: ExamplesNegative (WP7 App) Positive (WP7 App)
  • 18. UX: ExamplesPositive (iOS App) Positive (WP7 App)
  • 19. UX: ExamplesPositive (iOS App) Positive (WP7 App)
  • 20. UX: ContextUX may also signicantly depend on context.E.g.: a banking app must not be playful orhiggledy-piggledy, but serious and lucid,the design must suit to the banking and securityuse 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: Android: Windows Phone:
  • 26. Thank Youvery much J Franz Haslbeck Andr Haase Composed by: Franz Haslbeck, Andr Haase Presented by: Franz Haslbeck