Android UI Design Tips

Android Developers
Android DevelopersAndroid Developers
User Interface
Design Tips

July 2010
Why should I care about UI?

Better UI

  Perceived quality + polish

     Better ratings

       Better app ranking

            More installs/purchases
                                      2
Agenda – Android UI design tips

1.  Do’s and don’ts
2.  Design philosophy and considerations
3.  UI framework features you
    should definitely be using
4.  New UI design patterns
5.  Icons and guidelines

                                           3
Do’s and don’ts
  DON’T simply port         DON’T create rigid,
   your UI from other         absolute-positioned
   platforms                  layouts
   –  Users should
      feel right at home     DON’T use px units,
      with your app           use dp (or sp for text)
      on their device
   –  Balance your brand     DON’T use small font
      and platform look       sizes
  DON’T overuse
   modal progress &
   confirmation dialogs
                                                     5
  DO create versions of      DO support D-pad &
   all resources for high      trackball navigation
   density screens
                              DO properly manage
  DO make large,              the activity stack
   obvious tap targets
   (buttons, list items)      DO properly handle
                               orientation changes
  DO follow Android
   icon guidelines            DO use theme/style,
                               dimension, color
  DO use proper               resources to reduce
   margins and padding         redundancy
                                                      6
DO work with visual and
interaction designer(s)



                          7
Design philosophy
and considerations
Android design philosophy

  Clear vs. “simple”
  Content vs. chrome
  Consistent yet engaging
  –  Elegant variation

  Enhanced by the cloud
  –  Maintain user’s context
     across desktop and mobile


                                 9
Principles of good interface design*

1.  Focus on the user
2.  Make the right things visible
3.  Show proper feedback
4.  Be predictable
5.  Be fault-tolerant


* Some material borrowed from Donald Norman’s The Design of Everyday Things   10
1. Focus on the user

  Know your users
  –  Age, skill level, culture, disabilities, etc.
  –  What they want to do with your app
  –  What kinds of devices they’ll be using
  –  Where/when/how they’ll be using their devices

  Design with a ‘user-first’ mentality
  –  Users are generally task-driven

  Test on real users, early and often

                                                     11
2. Make the right things visible

  The most common operations should be
   immediately visible and available


  Secondary functionality
   can be reserved for the
   MENU button


                                          12
3. Show proper feedback

  Have at least 4 states (<selector>) for
   all interactive UI elements:


      default   disabled   focused   pressed



  Make sure the effects of an action are
   clear and visible
  Show adequate yet unobtrusive
   progress indicators                         13
4. Be predictable

  Do what the user expects
  –  Properly interact with the activity stack
  –  Show information and actions users expects to see
     (requires testing or observation)

  Use proper affordances
  –  If something is clickable, make sure it looks
     clickable!




                                                     14
If complex instructions
are required, rethink
your design.

                          15
5. Be fault tolerant

  Constrain possible operations to only
   those that make sense
  –  Disable UI elements when appropriate

  Limit the number of irreversible actions
  Prefer ‘undo’ to confirmation dialogs
  –  In fact, use as few modal dialogs as possible.
     They’re obtrusive.



                                                      16
“If an error is possible,
someone will make it.”
                    – Donald Norman, author,
               The Design of Everyday Things




                                               17
Design considerations

  Physical screen size
  Screen density
  Portrait & landscape orientations
  Primary UI interaction method
  –  Touch-screen
  –  D-pad/trackball

  Soft & physical keyboard
                                       18
Design considerations

  Awareness about the ways in which
   devices can vary is very important
  Read through the CDD to learn
   about possible device UI variations
  –  http://source.android.com/compatibility

  Screen size & density breakdown
  –  http://developer.android.com/resources/
     dashboard/screens.html

                                               19
UI framework features you
should definitely be using
<RelativeLayout>


                   21
Resource qualifiers

                        One .apk contains all
                         resources
                        System chooses at
                         runtime which
                         resources to use




                                                 22
9-patch drawables – foo.9.png




  Similar to CSS3 border-image
  Border pixels indicate stretchable regions
  Make both -mdpi and -hdpi versions!
                                            23
Selector (state list) drawables


    foo.xml:


<selector>
    <item android:drawable="@drawable/foo_disabled"
          android:state_enabled="false" ... />
    <item android:drawable="@drawable/foo_pressed"
          android:state_pressed="true" ... />
    <item android:drawable="@drawable/foo_focused"
          android:state_focused="true" ... />
    <item android:drawable="@drawable/foo_default" /> 
</selector> 



                                                   24
Selector (state list) drawables


  foo_default.png   foo_disabled.png   foo_focused.png   foo_pressed.png




  foo_default.png   foo_disabled.png   foo_focused.png   foo_pressed.png




                                                                    25
Layer drawables – XML + PNGs




                   +                    +   Drawable.setColorFilter(

                                                0xA4C639,

                                                ...);
foo_border.9.png       foo_mask.9.png




                                                                26
Layer drawables – XML + PNGs




           =
               Rendered output
               (resizable w/ 9-patch)




                                        27
New UI design patterns
New UI design patterns

Borrowed from the
Android UI design patterns
talk at Google I/O 2010

 http://code.google.com/events/io/2010/sessions/
 android-ui-design-patterns.html




                                                   29
New UI design patterns

  Dashboard
  Action Bar
  Quick Actions




                         30
New UI design patterns

  Dashboard
  Action Bar
  Quick Actions




                         31
New UI design patterns

  Dashboard
  Action Bar
  Quick Actions




                         32
New UI design patterns

  Dashboard
  Action Bar
  Quick Actions




                         33
Dashboard
“What can I do with this app?”
“What’s new?”




                                 34
Dashboard – Recommendations

  Focus on 3-6 most important app
   sections
  Highlight what’s new
  Be flavorful – it’s your first impression




                                               35
Action Bar
“How can I do <common action> quickly?”




                                          36
Action Bar – Recommendations

  Bring key, app-wide actions onscreen
  Help to convey a sense of place
  Use consistently within your app
  Provide ‘home’ mechanism – logo or
   dedicated button
  DON’T use for contextual actions

                                          37
Quick Actions
“What can I do with <this object>?”




                                      38
Icons and guidelines
New Android icon style




Tactile • Rendered • Forward Facing • Top-lit
  Synecdoche • Diverse shapes, materials
Icon guidelines

Guidelines and templates are available at:

  http://developer.android.com/guide/practices/
  ui_guidelines/icon_design.html




                                                  41
Questions?
Copyrights and Trademarks

  Android, Google are registered
   trademarks of Google Inc.
  All other trademarks and copyrights are
   the property of their respective owners.




                                              43
1 of 43

Recommended

UI design for mobile apps by
UI design for mobile appsUI design for mobile apps
UI design for mobile appsIvano Malavolta
5.2K views62 slides
Architecture of .net framework by
Architecture of .net frameworkArchitecture of .net framework
Architecture of .net frameworkThen Murugeshwari
98.2K views16 slides
Android Location and Maps by
Android Location and MapsAndroid Location and Maps
Android Location and MapsJussi Pohjolainen
1.8K views27 slides
User interface design by
User interface designUser interface design
User interface designNaveen Sagayaselvaraj
9K views61 slides
User interfaces for mobile applications by
User interfaces for mobile applicationsUser interfaces for mobile applications
User interfaces for mobile applicationsK Senthil Kumar
952 views8 slides
Android activities & views by
Android activities & viewsAndroid activities & views
Android activities & viewsma-polimi
4.9K views53 slides

More Related Content

What's hot

Android Fragment by
Android FragmentAndroid Fragment
Android FragmentKan-Han (John) Lu
1.6K views9 slides
Development of Mobile Application -PPT by
Development of Mobile Application -PPTDevelopment of Mobile Application -PPT
Development of Mobile Application -PPTDhivya T
37.5K views25 slides
Process scheduling (CPU Scheduling) by
Process scheduling (CPU Scheduling)Process scheduling (CPU Scheduling)
Process scheduling (CPU Scheduling)Mukesh Chinta
15.7K views63 slides
Android app development ppt by
Android app development pptAndroid app development ppt
Android app development pptsaitej15
11.3K views28 slides
Mobile Application Development With Android by
Mobile Application Development With AndroidMobile Application Development With Android
Mobile Application Development With Androidguest213e237
21.5K views29 slides
Android User Interface by
Android User InterfaceAndroid User Interface
Android User InterfaceShakib Hasan Sumon
2K views24 slides

What's hot(20)

Development of Mobile Application -PPT by Dhivya T
Development of Mobile Application -PPTDevelopment of Mobile Application -PPT
Development of Mobile Application -PPT
Dhivya T37.5K views
Process scheduling (CPU Scheduling) by Mukesh Chinta
Process scheduling (CPU Scheduling)Process scheduling (CPU Scheduling)
Process scheduling (CPU Scheduling)
Mukesh Chinta15.7K views
Android app development ppt by saitej15
Android app development pptAndroid app development ppt
Android app development ppt
saitej1511.3K views
Mobile Application Development With Android by guest213e237
Mobile Application Development With AndroidMobile Application Development With Android
Mobile Application Development With Android
guest213e23721.5K views
Mobile 2.0 by Lifna C.S
Mobile 2.0Mobile 2.0
Mobile 2.0
Lifna C.S1.7K views
Introduction to mobile application by K Senthil Kumar
Introduction to mobile applicationIntroduction to mobile application
Introduction to mobile application
K Senthil Kumar2.7K views
Mobile application development by Eric Cattoir
Mobile application developmentMobile application development
Mobile application development
Eric Cattoir10.5K views
Memory management in Andoid by Monkop Inc
Memory management in AndoidMemory management in Andoid
Memory management in Andoid
Monkop Inc3.5K views
Human Factors and User Interface Design by SaggitariusArrow
Human Factors and User Interface DesignHuman Factors and User Interface Design
Human Factors and User Interface Design
SaggitariusArrow6K views
Basic android-ppt by Srijib Roy
Basic android-pptBasic android-ppt
Basic android-ppt
Srijib Roy20.7K views
Day: 1 Introduction to Mobile Application Development (in Android) by Ahsanul Karim
Day: 1 Introduction to Mobile Application Development (in Android)Day: 1 Introduction to Mobile Application Development (in Android)
Day: 1 Introduction to Mobile Application Development (in Android)
Ahsanul Karim20.4K views
Layouts in android by Durai S
Layouts in androidLayouts in android
Layouts in android
Durai S11.1K views
6 mobile user interface design bb by Shahid Riaz
6   mobile user interface design bb6   mobile user interface design bb
6 mobile user interface design bb
Shahid Riaz1.6K views

Similar to Android UI Design Tips

Creating Mobile Aps without Coding by
Creating Mobile Aps without CodingCreating Mobile Aps without Coding
Creating Mobile Aps without CodingJack Molisani
1.3K views88 slides
UI and UX for Mobile Developers by
UI and UX for Mobile DevelopersUI and UX for Mobile Developers
UI and UX for Mobile DevelopersMohamed Nabil, MSc.
740 views215 slides
Excellence in the Android User Experience by
Excellence in the Android User ExperienceExcellence in the Android User Experience
Excellence in the Android User Experiencemobilegui
4.5K views47 slides
Get the Jump on Mobilizing your Notes and Domino Applications Today! (JMP103... by
Get the Jump on Mobilizing your Notes and Domino Applications Today!  (JMP103...Get the Jump on Mobilizing your Notes and Domino Applications Today!  (JMP103...
Get the Jump on Mobilizing your Notes and Domino Applications Today! (JMP103...Paul Della-Nebbia
486 views43 slides
Droidcon2014 - Android UX by
Droidcon2014 - Android UXDroidcon2014 - Android UX
Droidcon2014 - Android UXPiervincenzo Madeo
1.1K views63 slides
Designing Rich Mobile Apps in a Fragmented World by
Designing Rich Mobile Apps in a Fragmented WorldDesigning Rich Mobile Apps in a Fragmented World
Designing Rich Mobile Apps in a Fragmented WorldWorklight
809 views45 slides

Similar to Android UI Design Tips(20)

Creating Mobile Aps without Coding by Jack Molisani
Creating Mobile Aps without CodingCreating Mobile Aps without Coding
Creating Mobile Aps without Coding
Jack Molisani1.3K views
Excellence in the Android User Experience by mobilegui
Excellence in the Android User ExperienceExcellence in the Android User Experience
Excellence in the Android User Experience
mobilegui4.5K views
Get the Jump on Mobilizing your Notes and Domino Applications Today! (JMP103... by Paul Della-Nebbia
Get the Jump on Mobilizing your Notes and Domino Applications Today!  (JMP103...Get the Jump on Mobilizing your Notes and Domino Applications Today!  (JMP103...
Get the Jump on Mobilizing your Notes and Domino Applications Today! (JMP103...
Paul Della-Nebbia486 views
Designing Rich Mobile Apps in a Fragmented World by Worklight
Designing Rich Mobile Apps in a Fragmented WorldDesigning Rich Mobile Apps in a Fragmented World
Designing Rich Mobile Apps in a Fragmented World
Worklight809 views
Android Design Guidelines 1.1 by Mutual Mobile
Android Design Guidelines 1.1Android Design Guidelines 1.1
Android Design Guidelines 1.1
Mutual Mobile4.9K views
Designing Windows 8 application - Microsoft Techdays 2013 by Markus Jönsson
Designing Windows 8 application - Microsoft Techdays 2013Designing Windows 8 application - Microsoft Techdays 2013
Designing Windows 8 application - Microsoft Techdays 2013
Markus Jönsson5.7K views
Connect 2014 AD209 - Making Your Development Team More Productive With IBM Do... by marjoramg
Connect 2014 AD209 - Making Your Development Team More Productive With IBM Do...Connect 2014 AD209 - Making Your Development Team More Productive With IBM Do...
Connect 2014 AD209 - Making Your Development Team More Productive With IBM Do...
marjoramg11K views
Uxpin web ui design patterns 2014 by MoodLabs
Uxpin web ui design patterns 2014Uxpin web ui design patterns 2014
Uxpin web ui design patterns 2014
MoodLabs11.7K views
Web UI Design Patterns 2014 by Lewis Lin 🦊
Web UI Design Patterns 2014Web UI Design Patterns 2014
Web UI Design Patterns 2014
Lewis Lin 🦊5.4K views
Mobile Design at Gilt by David Park
Mobile Design at GiltMobile Design at Gilt
Mobile Design at Gilt
David Park24.7K views
Usability Design: Because it's awesome by Jen Yu
Usability Design: Because it's awesomeUsability Design: Because it's awesome
Usability Design: Because it's awesome
Jen Yu17.1K views
Usability principles 1 by Sameer Chavan
Usability principles 1Usability principles 1
Usability principles 1
Sameer Chavan1.1K views
Jmp103-Get the Jump on Mobilizing Your Notes and Domino Applications Today! by Howard Greenberg
Jmp103-Get the Jump on Mobilizing Your Notes and Domino Applications Today!Jmp103-Get the Jump on Mobilizing Your Notes and Domino Applications Today!
Jmp103-Get the Jump on Mobilizing Your Notes and Domino Applications Today!
Howard Greenberg1.6K views
EntwicklerCamp 2014 - Domino Designer : Tips, Tricks and Enhancements for Max... by marjoramg
EntwicklerCamp 2014 - Domino Designer : Tips, Tricks and Enhancements for Max...EntwicklerCamp 2014 - Domino Designer : Tips, Tricks and Enhancements for Max...
EntwicklerCamp 2014 - Domino Designer : Tips, Tricks and Enhancements for Max...
marjoramg1.1K views
UCD and low-fidelity prototyping by sawsan slii
UCD and low-fidelity prototypingUCD and low-fidelity prototyping
UCD and low-fidelity prototyping
sawsan slii2K views
Android training in cochin android training in kochi android training in kera... by zybotechsolutions
Android training in cochin android training in kochi android training in kera...Android training in cochin android training in kochi android training in kera...
Android training in cochin android training in kochi android training in kera...
zybotechsolutions351 views
Dev fest ile ife 2014-ux, material design and trends by Tunde Ojediran
Dev fest ile ife 2014-ux, material design and trendsDev fest ile ife 2014-ux, material design and trends
Dev fest ile ife 2014-ux, material design and trends
Tunde Ojediran1.1K views

Recently uploaded

Ransomware is Knocking your Door_Final.pdf by
Ransomware is Knocking your Door_Final.pdfRansomware is Knocking your Door_Final.pdf
Ransomware is Knocking your Door_Final.pdfSecurity Bootcamp
81 views46 slides
What’s New in CloudStack 4.19 - Abhishek Kumar - ShapeBlue by
What’s New in CloudStack 4.19 - Abhishek Kumar - ShapeBlueWhat’s New in CloudStack 4.19 - Abhishek Kumar - ShapeBlue
What’s New in CloudStack 4.19 - Abhishek Kumar - ShapeBlueShapeBlue
191 views23 slides
Data Integrity for Banking and Financial Services by
Data Integrity for Banking and Financial ServicesData Integrity for Banking and Financial Services
Data Integrity for Banking and Financial ServicesPrecisely
76 views26 slides
Digital Personal Data Protection (DPDP) Practical Approach For CISOs by
Digital Personal Data Protection (DPDP) Practical Approach For CISOsDigital Personal Data Protection (DPDP) Practical Approach For CISOs
Digital Personal Data Protection (DPDP) Practical Approach For CISOsPriyanka Aash
103 views59 slides
VNF Integration and Support in CloudStack - Wei Zhou - ShapeBlue by
VNF Integration and Support in CloudStack - Wei Zhou - ShapeBlueVNF Integration and Support in CloudStack - Wei Zhou - ShapeBlue
VNF Integration and Support in CloudStack - Wei Zhou - ShapeBlueShapeBlue
134 views54 slides
Centralized Logging Feature in CloudStack using ELK and Grafana - Kiran Chava... by
Centralized Logging Feature in CloudStack using ELK and Grafana - Kiran Chava...Centralized Logging Feature in CloudStack using ELK and Grafana - Kiran Chava...
Centralized Logging Feature in CloudStack using ELK and Grafana - Kiran Chava...ShapeBlue
74 views17 slides

Recently uploaded(20)

What’s New in CloudStack 4.19 - Abhishek Kumar - ShapeBlue by ShapeBlue
What’s New in CloudStack 4.19 - Abhishek Kumar - ShapeBlueWhat’s New in CloudStack 4.19 - Abhishek Kumar - ShapeBlue
What’s New in CloudStack 4.19 - Abhishek Kumar - ShapeBlue
ShapeBlue191 views
Data Integrity for Banking and Financial Services by Precisely
Data Integrity for Banking and Financial ServicesData Integrity for Banking and Financial Services
Data Integrity for Banking and Financial Services
Precisely76 views
Digital Personal Data Protection (DPDP) Practical Approach For CISOs by Priyanka Aash
Digital Personal Data Protection (DPDP) Practical Approach For CISOsDigital Personal Data Protection (DPDP) Practical Approach For CISOs
Digital Personal Data Protection (DPDP) Practical Approach For CISOs
Priyanka Aash103 views
VNF Integration and Support in CloudStack - Wei Zhou - ShapeBlue by ShapeBlue
VNF Integration and Support in CloudStack - Wei Zhou - ShapeBlueVNF Integration and Support in CloudStack - Wei Zhou - ShapeBlue
VNF Integration and Support in CloudStack - Wei Zhou - ShapeBlue
ShapeBlue134 views
Centralized Logging Feature in CloudStack using ELK and Grafana - Kiran Chava... by ShapeBlue
Centralized Logging Feature in CloudStack using ELK and Grafana - Kiran Chava...Centralized Logging Feature in CloudStack using ELK and Grafana - Kiran Chava...
Centralized Logging Feature in CloudStack using ELK and Grafana - Kiran Chava...
ShapeBlue74 views
Transitioning from VMware vCloud to Apache CloudStack: A Path to Profitabilit... by ShapeBlue
Transitioning from VMware vCloud to Apache CloudStack: A Path to Profitabilit...Transitioning from VMware vCloud to Apache CloudStack: A Path to Profitabilit...
Transitioning from VMware vCloud to Apache CloudStack: A Path to Profitabilit...
ShapeBlue86 views
Setting Up Your First CloudStack Environment with Beginners Challenges - MD R... by ShapeBlue
Setting Up Your First CloudStack Environment with Beginners Challenges - MD R...Setting Up Your First CloudStack Environment with Beginners Challenges - MD R...
Setting Up Your First CloudStack Environment with Beginners Challenges - MD R...
ShapeBlue105 views
Business Analyst Series 2023 - Week 4 Session 7 by DianaGray10
Business Analyst Series 2023 -  Week 4 Session 7Business Analyst Series 2023 -  Week 4 Session 7
Business Analyst Series 2023 - Week 4 Session 7
DianaGray10110 views
Future of AR - Facebook Presentation by Rob McCarty
Future of AR - Facebook PresentationFuture of AR - Facebook Presentation
Future of AR - Facebook Presentation
Rob McCarty54 views
Mitigating Common CloudStack Instance Deployment Failures - Jithin Raju - Sha... by ShapeBlue
Mitigating Common CloudStack Instance Deployment Failures - Jithin Raju - Sha...Mitigating Common CloudStack Instance Deployment Failures - Jithin Raju - Sha...
Mitigating Common CloudStack Instance Deployment Failures - Jithin Raju - Sha...
ShapeBlue113 views
Keynote Talk: Open Source is Not Dead - Charles Schulz - Vates by ShapeBlue
Keynote Talk: Open Source is Not Dead - Charles Schulz - VatesKeynote Talk: Open Source is Not Dead - Charles Schulz - Vates
Keynote Talk: Open Source is Not Dead - Charles Schulz - Vates
ShapeBlue178 views
Updates on the LINSTOR Driver for CloudStack - Rene Peinthor - LINBIT by ShapeBlue
Updates on the LINSTOR Driver for CloudStack - Rene Peinthor - LINBITUpdates on the LINSTOR Driver for CloudStack - Rene Peinthor - LINBIT
Updates on the LINSTOR Driver for CloudStack - Rene Peinthor - LINBIT
ShapeBlue138 views
NTGapps NTG LowCode Platform by Mustafa Kuğu
NTGapps NTG LowCode Platform NTGapps NTG LowCode Platform
NTGapps NTG LowCode Platform
Mustafa Kuğu287 views
GDG Cloud Southlake 28 Brad Taylor and Shawn Augenstein Old Problems in the N... by James Anderson
GDG Cloud Southlake 28 Brad Taylor and Shawn Augenstein Old Problems in the N...GDG Cloud Southlake 28 Brad Taylor and Shawn Augenstein Old Problems in the N...
GDG Cloud Southlake 28 Brad Taylor and Shawn Augenstein Old Problems in the N...
James Anderson142 views
Extending KVM Host HA for Non-NFS Storage - Alex Ivanov - StorPool by ShapeBlue
Extending KVM Host HA for Non-NFS Storage -  Alex Ivanov - StorPoolExtending KVM Host HA for Non-NFS Storage -  Alex Ivanov - StorPool
Extending KVM Host HA for Non-NFS Storage - Alex Ivanov - StorPool
ShapeBlue56 views
DRBD Deep Dive - Philipp Reisner - LINBIT by ShapeBlue
DRBD Deep Dive - Philipp Reisner - LINBITDRBD Deep Dive - Philipp Reisner - LINBIT
DRBD Deep Dive - Philipp Reisner - LINBIT
ShapeBlue110 views

Android UI Design Tips

  • 2. Why should I care about UI? Better UI Perceived quality + polish Better ratings Better app ranking More installs/purchases 2
  • 3. Agenda – Android UI design tips 1.  Do’s and don’ts 2.  Design philosophy and considerations 3.  UI framework features you should definitely be using 4.  New UI design patterns 5.  Icons and guidelines 3
  • 5.   DON’T simply port   DON’T create rigid, your UI from other absolute-positioned platforms layouts –  Users should feel right at home   DON’T use px units, with your app use dp (or sp for text) on their device –  Balance your brand   DON’T use small font and platform look sizes   DON’T overuse modal progress & confirmation dialogs 5
  • 6.   DO create versions of   DO support D-pad & all resources for high trackball navigation density screens   DO properly manage   DO make large, the activity stack obvious tap targets (buttons, list items)   DO properly handle orientation changes   DO follow Android icon guidelines   DO use theme/style, dimension, color   DO use proper resources to reduce margins and padding redundancy 6
  • 7. DO work with visual and interaction designer(s) 7
  • 9. Android design philosophy   Clear vs. “simple”   Content vs. chrome   Consistent yet engaging –  Elegant variation   Enhanced by the cloud –  Maintain user’s context across desktop and mobile 9
  • 10. Principles of good interface design* 1.  Focus on the user 2.  Make the right things visible 3.  Show proper feedback 4.  Be predictable 5.  Be fault-tolerant * Some material borrowed from Donald Norman’s The Design of Everyday Things 10
  • 11. 1. Focus on the user   Know your users –  Age, skill level, culture, disabilities, etc. –  What they want to do with your app –  What kinds of devices they’ll be using –  Where/when/how they’ll be using their devices   Design with a ‘user-first’ mentality –  Users are generally task-driven   Test on real users, early and often 11
  • 12. 2. Make the right things visible   The most common operations should be immediately visible and available   Secondary functionality can be reserved for the MENU button 12
  • 13. 3. Show proper feedback   Have at least 4 states (<selector>) for all interactive UI elements: default disabled focused pressed   Make sure the effects of an action are clear and visible   Show adequate yet unobtrusive progress indicators 13
  • 14. 4. Be predictable   Do what the user expects –  Properly interact with the activity stack –  Show information and actions users expects to see (requires testing or observation)   Use proper affordances –  If something is clickable, make sure it looks clickable! 14
  • 15. If complex instructions are required, rethink your design. 15
  • 16. 5. Be fault tolerant   Constrain possible operations to only those that make sense –  Disable UI elements when appropriate   Limit the number of irreversible actions   Prefer ‘undo’ to confirmation dialogs –  In fact, use as few modal dialogs as possible. They’re obtrusive. 16
  • 17. “If an error is possible, someone will make it.” – Donald Norman, author, The Design of Everyday Things 17
  • 18. Design considerations   Physical screen size   Screen density   Portrait & landscape orientations   Primary UI interaction method –  Touch-screen –  D-pad/trackball   Soft & physical keyboard 18
  • 19. Design considerations   Awareness about the ways in which devices can vary is very important   Read through the CDD to learn about possible device UI variations –  http://source.android.com/compatibility   Screen size & density breakdown –  http://developer.android.com/resources/ dashboard/screens.html 19
  • 20. UI framework features you should definitely be using
  • 22. Resource qualifiers   One .apk contains all resources   System chooses at runtime which resources to use 22
  • 23. 9-patch drawables – foo.9.png   Similar to CSS3 border-image   Border pixels indicate stretchable regions   Make both -mdpi and -hdpi versions! 23
  • 24. Selector (state list) drawables foo.xml: <selector> <item android:drawable="@drawable/foo_disabled" android:state_enabled="false" ... /> <item android:drawable="@drawable/foo_pressed" android:state_pressed="true" ... /> <item android:drawable="@drawable/foo_focused" android:state_focused="true" ... /> <item android:drawable="@drawable/foo_default" /> </selector> 24
  • 25. Selector (state list) drawables foo_default.png foo_disabled.png foo_focused.png foo_pressed.png foo_default.png foo_disabled.png foo_focused.png foo_pressed.png 25
  • 26. Layer drawables – XML + PNGs + + Drawable.setColorFilter(
 0xA4C639,
 ...); foo_border.9.png foo_mask.9.png 26
  • 27. Layer drawables – XML + PNGs = Rendered output (resizable w/ 9-patch) 27
  • 28. New UI design patterns
  • 29. New UI design patterns Borrowed from the Android UI design patterns talk at Google I/O 2010 http://code.google.com/events/io/2010/sessions/ android-ui-design-patterns.html 29
  • 30. New UI design patterns   Dashboard   Action Bar   Quick Actions 30
  • 31. New UI design patterns   Dashboard   Action Bar   Quick Actions 31
  • 32. New UI design patterns   Dashboard   Action Bar   Quick Actions 32
  • 33. New UI design patterns   Dashboard   Action Bar   Quick Actions 33
  • 34. Dashboard “What can I do with this app?” “What’s new?” 34
  • 35. Dashboard – Recommendations   Focus on 3-6 most important app sections   Highlight what’s new   Be flavorful – it’s your first impression 35
  • 36. Action Bar “How can I do <common action> quickly?” 36
  • 37. Action Bar – Recommendations   Bring key, app-wide actions onscreen   Help to convey a sense of place   Use consistently within your app   Provide ‘home’ mechanism – logo or dedicated button   DON’T use for contextual actions 37
  • 38. Quick Actions “What can I do with <this object>?” 38
  • 40. New Android icon style Tactile • Rendered • Forward Facing • Top-lit Synecdoche • Diverse shapes, materials
  • 41. Icon guidelines Guidelines and templates are available at: http://developer.android.com/guide/practices/ ui_guidelines/icon_design.html 41
  • 43. Copyrights and Trademarks   Android, Google are registered trademarks of Google Inc.   All other trademarks and copyrights are the property of their respective owners. 43