DroidConIT Wrap-up - Enchant me


Published on

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

Published in: Technology
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

DroidConIT Wrap-up - Enchant me

  1. 1. Google Developer Group Perugia http://perugia.gdg.io 26.02.2014 @ Perugia
  2. 2. Who am I? +DanielaMogini88 Software engineer Java, J2EE, Android daniela.mogini@gmail.com
  3. 3. DroidConIT 2014 A little wrap-up!
  4. 4. Looking for...
  5. 5. Where to start Apple User Experience? Lesson learned... Let’s start with Android Design Principles! http://developer.android.com/design/get-started/principles.html
  6. 6. Design Principles
  7. 7. Design Principles Overview 1. Enchant me 2. Simplify my life 3. Make me Amazing
  8. 8. 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. Enchant me
  9. 9. 1 - Enchant me Your own way Android Way Beauty Simplicity Graphics, color, brand, original look and feel Standard Android components. The user already knows how to use them Magical experience Combine elements and functionality in a creative and unique way Purpose Be part of a system without reinventing the wheel Effortless No need to learn new things, users don’t want to feel dumb!
  10. 10. 1 - Enchant me Your own way Android Way Powerful?! Which is the trade-off to build powerful Android apps?
  11. 11. 1 - Enchant me Your own way Android Way Creativity + Usability Customize Android elements in your unique way
  12. 12. Holo Theme Theme.Hol o Theme.Holo.Ligh t Theme.Holo.Light.DarkActionBar
  13. 13. 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.”
  14. 14. 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>
  15. 15. Customizing System Theme (2/2) 2) Tell your app to use the new theme In the manifest <activity android:theme="@style/CustomTheme">
  16. 16. ActionBar ● Since Honeycomb (API level 11) ● Support to 2.x devices with ActionBarSherlock ● Extends existing Option Menu framework ● Provides navigation: tab-based navigation, dropdownbased navigation
  17. 17. ActionBar Action bar with tab-based navigation
  18. 18. ActionBar Transparent and splitted ActionBar with dropdown-based navigation
  19. 19. 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
  20. 20. Navigation Drawer
  21. 21. ● 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! So… Enchant Me!
  22. 22. Users again What??? Users again… Ok, we built a beautiful Android app, what do you want more?
  23. 23. Your app should WORK... ● For their device ● as they expect ● taking care of their special needs Simplify my life
  24. 24. For their device You have to support different: ● Languages ● Screens ● Platform versions
  25. 25. Example - Different screens (1/3) ● Provide layouts for different screens
  26. 26. Example - Different screens (2/3) ● Design both for landscape and portrait mode
  27. 27. Example - Different screens (3/3) ● Provide drawables for different screen densities
  28. 28. 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
  29. 29. 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
  30. 30. Android accessibility features You can discover it yourself!
  31. 31. 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
  32. 32. 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
  33. 33. Your app should WORK... ● For their device Support different languages, screens and platform versions Take care of UX and don’t make the ● as they expect user feel lost or dumb. ● taking care of their Design and test for accessibility special needs Simplify my life
  34. 34. And now? Is that enough to have my five stars?
  35. 35. This is your business BUT... be careful not to annoy users! Make me amazing!
  36. 36. Be reactive to users’ behaviour Take care of: ● When: Is night? … ● What: What is the user doing? Is he driving? Is he busy? ● Where: Where is the user?
  37. 37. When: Is night? If it’s night you may want to: ● Disable sound notification ● Provide a night layout based on white-on-black color schema You can provide a different theme using night qualifier
  38. 38. What: What is the user doing? Google’s Location API can help you discover what is the user doing: DetectedActivity ● ● ● ● ● ● Still On foot On bycicle In vehicle Tilting Unknown
  39. 39. What: Something more... 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
  40. 40. Where: Where is the user You can provide content, notification or even change the app behaviour, basing on user location. External location: Geofences With Fused Location API you can get asynchronous notifications when users enter/exit a proximity area Internal location: iBecons Bluetooth 4.0 is natively supported by KitKat devices with specific hardware
  41. 41. Yeaaah!!! Here’s your five stars and your million downloads! :)
  42. 42. Thank you... ...and join the community!