Designing apps for Android

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

App Builders Switzerland 2016

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.

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!

Overview

• Material Design - The basics

• Expressing your brand

• Examples of successfully branded material design apps.

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.

Environment

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.

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.

Paper

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

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

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.

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.

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.

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.

Visual design

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

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

Motion

Use animations to transform your user interface between different states

Brings meaning and helps user understand what is going on.

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

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.

Expressing your brand

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

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.

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

Android Stock apps: Calendar, Contacts, Email

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

Android Stock apps: Calendar, Contacts, Email

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.

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.

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.

Icon style

TapDeckHangoutsFabulous B&H

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

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..

Icon style

TapDeckHangoutsFabulous B&H

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

Property Phonebook Switzerland

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

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.

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.

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.

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

Examples

aNotification

Design by Nordic Usability

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

Starbucks app Playstore

Starbucks Starbucks green as accent color.

Starbucks app Playstore

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

B&H app Playstore

B&HMaterial style app for shopping cameras etc.

B&H app Playstore

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

Trello App Designed by Trello

Trello

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.

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

Thank you!

Lorica Claesson UX Design Consultant lorica@nordicusability.com @lorica