34
Why android rst?

why android first?

Embed Size (px)

Citation preview

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

Cross-platform development by framework

enhancers.it

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

Skeumorphism - divergent

enhancers.it

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

Build the contents on cards and use tabs to organise it

enhancers.it

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

Via Maria Vittoria 40bis 10123 Torino

011 046 12 57 [email protected]

Thank you