Mobile Apps�

UI & UX�

Mobile Retail �& Brand �Masterclass � 24 April 2012 - Munich

? Usability

User Experience

Definition „Usability“

✦  degree of difficulty: �

intuitive handling (ease of use) �

and learnability (user adoption)

✦  also: user-friendliness

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.

Definition „User Experience“

✦  Individual, subjective, personally „felt“

user‘s impression of a product.

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.

Definition „User Experience“

✦  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, finger touch and

gestures, etc.

Definition „User Interface“

User Experience

✦  Usability + User Interface + their consistency

✦  Functionalities + added value

✦  Individual expectations

✦  Components of communication

✦  Fun factor (gamification)

✦  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,

insufficient definition of style guides

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

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

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 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.

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 figure �

ⱷ (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 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.

Design Guides

✦  iOS:

http://bit.ly/iOSDesignGuides

✦  Android:

http://bit.ly/AndroidDesignGuides

✦  Windows Phone:

http://bit.ly/WP7DesignGuides

Thank You �very much J

André Haase Franz Haslbeck

Composed by: Franz Haslbeck, André Haase ���Presented by: Franz Haslbeck