The eternal question: Android or iOS first?

Android, but take care of UX and follow

design guidelines

Piervincenzo Madeo 07.02.2014 - Turin

Piervincenzo Madeo

Founder of Eyeonplay http://eyeonplay.com

User Experience Specialist of Life Interaction http://life-interaction.com

Google Developer Live Italia - Android UX http://developersitalia.blogspot.it/

Startupper and Android enthusiast

First challenge in the mobile app market

A REAL TIME PLATFORM FOR FOOTBALL lovers

create game track events share match report

Let’s talk about mistakes!

iOS first

Not designed for users needs

Launching too late with too many features

Let’s talk about mistakes!

iOS first

Not designed for users needs

Launching too late with too many features

iOS first. Why?

Started in 2011… iPhone is so cool

Hard to find an Android developer

Fragmentation and UX/UI ‘anarchy’

Smartphone OS Market 2011Q3

Source: http://commons.wikimedia.org/wiki/File%3AWorld-Wide-Smartphone-Market-Share.png

By Milominderbinder2

Android hits 81.0% smartphone share in Q3 2013

Source: http://thenextweb.com/

Awesome things happen

Android 4.0 and Holo Theme

“Before Android 4.0 the variance in system themes from device to device

could make it difficult to design an app with a single predictable look and feel.

We set out to improve this situation for the developer community in Ice Cream

Sandwich and beyond.”

Adam Powell, Android Framework engineer

Official Design Guidelines

http://developer.android.com/design/index.html

Beautiful applications and great UX

Official Resources and Doc Community resources

Design http://developer.android.com/design/index.html

Develop http://developer.android.com/develop/index.html

API Guides http://developer.android.com/guide/index.html

Android Developer Videos http://www.youtube.com/user/androiddevelopers

Android Design in Action Series http://www.youtube.com/playlist?list=PLW…

GitHub https://github.com/search?l=Java&o=desc&q=andro...

Q&A http://stackoverflow.com/questions/tagged/android

Newsletter http://androidweekly.net/

Inspiration http://www.android-app-patterns.com/

…

Android Developers Blog http://android-developers.blogspot.it

Awesome Android Developer Community

We’re changing and Android will help us

Our future plan with Android in mind

Consumer apps for football lovers

Solid backend framework

Business intelligence for game statistics

Android is for startups. No doubts!

Free and open source

Free resources that help you in creating great products

Thousands of new device activations

Immediate go to market

Dark side of the…

Monetisation strategy (in-app purchase)

Fragmentation

Competition

Take care of the User Experience

UX ≠ USABILITY

UX

User Experience is not about features. The perfect UX meets the exact needs of the user

USABILITY

is a quality attribute that estimate how easy is to use your user interface. It’s defined by: learnability,

efficiency, memorability and error repetitions

Mental Model

“Mental models are what people really have in their heads and what guides

their use of things”

Donald Norman, 1983

Mental model

What user thinks she knows about a UI impacts how she uses it

Additional experience with the system can change the users’ model

Mental models of your app is influenced by other apps

Courtesy of Nadav Savio | Gian Ant Design | CC | http://goo.gl/HX9EDa

Mobility constraints

Users have intermittent attention while using apps

It’s a multitasking scenario that means a lot of interruptions

Device constraints: battery, display and network

Your goals designing a new application

Make the UX of your app conform to users' mental models

Improve users' mental models

Offer relevant mobile-only functionalities

Design for user needs through highly specific tasks

Design apps that have a consistent and predictable behaviour

What a good UX can’t solve

Wrong product

Team structure and balance

Wrong strategy and inappropriate go to market

Android Patterns & Best Practices

Pay attention to your top level screen

Start screen requires always special attention

Put content and frequent actions forward

Top level switching with view controls

Make it easy to navigate and switch between top level view

Introduce the user to the major functional areas

Avoid duplication and mixed solutions

Action Bar

Display key actions in an accessible way

Actions should have clear and predictable behaviour (add item, search)

Expose brand identity

Swipe between Detail Views

Navigate between detail items in succession using the swipe gesture

The Contextual Action Bar (CAB)

Useful to select data items by touching them

Trigger action to selected items

Perform specific and predictable action

Notifications

Keep the user informed about events

Use it for smart alerts

Users hate unwanted and not informative alerts

Notifications are now really flexible. Use responsibly

Always! Allow users to disable notifications

Pull to refresh

Swipe down to update recent items in your ListView

Use the Action Bar to keep updated the user

Add a visible loader

Undo Bar

Show up just after a potential destructive action

Allow users to undo the most recent action

Show it in an easy-to-tap position

Please, forget pixels!

Use Density Independent Pixels

DIP or DP units keep things the same physical size across any screen size

Use Density Independent Pixels

1px is just 1dp at 160dpi

_____ px = [ ____ dip * ___dpi ] / 160dpi

48dp for touch target

Touchable UI targets are generally laid out along 48dp units

8dp for your grid

Spacing between each UI element should 8dp (multiple of 4)

1 scale-independent pixel unit is equal to 1dp with a 100% globe text scale

User can select a system-wide scaling factor for text in Settings

Always use scale independent pixel unit for text

Text and scale independent pixel (sp)

Hello, Roboto

Roboto Thin & Thin Oblique

Roboto Light & Light Oblique

Roboto Regular & Oblique

Roboto Medium & Medium Oblique

Roboto Bold & Bold Oblique

Roboto Black & Black Oblique

Roboto Condensed & Condensed Oblique

Roboto Condensed Bold & Condensed Bold Oblique

Support multiple screen

Explicitly declare in the manifest which screen sizes your application supports

Provide different layouts for different screen sizes

Provide different bitmap drawables for different screen densities

http://developer.android.com/guide/practices/screens_support.html

My typical workflow

1. Sketches, wireframes and UX flow

Describe the intent of each single view

Visualise the entire use flow

Tell a use case using personas

2. UI prototype

Create a more detailed UI prototype

Define the look and feel

Tell a use case using personas

3. User tests

Test your assumptions with real people

You need no more than 5 tests

Create clever tasks for the user

SVG and JavaScript - Live demo

Keep in touch!

http://twitter.com/piervix

http://dribbble.com/piervix