Why android rst?
User experience design, the Enhancers way
Interaction
design
Brand
architecture
Digital
strategies
Service
design
enhancers.it
Content
marketing
A comprehensive UI approach
Problem understanding
and vision
Design
Prototyping
Development
Formative usability
Concept design
Prototype
Integration
(painpoints and
clientsneeds)
(sketch and ideas list)
(InVision, Briefs or
HTML5 )
(interface description,
hi- prototype, detailed
implementation report)
Information architecture
Desk research
(trend analysis)
Field research
(UX pattern selections,
card sorting)
Wireframing
Validation
(navigation tree
and content list)
(usability testing)
(insights list and
opportunity
mapping)
Visual design
(look&feel)
enhancers.it
iterations
Development
(coding or supporting
to code, debugging,
launch on line)
Clients: long-term relationships
Interaction
design
Service
design
Digital
strategies
Brand
architecture
Content
marketing
IKEA
IKEA
Deltatre
Serisystem
Mattioli
illy
iShopps
illy
Equinoxe
IeL
Audi
ATS
Avon
Cecomp
illy
Azimut Yachts
Kairos
Esselunga
Axant
Serisystem
Esselunga
Fideuram
Mattioli
Glossom
Esselunga
Billa
illy
IeL
IeL
Equinoxe
Laterza
Telecom
Equinoxe
4Timing
SeriJakala
ATAC
Logitech
Samsung
Bomboogie
enhancers.it
Context
Market share per OS (4Q 2014) - Worldwide
76.6%
19.7%
Android
iOS
2.8%
0,9%
Windows Phone
Others
http://www.idc.com/getdoc.jsp?containerId=prUS24676414
Market share per OS (dec 2014) - Italy
67.3%
18.3%
12.7%
1.7%
Android
iOS
Windows Phone
Others
http://www.kantarworldpanel.com/global/smartphone-os-market-share/
HEAT MAP
NY OS share
HEAT MAP
android share
HEAT MAP
iOS share
Cross-platform development by framework
enhancers.it
Strategies
OS agnostic UI - Skype
Android
iOS
Windows Phone
OS agnostic UI - Spotify
Android
iOS
Windows Phone
OS agnostic UI
_Strong branding
_Reduced cost for design and maintenance
_Not optimized User experience
_Good for brand new markets and millennial users
_Common for apps owned by OS
(e.g. skype/microsoft or maps/google)
enhancers.it
OS compliant UI - Evernote
Android
iOS
Windows Phone
OS compliant UI - Whatsapp
Android
iOS
Windows Phone
OS compliant UI
_The most expensive to design and maintain
_Best user experience for traditional users
_Reasonable branding
_Good for highly task-oriented app (eectiveness)
enhancers.it
Hybrid - Instagram
Android
iOS
Windows Phone
Hybrid - Facebook
Android
iOS
Windows Phone
Hybrid
_Reduced eort to design and maintain
_Good user experience for traditional users
_Strong branding (brand icons, palette and fonts)
_Good for apps with standard behaviors for a large
audience
enhancers.it
Approach
Skeumorphism - divergent
enhancers.it
Flat - convergent, but not the same
_Typography
_Grid layout
_Colorful
_Motion
Android
iOS
Windows Phone
Why Android rst? Because Material
Completely at UI
Navigation drawer
Cards
Material design
Back button
(even if not necessary)
Button for the main action
Typographic pop up
Process
Begin from Android single
density artboard (360x640px)
Continue using single density artboards
for iOS and Windows Phone designs.
This to be consistent among all the OS
and to not change shapes and fonts
dimensions three times. You will save a
lot of time.
Using single density in your design
simplify the export of all the assets.
From single density you can export in
every format needed.
640 px / 16
360 px / 9
Android
320 px / 9
568 px / 16
iOS
Process
12:00
12:00
Use drawer menu as suggested
by Material Guidelines
Even if iOS mostly uses tab bar for its main
navigation and Windows Phone uses Panorama
Hub, drawer menu is a steady pattern for the
users experience in every OS.
News
Messages
Alvin Armstrong
Inbox
Favourited
Sent mail
Drafts
SETTINGS
HELP
TERMS & CONDITIONS
Process
Use your brand font, not OS fonts
OS fonts (Roboto for Android,
Helvetica Neue for iOS and Segoe UI
for Windows Phone) have dierent
X-height and so dierent
dimensions. Same sentences in
Android take a certain width, but in
iOS and Windows Phone take a
dierent one. If you use your brand
font, you dont have to change the
design three times. By using the
same font, your design will be more
consistent among all the OS.
Lorem ipsum dolor sit amet, consectetur
Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur.
adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur.
Android
iOS
Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur.
Windows Phone
Process
Use your icon system, not OS icons
Dont waste time by changing three times all the icons.
Android
iOS
Windows Phone
Process
Use your brand palette
Use colors that are dierent from those used in each OS.
Android
iOS
Windows Phone
Process
Build the contents on cards and
use tabs to organise it
enhancers.it
Process
Use oating button for the main
actions and convert it into xed
bottom button for iOS and in action
bar in Windows Phone
enhancers.it
12:00
News
TIM
9:41 AM
News
Thank you
Via Maria Vittoria 40bis
10123 Torino
011 046 12 57
[email protected]
