SlideShare a Scribd company logo
1 of 43
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

More Related Content

What's hot

oops concept in java | object oriented programming in java
oops concept in java | object oriented programming in javaoops concept in java | object oriented programming in java
oops concept in java | object oriented programming in javaCPD INDIA
 
Graphical user-interface
Graphical user-interfaceGraphical user-interface
Graphical user-interfaceEstiak Khan
 
Introduction to oops concepts
Introduction to oops conceptsIntroduction to oops concepts
Introduction to oops conceptsNilesh Dalvi
 
Introduction to fragments in android
Introduction to fragments in androidIntroduction to fragments in android
Introduction to fragments in androidPrawesh Shrestha
 
Android Architecture
Android ArchitectureAndroid Architecture
Android Architecturedeepakshare
 
Publishing and delivery of mobile application
Publishing and delivery of mobile applicationPublishing and delivery of mobile application
Publishing and delivery of mobile applicationK Senthil Kumar
 
Graphical User Interface (Gui)
Graphical User Interface (Gui)Graphical User Interface (Gui)
Graphical User Interface (Gui)Bilal Amjad
 
Wimp interface
Wimp interfaceWimp interface
Wimp interfaceAbrish06
 
User Interface Design in Software Engineering SE15
User Interface Design in Software Engineering SE15User Interface Design in Software Engineering SE15
User Interface Design in Software Engineering SE15koolkampus
 
Classes, objects in JAVA
Classes, objects in JAVAClasses, objects in JAVA
Classes, objects in JAVAAbhilash Nair
 
McCall Software Quality Model in Software Quality Assurance
McCall Software Quality Model in Software Quality Assurance McCall Software Quality Model in Software Quality Assurance
McCall Software Quality Model in Software Quality Assurance sundas Shabbir
 

What's hot (20)

oops concept in java | object oriented programming in java
oops concept in java | object oriented programming in javaoops concept in java | object oriented programming in java
oops concept in java | object oriented programming in java
 
Graphical user-interface
Graphical user-interfaceGraphical user-interface
Graphical user-interface
 
Android Widget
Android WidgetAndroid Widget
Android Widget
 
Introduction to oops concepts
Introduction to oops conceptsIntroduction to oops concepts
Introduction to oops concepts
 
Introduction to fragments in android
Introduction to fragments in androidIntroduction to fragments in android
Introduction to fragments in android
 
Ide presentation
Ide presentationIde presentation
Ide presentation
 
Android Architecture
Android ArchitectureAndroid Architecture
Android Architecture
 
Android User Interface
Android User InterfaceAndroid User Interface
Android User Interface
 
User Interface
User InterfaceUser Interface
User Interface
 
Publishing and delivery of mobile application
Publishing and delivery of mobile applicationPublishing and delivery of mobile application
Publishing and delivery of mobile application
 
History of c
History of cHistory of c
History of c
 
Features of java
Features of javaFeatures of java
Features of java
 
android menus
android menusandroid menus
android menus
 
Graphical User Interface (Gui)
Graphical User Interface (Gui)Graphical User Interface (Gui)
Graphical User Interface (Gui)
 
Wimp interface
Wimp interfaceWimp interface
Wimp interface
 
OOP java
OOP javaOOP java
OOP java
 
User Interface Design in Software Engineering SE15
User Interface Design in Software Engineering SE15User Interface Design in Software Engineering SE15
User Interface Design in Software Engineering SE15
 
Software Development Process
Software Development ProcessSoftware Development Process
Software Development Process
 
Classes, objects in JAVA
Classes, objects in JAVAClasses, objects in JAVA
Classes, objects in JAVA
 
McCall Software Quality Model in Software Quality Assurance
McCall Software Quality Model in Software Quality Assurance McCall Software Quality Model in Software Quality Assurance
McCall Software Quality Model in Software Quality Assurance
 

Similar to Android UI Design Tips

Creating Mobile Aps without Coding
Creating Mobile Aps without CodingCreating Mobile Aps without Coding
Creating Mobile Aps without CodingJack Molisani
 
Excellence in the Android User Experience
Excellence in the Android User ExperienceExcellence in the Android User Experience
Excellence in the Android User Experiencemobilegui
 
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...
Get the Jump on Mobilizing your Notes and Domino Applications Today! (JMP103...Paul Della-Nebbia
 
Designing Rich Mobile Apps in a Fragmented World
Designing Rich Mobile Apps in a Fragmented WorldDesigning Rich Mobile Apps in a Fragmented World
Designing Rich Mobile Apps in a Fragmented WorldWorklight
 
Android Design Guidelines 1.1
Android Design Guidelines 1.1Android Design Guidelines 1.1
Android Design Guidelines 1.1Mutual Mobile
 
Designing Windows 8 application - Microsoft Techdays 2013
Designing Windows 8 application - Microsoft Techdays 2013Designing Windows 8 application - Microsoft Techdays 2013
Designing Windows 8 application - Microsoft Techdays 2013Markus Jönsson
 
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...
Connect 2014 AD209 - Making Your Development Team More Productive With IBM Do...marjoramg
 
Uxpin web ui design patterns 2014
Uxpin web ui design patterns 2014Uxpin web ui design patterns 2014
Uxpin web ui design patterns 2014MoodLabs
 
Web UI Design Patterns 2014
Web UI Design Patterns 2014Web UI Design Patterns 2014
Web UI Design Patterns 2014Lewis Lin 🦊
 
Mobile Design at Gilt
Mobile Design at GiltMobile Design at Gilt
Mobile Design at GiltDavid Park
 
Usability Design: Because it's awesome
Usability Design: Because it's awesomeUsability Design: Because it's awesome
Usability Design: Because it's awesomeJen Yu
 
Usability principles 1
Usability principles 1Usability principles 1
Usability principles 1Sameer Chavan
 
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!
Jmp103-Get the Jump on Mobilizing Your Notes and Domino Applications Today!Howard Greenberg
 
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...
EntwicklerCamp 2014 - Domino Designer : Tips, Tricks and Enhancements for Max...marjoramg
 
UCD and low-fidelity prototyping
UCD and low-fidelity prototypingUCD and low-fidelity prototyping
UCD and low-fidelity prototypingsawsan slii
 
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...
Android training in cochin android training in kochi android training in kera...zybotechsolutions
 
Dev fest ile ife 2014-ux, material design and trends
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 trendsTunde Ojediran
 

Similar to Android UI Design Tips (20)

Creating Mobile Aps without Coding
Creating Mobile Aps without CodingCreating Mobile Aps without Coding
Creating Mobile Aps without Coding
 
UI and UX for Mobile Developers
UI and UX for Mobile DevelopersUI and UX for Mobile Developers
UI and UX for Mobile Developers
 
Excellence in the Android User Experience
Excellence in the Android User ExperienceExcellence in the Android User Experience
Excellence in the Android User Experience
 
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...
Get the Jump on Mobilizing your Notes and Domino Applications Today! (JMP103...
 
Droidcon2014 - Android UX
Droidcon2014 - Android UXDroidcon2014 - Android UX
Droidcon2014 - Android UX
 
Designing Rich Mobile Apps in a Fragmented World
Designing Rich Mobile Apps in a Fragmented WorldDesigning Rich Mobile Apps in a Fragmented World
Designing Rich Mobile Apps in a Fragmented World
 
Android Design Guidelines 1.1
Android Design Guidelines 1.1Android Design Guidelines 1.1
Android Design Guidelines 1.1
 
Designing Windows 8 application - Microsoft Techdays 2013
Designing Windows 8 application - Microsoft Techdays 2013Designing Windows 8 application - Microsoft Techdays 2013
Designing Windows 8 application - Microsoft Techdays 2013
 
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...
Connect 2014 AD209 - Making Your Development Team More Productive With IBM Do...
 
Uxpin web ui design patterns 2014
Uxpin web ui design patterns 2014Uxpin web ui design patterns 2014
Uxpin web ui design patterns 2014
 
Web UI Design Patterns 2014
Web UI Design Patterns 2014Web UI Design Patterns 2014
Web UI Design Patterns 2014
 
Mobile Design at Gilt
Mobile Design at GiltMobile Design at Gilt
Mobile Design at Gilt
 
Usability Design: Because it's awesome
Usability Design: Because it's awesomeUsability Design: Because it's awesome
Usability Design: Because it's awesome
 
Usability principles 1
Usability principles 1Usability principles 1
Usability principles 1
 
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!
Jmp103-Get the Jump on Mobilizing Your Notes and Domino Applications Today!
 
Unit 2
Unit 2Unit 2
Unit 2
 
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...
EntwicklerCamp 2014 - Domino Designer : Tips, Tricks and Enhancements for Max...
 
UCD and low-fidelity prototyping
UCD and low-fidelity prototypingUCD and low-fidelity prototyping
UCD and low-fidelity prototyping
 
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...
Android training in cochin android training in kochi android training in kera...
 
Dev fest ile ife 2014-ux, material design and trends
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
 

Recently uploaded

GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptxGraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptxNeo4j
 
From the origin to the future of Open Source model and business
From the origin to the future of  Open Source model and businessFrom the origin to the future of  Open Source model and business
From the origin to the future of Open Source model and businessFrancesco Corti
 
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024Alkin Tezuysal
 
Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfKey Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfCheryl Hung
 
Novo Nordisk's journey in developing an open-source application on Neo4j
Novo Nordisk's journey in developing an open-source application on Neo4jNovo Nordisk's journey in developing an open-source application on Neo4j
Novo Nordisk's journey in developing an open-source application on Neo4jNeo4j
 
March Patch Tuesday
March Patch TuesdayMarch Patch Tuesday
March Patch TuesdayIvanti
 
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptxEmil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptxNeo4j
 
IT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced ComputingIT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced ComputingMAGNIntelligence
 
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdf
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdfQ4 2023 Quarterly Investor Presentation - FINAL - v1.pdf
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdfTejal81
 
Graphene Quantum Dots-Based Composites for Biomedical Applications
Graphene Quantum Dots-Based Composites for  Biomedical ApplicationsGraphene Quantum Dots-Based Composites for  Biomedical Applications
Graphene Quantum Dots-Based Composites for Biomedical Applicationsnooralam814309
 
My key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAIMy key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAIVijayananda Mohire
 
AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024Brian Pichman
 
Oracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptxOracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptxSatishbabu Gunukula
 
UiPath Studio Web workshop series - Day 1
UiPath Studio Web workshop series  - Day 1UiPath Studio Web workshop series  - Day 1
UiPath Studio Web workshop series - Day 1DianaGray10
 
Planetek Italia Srl - Corporate Profile Brochure
Planetek Italia Srl - Corporate Profile BrochurePlanetek Italia Srl - Corporate Profile Brochure
Planetek Italia Srl - Corporate Profile BrochurePlanetek Italia Srl
 
LF Energy Webinar - Unveiling OpenEEMeter 4.0
LF Energy Webinar - Unveiling OpenEEMeter 4.0LF Energy Webinar - Unveiling OpenEEMeter 4.0
LF Energy Webinar - Unveiling OpenEEMeter 4.0DanBrown980551
 
TrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie WorldTrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie WorldTrustArc
 
How to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptxHow to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptxKaustubhBhavsar6
 
Explore the UiPath Community and ways you can benefit on your journey to auto...
Explore the UiPath Community and ways you can benefit on your journey to auto...Explore the UiPath Community and ways you can benefit on your journey to auto...
Explore the UiPath Community and ways you can benefit on your journey to auto...DianaGray10
 
2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdf2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdfThe Good Food Institute
 

Recently uploaded (20)

GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptxGraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
 
From the origin to the future of Open Source model and business
From the origin to the future of  Open Source model and businessFrom the origin to the future of  Open Source model and business
From the origin to the future of Open Source model and business
 
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
 
Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfKey Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdf
 
Novo Nordisk's journey in developing an open-source application on Neo4j
Novo Nordisk's journey in developing an open-source application on Neo4jNovo Nordisk's journey in developing an open-source application on Neo4j
Novo Nordisk's journey in developing an open-source application on Neo4j
 
March Patch Tuesday
March Patch TuesdayMarch Patch Tuesday
March Patch Tuesday
 
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptxEmil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
 
IT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced ComputingIT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced Computing
 
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdf
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdfQ4 2023 Quarterly Investor Presentation - FINAL - v1.pdf
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdf
 
Graphene Quantum Dots-Based Composites for Biomedical Applications
Graphene Quantum Dots-Based Composites for  Biomedical ApplicationsGraphene Quantum Dots-Based Composites for  Biomedical Applications
Graphene Quantum Dots-Based Composites for Biomedical Applications
 
My key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAIMy key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAI
 
AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024
 
Oracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptxOracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptx
 
UiPath Studio Web workshop series - Day 1
UiPath Studio Web workshop series  - Day 1UiPath Studio Web workshop series  - Day 1
UiPath Studio Web workshop series - Day 1
 
Planetek Italia Srl - Corporate Profile Brochure
Planetek Italia Srl - Corporate Profile BrochurePlanetek Italia Srl - Corporate Profile Brochure
Planetek Italia Srl - Corporate Profile Brochure
 
LF Energy Webinar - Unveiling OpenEEMeter 4.0
LF Energy Webinar - Unveiling OpenEEMeter 4.0LF Energy Webinar - Unveiling OpenEEMeter 4.0
LF Energy Webinar - Unveiling OpenEEMeter 4.0
 
TrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie WorldTrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie World
 
How to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptxHow to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptx
 
Explore the UiPath Community and ways you can benefit on your journey to auto...
Explore the UiPath Community and ways you can benefit on your journey to auto...Explore the UiPath Community and ways you can benefit on your journey to auto...
Explore the UiPath Community and ways you can benefit on your journey to auto...
 
2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdf2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdf
 

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