mobile apps: ui & ux
Post on 18-Dec-2014
1.665 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
top related