SlideShare ist ein Scribd-Unternehmen logo
1 von 42
Google Developer Group Perugia
http://perugia.gdg.io

26.02.2014 @ Perugia
Who am I?
+DanielaMogini88
Software engineer
Java, J2EE, Android

daniela.mogini@gmail.com
DroidConIT 2014
A little wrap-up!
Looking for...
Where to start
Apple User Experience? Lesson learned...

Let’s start with Android
Design Principles!

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

1. Enchant me
2. Simplify my life
3. Make me Amazing
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
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!
1 - Enchant me
Your own way

Android Way

Powerful?!
Which is the trade-off to build
powerful Android apps?
1 - Enchant me
Your own way

Android Way

Creativity + Usability

Customize Android elements in
your unique way
Holo Theme

Theme.Hol
o
Theme.Holo.Ligh
t

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, dropdownbased navigation
ActionBar

Action bar with
tab-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
● 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!
Users again

What???
Users again… Ok, we built a beautiful Android app,
what do you want more?
Your app should WORK...

● For their device
● as they expect

● taking care of their special needs

Simplify my life
For their device
You have to support different:

● Languages
● Screens
● Platform versions
Example - Different screens (1/3)
● Provide layouts for different screens
Example - Different screens (2/3)
● Design both for landscape and portrait mode
Example - Different screens (3/3)
● Provide drawables for different screen densities
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
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
And now?

Is that enough to have my five stars?
This is your business
BUT...
be careful not to annoy users!
Make me amazing!
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?
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
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
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
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
Yeaaah!!!

Here’s your five stars and your million downloads! :)
Thank you...
...and join the
community!

Weitere ähnliche Inhalte

Ähnlich wie DroidConIT Wrap-up - Enchant me

Ux ui presentation2
Ux ui presentation2Ux ui presentation2
Ux ui presentation2
GeneXus
 
user interfaceuiuxintroduction-191206225755.pdf
user interfaceuiuxintroduction-191206225755.pdfuser interfaceuiuxintroduction-191206225755.pdf
user interfaceuiuxintroduction-191206225755.pdf
ssuser590cc81
 
Android application design
Android application designAndroid application design
Android application design
Uday Sharma
 
Android UX-UI Design for fun and profit | Fernando Cejas | Tuenti
 Android UX-UI Design for fun and profit | Fernando Cejas | Tuenti   Android UX-UI Design for fun and profit | Fernando Cejas | Tuenti
Android UX-UI Design for fun and profit | Fernando Cejas | Tuenti
Smash Tech
 
Introduction to mobile user experience
Introduction to mobile user experienceIntroduction to mobile user experience
Introduction to mobile user experience
Peter Van Dijck
 
Define & design apps for success en
Define & design apps for success enDefine & design apps for success en
Define & design apps for success en
Acrmnet s.r.l.
 
Designing an Android App from Idea to Market
Designing an Android App from Idea to MarketDesigning an Android App from Idea to Market
Designing an Android App from Idea to Market
Tony Hillerson
 

Ähnlich wie DroidConIT Wrap-up - Enchant me (20)

Ux ui presentation2
Ux ui presentation2Ux ui presentation2
Ux ui presentation2
 
UI UX introduction
UI UX introductionUI UX introduction
UI UX introduction
 
user interfaceuiuxintroduction-191206225755.pdf
user interfaceuiuxintroduction-191206225755.pdfuser interfaceuiuxintroduction-191206225755.pdf
user interfaceuiuxintroduction-191206225755.pdf
 
Android application design
Android application designAndroid application design
Android application design
 
Ui design by mhm
Ui design by mhmUi design by mhm
Ui design by mhm
 
UIUX Design - report on summer training.docx
UIUX Design - report on summer training.docxUIUX Design - report on summer training.docx
UIUX Design - report on summer training.docx
 
Nearsoft Mobile Onboarding Workshop
Nearsoft Mobile Onboarding WorkshopNearsoft Mobile Onboarding Workshop
Nearsoft Mobile Onboarding Workshop
 
Droidcon2014 - Android UX
Droidcon2014 - Android UXDroidcon2014 - Android UX
Droidcon2014 - Android UX
 
Android UX-UI Design for Fun and Profit
Android UX-UI Design for Fun and ProfitAndroid UX-UI Design for Fun and Profit
Android UX-UI Design for Fun and Profit
 
Android UX-UI Design for Fun and Profit
Android UX-UI Design for Fun and ProfitAndroid UX-UI Design for Fun and Profit
Android UX-UI Design for Fun and Profit
 
Android UX-UI Design for fun and profit | Fernando Cejas | Tuenti
 Android UX-UI Design for fun and profit | Fernando Cejas | Tuenti   Android UX-UI Design for fun and profit | Fernando Cejas | Tuenti
Android UX-UI Design for fun and profit | Fernando Cejas | Tuenti
 
Ux guide
Ux guideUx guide
Ux guide
 
Platform Independent App design
Platform Independent App designPlatform Independent App design
Platform Independent App design
 
Introduction to mobile user experience
Introduction to mobile user experienceIntroduction to mobile user experience
Introduction to mobile user experience
 
Define & design apps for success en
Define & design apps for success enDefine & design apps for success en
Define & design apps for success en
 
Designing for mobile. A UX perspective for developers
Designing for mobile. A UX perspective for developersDesigning for mobile. A UX perspective for developers
Designing for mobile. A UX perspective for developers
 
User Experience as a Strategic Advantage
User Experience as a Strategic AdvantageUser Experience as a Strategic Advantage
User Experience as a Strategic Advantage
 
Designing an App: From Idea to Market
Designing an App: From Idea to MarketDesigning an App: From Idea to Market
Designing an App: From Idea to Market
 
Designing an Android App: From Idea to Market
Designing an Android App: From Idea to MarketDesigning an Android App: From Idea to Market
Designing an Android App: From Idea to Market
 
Designing an Android App from Idea to Market
Designing an Android App from Idea to MarketDesigning an Android App from Idea to Market
Designing an Android App from Idea to Market
 

Kürzlich hochgeladen

CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
giselly40
 
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
Earley Information Science
 

Kürzlich hochgeladen (20)

Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
 
Advantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your BusinessAdvantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your Business
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
 
Breaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountBreaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path Mount
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfThe Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
 
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
 
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 

DroidConIT Wrap-up - Enchant me

  • 1. Google Developer Group Perugia http://perugia.gdg.io 26.02.2014 @ Perugia
  • 2. Who am I? +DanielaMogini88 Software engineer Java, J2EE, Android daniela.mogini@gmail.com
  • 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
  • 7. Design Principles Overview 1. Enchant me 2. Simplify my life 3. Make me Amazing
  • 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. 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. 1 - Enchant me Your own way Android Way Powerful?! Which is the trade-off to build powerful Android apps?
  • 11. 1 - Enchant me Your own way Android Way Creativity + Usability Customize Android elements in your unique way
  • 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. 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. Customizing System Theme (2/2) 2) Tell your app to use the new theme In the manifest <activity android:theme="@style/CustomTheme">
  • 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
  • 18. ActionBar Transparent and splitted ActionBar with dropdown-based navigation
  • 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
  • 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. Users again What??? Users again… Ok, we built a beautiful Android app, what do you want more?
  • 23. Your app should WORK... ● For their device ● as they expect ● taking care of their special needs Simplify my life
  • 24. For their device You have to support different: ● Languages ● Screens ● Platform versions
  • 25. Example - Different screens (1/3) ● Provide layouts for different screens
  • 26. Example - Different screens (2/3) ● Design both for landscape and portrait mode
  • 27. Example - Different screens (3/3) ● Provide drawables for different screen densities
  • 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. 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. Android accessibility features You can discover it yourself!
  • 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. 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. 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. And now? Is that enough to have my five stars?
  • 35. This is your business BUT... be careful not to annoy users! Make me amazing!
  • 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. 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. 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. 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. 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. Yeaaah!!! Here’s your five stars and your million downloads! :)
  • 42. Thank you... ...and join the community!