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
![Page 1: DroidConIT Wrap-up - Enchant me](https://reader035.vdocument.in/reader035/viewer/2022062418/555ac81fd8b42a761a8b4f4c/html5/thumbnails/1.jpg)
26.02.2014 @ Perugia
Google Developer Group Perugia
http://perugia.gdg.io
![Page 3: DroidConIT Wrap-up - Enchant me](https://reader035.vdocument.in/reader035/viewer/2022062418/555ac81fd8b42a761a8b4f4c/html5/thumbnails/3.jpg)
DroidConIT 2014A little wrap-up!
![Page 4: DroidConIT Wrap-up - Enchant me](https://reader035.vdocument.in/reader035/viewer/2022062418/555ac81fd8b42a761a8b4f4c/html5/thumbnails/4.jpg)
Looking for...
![Page 5: DroidConIT Wrap-up - Enchant me](https://reader035.vdocument.in/reader035/viewer/2022062418/555ac81fd8b42a761a8b4f4c/html5/thumbnails/5.jpg)
Apple User Experience? Lesson learned...
Let’s start with Android
Design Principles!
http://developer.android.com/design/get-started/principles.html
Where to start
![Page 6: DroidConIT Wrap-up - Enchant me](https://reader035.vdocument.in/reader035/viewer/2022062418/555ac81fd8b42a761a8b4f4c/html5/thumbnails/6.jpg)
Design Principles
![Page 7: DroidConIT Wrap-up - Enchant me](https://reader035.vdocument.in/reader035/viewer/2022062418/555ac81fd8b42a761a8b4f4c/html5/thumbnails/7.jpg)
1.Enchant me
2.Simplify my life
3.Make me Amazing
Design Principles Overview
![Page 8: DroidConIT Wrap-up - Enchant me](https://reader035.vdocument.in/reader035/viewer/2022062418/555ac81fd8b42a761a8b4f4c/html5/thumbnails/8.jpg)
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.
![Page 9: DroidConIT Wrap-up - Enchant me](https://reader035.vdocument.in/reader035/viewer/2022062418/555ac81fd8b42a761a8b4f4c/html5/thumbnails/9.jpg)
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!
![Page 10: DroidConIT Wrap-up - Enchant me](https://reader035.vdocument.in/reader035/viewer/2022062418/555ac81fd8b42a761a8b4f4c/html5/thumbnails/10.jpg)
Your own
way
1 - Enchant me
Android Way
Powerful?!Which is the trade-off to build powerful Android
apps?
![Page 11: DroidConIT Wrap-up - Enchant me](https://reader035.vdocument.in/reader035/viewer/2022062418/555ac81fd8b42a761a8b4f4c/html5/thumbnails/11.jpg)
Your own
way
1 - Enchant me
Android Way
Creativity + Usability
Customize Android elements in your unique way
![Page 12: DroidConIT Wrap-up - Enchant me](https://reader035.vdocument.in/reader035/viewer/2022062418/555ac81fd8b42a761a8b4f4c/html5/thumbnails/12.jpg)
Holo Theme
Theme.Holo
Theme.Holo.Light
Theme.Holo.Light.DarkActionBar
![Page 13: DroidConIT Wrap-up - Enchant me](https://reader035.vdocument.in/reader035/viewer/2022062418/555ac81fd8b42a761a8b4f4c/html5/thumbnails/13.jpg)
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.”
![Page 14: DroidConIT Wrap-up - Enchant me](https://reader035.vdocument.in/reader035/viewer/2022062418/555ac81fd8b42a761a8b4f4c/html5/thumbnails/14.jpg)
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>
![Page 15: DroidConIT Wrap-up - Enchant me](https://reader035.vdocument.in/reader035/viewer/2022062418/555ac81fd8b42a761a8b4f4c/html5/thumbnails/15.jpg)
Customizing System Theme (2/2)
2) Tell your app to use the new theme
In the manifest<activity android:theme="@style/CustomTheme">
![Page 16: DroidConIT Wrap-up - Enchant me](https://reader035.vdocument.in/reader035/viewer/2022062418/555ac81fd8b42a761a8b4f4c/html5/thumbnails/16.jpg)
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
![Page 17: DroidConIT Wrap-up - Enchant me](https://reader035.vdocument.in/reader035/viewer/2022062418/555ac81fd8b42a761a8b4f4c/html5/thumbnails/17.jpg)
ActionBar
Action bar withtab-based navigation
![Page 18: DroidConIT Wrap-up - Enchant me](https://reader035.vdocument.in/reader035/viewer/2022062418/555ac81fd8b42a761a8b4f4c/html5/thumbnails/18.jpg)
ActionBar
Transparent and splitted ActionBar with
dropdown-based navigation
![Page 19: DroidConIT Wrap-up - Enchant me](https://reader035.vdocument.in/reader035/viewer/2022062418/555ac81fd8b42a761a8b4f4c/html5/thumbnails/19.jpg)
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
![Page 20: DroidConIT Wrap-up - Enchant me](https://reader035.vdocument.in/reader035/viewer/2022062418/555ac81fd8b42a761a8b4f4c/html5/thumbnails/20.jpg)
Navigation Drawer
![Page 21: DroidConIT Wrap-up - Enchant me](https://reader035.vdocument.in/reader035/viewer/2022062418/555ac81fd8b42a761a8b4f4c/html5/thumbnails/21.jpg)
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!
![Page 22: DroidConIT Wrap-up - Enchant me](https://reader035.vdocument.in/reader035/viewer/2022062418/555ac81fd8b42a761a8b4f4c/html5/thumbnails/22.jpg)
Users again
What???
Users again… Ok, we built a beautiful
Android app, what do you want more?
![Page 23: DroidConIT Wrap-up - Enchant me](https://reader035.vdocument.in/reader035/viewer/2022062418/555ac81fd8b42a761a8b4f4c/html5/thumbnails/23.jpg)
Simplify my life
Your app should WORK...
● taking care of their special needs
● as they expect
● For their device
![Page 24: DroidConIT Wrap-up - Enchant me](https://reader035.vdocument.in/reader035/viewer/2022062418/555ac81fd8b42a761a8b4f4c/html5/thumbnails/24.jpg)
You have to support different:
● Languages● Screens● Platform versions
For their device
![Page 25: DroidConIT Wrap-up - Enchant me](https://reader035.vdocument.in/reader035/viewer/2022062418/555ac81fd8b42a761a8b4f4c/html5/thumbnails/25.jpg)
● Provide layouts for different screens
Example - Different screens (1/3)
![Page 26: DroidConIT Wrap-up - Enchant me](https://reader035.vdocument.in/reader035/viewer/2022062418/555ac81fd8b42a761a8b4f4c/html5/thumbnails/26.jpg)
● Design both for landscape and portrait mode
Example - Different screens (2/3)
![Page 27: DroidConIT Wrap-up - Enchant me](https://reader035.vdocument.in/reader035/viewer/2022062418/555ac81fd8b42a761a8b4f4c/html5/thumbnails/27.jpg)
● Provide drawables for different screen densities
Example - Different screens (3/3)
![Page 28: DroidConIT Wrap-up - Enchant me](https://reader035.vdocument.in/reader035/viewer/2022062418/555ac81fd8b42a761a8b4f4c/html5/thumbnails/28.jpg)
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
![Page 29: DroidConIT Wrap-up - Enchant me](https://reader035.vdocument.in/reader035/viewer/2022062418/555ac81fd8b42a761a8b4f4c/html5/thumbnails/29.jpg)
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
![Page 30: DroidConIT Wrap-up - Enchant me](https://reader035.vdocument.in/reader035/viewer/2022062418/555ac81fd8b42a761a8b4f4c/html5/thumbnails/30.jpg)
Android accessibility features
You can discover it yourself!
![Page 31: DroidConIT Wrap-up - Enchant me](https://reader035.vdocument.in/reader035/viewer/2022062418/555ac81fd8b42a761a8b4f4c/html5/thumbnails/31.jpg)
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
![Page 32: DroidConIT Wrap-up - Enchant me](https://reader035.vdocument.in/reader035/viewer/2022062418/555ac81fd8b42a761a8b4f4c/html5/thumbnails/32.jpg)
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
![Page 33: DroidConIT Wrap-up - Enchant me](https://reader035.vdocument.in/reader035/viewer/2022062418/555ac81fd8b42a761a8b4f4c/html5/thumbnails/33.jpg)
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
![Page 34: DroidConIT Wrap-up - Enchant me](https://reader035.vdocument.in/reader035/viewer/2022062418/555ac81fd8b42a761a8b4f4c/html5/thumbnails/34.jpg)
And now?
Is that enough to have my five stars?
![Page 35: DroidConIT Wrap-up - Enchant me](https://reader035.vdocument.in/reader035/viewer/2022062418/555ac81fd8b42a761a8b4f4c/html5/thumbnails/35.jpg)
Make me amazing!
be careful not to annoy users!
This is your business
BUT...
![Page 36: DroidConIT Wrap-up - Enchant me](https://reader035.vdocument.in/reader035/viewer/2022062418/555ac81fd8b42a761a8b4f4c/html5/thumbnails/36.jpg)
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
![Page 37: DroidConIT Wrap-up - Enchant me](https://reader035.vdocument.in/reader035/viewer/2022062418/555ac81fd8b42a761a8b4f4c/html5/thumbnails/37.jpg)
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
![Page 38: DroidConIT Wrap-up - Enchant me](https://reader035.vdocument.in/reader035/viewer/2022062418/555ac81fd8b42a761a8b4f4c/html5/thumbnails/38.jpg)
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?
![Page 39: DroidConIT Wrap-up - Enchant me](https://reader035.vdocument.in/reader035/viewer/2022062418/555ac81fd8b42a761a8b4f4c/html5/thumbnails/39.jpg)
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...
![Page 40: DroidConIT Wrap-up - Enchant me](https://reader035.vdocument.in/reader035/viewer/2022062418/555ac81fd8b42a761a8b4f4c/html5/thumbnails/40.jpg)
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
![Page 41: DroidConIT Wrap-up - Enchant me](https://reader035.vdocument.in/reader035/viewer/2022062418/555ac81fd8b42a761a8b4f4c/html5/thumbnails/41.jpg)
Yeaaah!!!
Here’s your five stars and your million
downloads! :)
![Page 42: DroidConIT Wrap-up - Enchant me](https://reader035.vdocument.in/reader035/viewer/2022062418/555ac81fd8b42a761a8b4f4c/html5/thumbnails/42.jpg)
Thank you...
...and join the community!