why android first
DESCRIPTION
Designing for multiplatform is a nightmare. Even if the three main OS speak almost the same language, they actually speak three different lingos.Enhancers will showcase an optimal workflow – starting with Android Material – to minimize effort and variations, keeping the user experience (UX) great along all platforms.TRANSCRIPT
Why android first?
Interaction design
Service design
Digital strategies
Content marketing
Brand architecture
User experience design, the Enhancers way
enhancers.it
Problem understanding and vision
Validation (usability testing)
Integration
(interface description, hi-fi prototype, detailed implementation report)
Visual design
(look&feel)
Wireframing
(navigation tree and content list)
Information architecture (UX pattern selections,
card sorting)
Concept design
(sketch and ideas list)
Design Prototyping Development
Prototype
(InVision, Briefs or HTML5 )
iterations
Development
(coding or supporting to code, debugging,
launch on line)
Formative usability (painpoints and clients’needs)
Desk research (trend analysis)
Field research (insights list and
opportunity mapping)
A comprehensive UI approach
enhancers.it
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
Clients: long-term relationships
enhancers.it
Context
iOS Windows PhoneAndroid Others
Market share per OS (4Q 2014) - Worldwide
19.7%
76.6%
2.8% 0,9%
http://www.idc.com/getdoc.jsp?containerId=prUS24676414
iOS Windows PhoneAndroid Others
Market share per OS (dec 2014) - Italy
18.3%
67.3%
12.7%
1.7%
http://www.kantarworldpanel.com/global/smartphone-os-market-share/
HEAT MAP
NY OS share
HEAT MAP
android share
HEAT MAP
iOS share
Strategies
OS agnostic UI - Skype
iOS Windows PhoneAndroid
OS agnostic UI - Spotify
iOS Windows PhoneAndroid
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
iOS Windows PhoneAndroid
OS compliant UI - Whatsapp
iOS Windows PhoneAndroid
_The most expensive to design and maintain
_Best user experience for traditional users
_Reasonable branding
_Good for highly task-oriented app (effectiveness)
OS compliant UI
enhancers.it
Hybrid - Instagram
iOS Windows PhoneAndroid
Hybrid - Facebook
iOS Windows PhoneAndroid
_Reduced effort 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
Hybrid
enhancers.it
Approach
Flat - convergent, but not the same
_Typography
_Grid layout
_Colorful
_Motion
iOS Windows PhoneAndroid
Navigation drawer CardsCompletely flat UI
Why Android first? Because Material
Button for the main action Typographic pop upBack button (even if not necessary)
Material design
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.
360 px / 9
640 px / 16 568 px / 16Android iOS
320 px / 9
Process
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
12:00
Messages
12:00
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 different X-height and so different dimensions. Same sentences in Android take a certain width, but in
iOS and Windows Phone take a different one. If you use your brand font, you don’t 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 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.
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.
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.
iOS Windows PhoneAndroid
Process
Use your icon system, not OS icons
Don’t waste time by changing three times all the icons.
iOS Windows PhoneAndroid
Process
Use your brand palette
Use colors that are different from those used in each OS.
iOS Windows PhoneAndroid
Process
Use floating button for the main actions and convert it into fixed bottom button for iOS and in action bar in Windows Phone
News
12:00
News
9:41 AMTIM
enhancers.it
