Mobile Apps

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

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

André Haase Franz Haslbeck

Composed by: Franz Haslbeck, André

Haase

Presented by: Franz Haslbeck