droidconit wrap-up - enchant me
DESCRIPTION
A little resume of DroidConIT, presenting some of the most interesting guidelines to improve UX and usability in Android applications.TRANSCRIPT
26.02.2014 @ Perugia
Google Developer Group Perugia
http://perugia.gdg.io
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
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!