DroidConIT Wrap-up - Enchant me

Post on 19-May-2015

250 views 2 download

Tags:

description

A little resume of DroidConIT, presenting some of the most interesting guidelines to improve UX and usability in Android applications.

Transcript of DroidConIT Wrap-up - Enchant me

26.02.2014 @ Perugia

Google Developer Group Perugia

http://perugia.gdg.io

+DanielaMogini88

Software engineerJava, J2EE, Android

Who am I?

daniela.mogini@gmail.com

DroidConIT 2014A little wrap-up!

Looking for...

Apple User Experience? Lesson learned...

Let’s start with Android

Design Principles!

http://developer.android.com/design/get-started/principles.html

Where to start

Design Principles

Emanuele Palazzetti
Il meme ha una guideline e prevede che il titolo sia "One does not simply" e sotto quello che vuoi dire. Alla DroidCon è stato usato male :)Per crearli puoi andare qua http://livememe.com/(Lo dico perché il popolo di Reddit è spietato sui meme sbagliati :P)

1.Enchant me

2.Simplify my life

3.Make me Amazing

Design Principles Overview

Enchant me

Just like a well-made tool, your app should strive to

combine beauty, simplicity and purpose to create

a magical experience that is effortless and

powerful.

Your own

way

1 - Enchant me

Android WayBeauty

Graphics, color, brand, original look and feel

SimplicityStandard Android

components. The user already knows how to use

them

PurposeBe part of a system without

reinventing the wheel

Magical experienceCombine elements and

functionality in a creative and unique way

EffortlessNo need to learn new things,

users don’t want to feel dumb!

Your own

way

1 - Enchant me

Android Way

Powerful?!Which is the trade-off to build powerful Android

apps?

Your own

way

1 - Enchant me

Android Way

Creativity + Usability

Customize Android elements in your unique way

Holo Theme

Theme.Holo

Theme.Holo.Light

Theme.Holo.Light.DarkActionBar

Holo Theme

Since Android 3.0 and improved in Android 4.0

“Using one of the system themes as a starting point for your customizations is a good idea”

“The system themes provide a solid foundation on top of which you can selectively implement your

own visual stylings.”

Customizing System Theme (1/2)

1) Build your own theme starting from a system

theme

In: res/values/styles.xml<style name="CustomTheme" parent="android:Theme.Light">

<item name="android:windowBackground">@color/custom_theme_color</item>

</style>

In: res/values-v11/styles.xml<style name="CustomTheme" parent="android:Theme.Holo.Light">

<item name="android:windowBackground">@color/custom_theme_color</item>

</style>

Customizing System Theme (2/2)

2) Tell your app to use the new theme

In the manifest<activity android:theme="@style/CustomTheme">

ActionBar

● Since Honeycomb (API level 11)

● Support to 2.x devices with ActionBarSherlock

● Extends existing Option Menu framework● Provides navigation: tab-based navigation,

dropdown-based navigation

ActionBar

Action bar withtab-based navigation

ActionBar

Transparent and splitted ActionBar with

dropdown-based navigation

Navigation Drawer

The navigation drawer is a panel that transitions in from the left edge of the screen and displays the

app’s main navigation options.

When navigation matters:

● More than 3 top-level views

● Navigation between lower level views

● Deep navigation branches

Navigation Drawer

So… Enchant Me!

● Use Android elements to improve UX

● Customize elements in your own way

● Be creative while following design guidelines

● Learn from the best:

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

https://blog.stylingandroid.com/

ENJOY!

Users again

What???

Users again… Ok, we built a beautiful

Android app, what do you want more?

Simplify my life

Your app should WORK...

● taking care of their special needs

● as they expect

● For their device

You have to support different:

● Languages● Screens● Platform versions

For their device

● Provide layouts for different screens

Example - Different screens (1/3)

● Design both for landscape and portrait mode

Example - Different screens (2/3)

● Provide drawables for different screen densities

Example - Different screens (3/3)

As they expect

From the user point of view:

● I should always know where I am● If it looks the same, it should act the same● Remember my preferences● Only show what I need when I need it● Make important things fast

Taking care of their special needs

1 billion user have special needs

and it is extremely easy to add accessibility features to Android apps.

Android framework already integrates 2 services to provide feedback to users:

● TalkBack● BrailleBack

Android accessibility features

You can discover it yourself!

Making your app accessible (1/2)

● Add “contentDescription” and “hint” to your UI components

● Express text dimension in sp to enable resizing

● Add captions to videos

Making your app accessible (2/2)

● Make your UI components focusable

● Test navigation between focusable components

● If necessary, customize the navigation

<EditText android:id="@+id/edit"

android:nextFocusDown=”@+id/text”

... />

<TextView android:id="@+id/text"

android:focusable=”true”

android:text="Hello, I am a focusable TextView"

android:nextFocusUp=”@id/edit”

... />

● Test your app for accessibility

Simplify my life

Your app should WORK...

● taking care of

their special

needs

● as they expect

● For their deviceSupport different languages,

screens and platform versions

Take care of UX and don’t make

the user feel lost or dumb.

Design and test for accessibility

And now?

Is that enough to have my five stars?

Make me amazing!

be careful not to annoy users!

This is your business

BUT...

Take care of:

● When: Is night? …● What: What is the user doing? Is he driving? Is he

busy?

● Where: Where is the user?

Be reactive to users’ behaviour

If it’s night you may want to:

● Disable sound notification● Provide a night layout based on white-on-black

color schema

When: Is night?

You can provide a different theme using

night qualifier

Google’s Location API can help you discover what is the user doing: DetectedActivity

● Still● On foot● On bycicle● In vehicle● Tilting● Unknown

What: What is the user doing?

Is the user driving?

● You can check if the device is connected to a handsfree audio system

Is the user busy?

● You can check the device orientation

What: Something more...

You can provide content, notification or even change the app behaviour, basing on user location.

Where: Where is the user

External location:

GeofencesWith Fused Location API

you can get asynchronous

notifications when users enter/exit a proximity

area

Internal location:

iBeconsBluetooth 4.0 is natively

supported by KitKat devices with specific

hardware

Yeaaah!!!

Here’s your five stars and your million

downloads! :)

Thank you...

...and join the community!