45
Designing apps for Android Lorica Claesson, UX Design Consultant @lorica Nordic Usability GmbH App Builders Switzerland 2016

Designing apps for Android

Embed Size (px)

Citation preview

Page 1: Designing apps for Android

Designing apps for AndroidLorica Claesson, UX Design Consultant@loricaNordic Usability GmbH

App Builders Switzerland 2016

Page 2: Designing apps for Android

Lorica Claesson UX Designer with a twist.Tech background, studied Computer Science and HCI. I can code, but don't normally. It is great for communication with developers!

Passion for streamlined mobile apps and Android. Pet project, Jiffy Time Tracker.

Based in Zürich, Switzerland.

Page 3: Designing apps for Android

Mobile platforms 2015Worldwide

22%

54%

24%

iOS Android Others

Switzerland

3%

39%58%

Worldwide and Switzerland data from 2015 statcounter.com

Android does really matter!

Page 4: Designing apps for Android

Overview

• Material Design - The basics

• Expressing your brand

• Examples of successfully branded material design apps.

Page 5: Designing apps for Android

Material Design Guidelines

Material design guidelines were created to make a cohesive experience across devices and platforms. The guidelines are based in reality, using paper, ink and shadows. But it is not skeumorphism.

Page 6: Designing apps for Android

Environment

Page 7: Designing apps for Android

The real world is predictable…

If you put a cup on a solid table, you expect it to sit there. Not fall through and hit the floor. Physical rules make a predictable environment.

Page 8: Designing apps for Android

Image from Material Design Spechttps://www.google.com/design/spec/

Material Environment is a 3D space about the thickness of your phone.

Height is 24 dp. The thickness of materials within it is 1dp.

Page 9: Designing apps for Android

Paper

Image from Material Design Spechttps://www.google.com/design/spec/

The material is called Paper. Can only be round or square.

Page 10: Designing apps for Android

Paper

Don’tImage from Material Design Spec

https://www.google.com/design/spec/

Paper can’t fold, because of the limited 24 dp height of the environment. Can’t move through other papers. Papers are solid, just like your table.

Page 11: Designing apps for Android

Ink

Image from Material Design Spechttps://www.google.com/design/spec/

Ink lives on paper and is bound by its edges. It is your content, can be Text, Color, Images. It has no thickness, and does not cast shadows.

Page 12: Designing apps for Android

Image from Material Design Spechttps://www.google.com/design/spec/

Height hierarchy, where your common UI elements go in the height. Empty space on upper levels, used for Dialogs, popups and menus.

Page 13: Designing apps for Android

Image from Material Design Spechttps://www.google.com/design/spec/

The 3D environment does not only look nice, it also adds important information about how things move. An element with a lower elevation will go behind one with higher elevation.

Page 14: Designing apps for Android

Visual design

Page 15: Designing apps for Android

At first glanceCommonly associated with material design: Toolbar of different heights The Floating Action Button (FAB) Bold colors

Page 16: Designing apps for Android

Color and theming Primary color used for toolbar Primary dark used for status bar Accent used for FAB, Tab selector, Checkboxes etc.

Page 17: Designing apps for Android

Motion

Use animations to transform your user interface between different states

Brings meaning and helps user understand what is going on.

Page 18: Designing apps for Android

Meaningful transitionsWe can use animations to show the transform the user interface from one state to the next.

Page 19: Designing apps for Android

Responsive interaction

Materials react when touched.

Buttons move up through the depth hierarchy to touch your finger when pressed.

Touchable areas react with ripples when touched.

Page 20: Designing apps for Android

Expressing your brand

Page 21: Designing apps for Android

Don’t let your branding interfere with the use of the product.

Page 22: Designing apps for Android

Don’t let your branding interfere with the use of the product.

People have a goal when using your app. Don’t let logos or other brand elements get in the way of that goal. It can ruin your user experience, forcing your users to move on.

That means, avoid placing branding elements in primary positions such as toolbar etc.

Page 23: Designing apps for Android

Toolbars on lower level say nothing explicit about which app you are in.

Android Stock apps: Calendar, Contacts, Email

Page 24: Designing apps for Android

Toolbars are used to provide contextually relevant information and to describe the content you are looking at

Android Stock apps: Calendar, Contacts, Email

Page 25: Designing apps for Android

Product icon

Here (Launcher) Here (Loading screen) But not here (In app).

The product icon is a product branding element that belongs on high level UI elements, as part of the journey to arrive in your app.

Page 26: Designing apps for Android

Product icon

Here (Launcher) Here (Loading screen) But not here (In app).

Think about shopping at Coop / Migros on a high street. Big signs outside, less inside.

Page 27: Designing apps for Android

Product icon

Here (Launcher) Here (Loading screen) But not here (In app).

Once the user is in your app, they know where they are, they don't just end up there by surprise.

Page 28: Designing apps for Android

Icon style

TapDeckHangoutsFabulous B&H

Material design style launcher icons. Distinct silhouette, Any shape.

Page 29: Designing apps for Android

Icon style

TapDeckHangoutsFabulous B&H

Can be a rounded rectangle, but shouldn't be just because you happen to have an app on another platform that requires it..

Page 30: Designing apps for Android

Icon style

TapDeckHangoutsFabulous B&H

Avoid text in icons, can be difficult to read and confusing to the user.

Page 31: Designing apps for Android

Property Phonebook Switzerland

Text in icons send mixed messages. It interferes with the product branding.

Page 32: Designing apps for Android

Property

For example, seeing “comparis.ch” in the journey to arriving in the Property app makes us associate that name with the app.

This is not a good thing for the user experience when trying to locate the app on a phone in a list sorted by App names. (The default behaviour of most Application drawers)

We look at c for comparis, but the app cant be found there… it’s under p for Property.

Page 33: Designing apps for Android

Give your app a distinct shape and symbol to increase recognizability.

Credit Suisse are communicating their brand clearly, but the product icons tiny text has to be read to tell the apps apart.

Opera is a great example of product icons that communicate brand consistently, yet are easy to tell apart from the other apps in the portfolio.

Page 34: Designing apps for Android

ColorUsing brand colors is a powerful way of expressing your brand in lower level UI’s without getting in the way of the users goals.

Page 35: Designing apps for Android

ColorColor examples borrowed from a few large web platforms in Switzerland. Scout24, Tutti, local.ch

Page 36: Designing apps for Android

Examples

Page 37: Designing apps for Android

aNotification

Design by Nordic Usability

Simple and efficient use of brand color and brand element for simple Product icon.

Page 38: Designing apps for Android

Starbucks app Playstore

Starbucks Starbucks green as accent color.

Page 39: Designing apps for Android

Starbucks app Playstore

Starbucks Powerful imagery as well as a custom font makes it feel very Starbucks.

Page 40: Designing apps for Android

B&H app Playstore

B&HMaterial style app for shopping cameras etc.

Page 41: Designing apps for Android

B&H app Playstore

B&HGreat use of color and Illustrations for categories. IMHO, even better than their webshop!

Page 42: Designing apps for Android

Trello App Designed by Trello

Trello

Page 43: Designing apps for Android

Trello App Designed by Trello

Trello Distinct Trello style. Especially for boards. Card on card is a no no in Material design. But it is central to the Trello experience, and it really works for them.

Remember, Material design are guidelines, not rules. If you need to break them, go ahead.

Page 44: Designing apps for Android

Useful resources

Material design guidelines http://www.google.com/design/spec

Material icons https://design.google.com/icons/

Android support library http://developer.android.com/tools/support-library

Page 45: Designing apps for Android

Thank you!

Lorica Claesson UX Design Consultant [email protected] @lorica