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 - Munich
Mobile Apps
UI & UX

2. ?
Usability
User
Experience

3. Definition „Usability“
✦ degree of difficulty:
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 defined as user-friendly, if it is simple and
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 standards
and rules for measuring usability.

5. Definition „User
Experience“
✦ Individual, subjective, personally „felt“
user‘s 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, fluctuating 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, finger touch and
gestures, etc.

9. User Experience
✦ Usability + User Interface + their consistency
✦ Functionalities + added value
✦ Individual expectations
✦ Components of communication
✦ Fun factor (gamification)
✦ 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,
insufficient definition of style guides

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 times

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
✦ 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 significantly 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 figure
ⱷ (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 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. 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