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

An Introduction to Ben Shneiderman's Eight Golden Rules of Interface Design
An Introduction to Ben Shneiderman's Eight Golden Rules of Interface DesignAn Introduction to Ben Shneiderman's Eight Golden Rules of Interface Design
An Introduction to Ben Shneiderman's Eight Golden Rules of Interface DesignJochen Wolters
 
Introduction to Android and Android Studio
Introduction to Android and Android StudioIntroduction to Android and Android Studio
Introduction to Android and Android StudioSuyash Srijan
 
Android activities & views
Android activities & viewsAndroid activities & views
Android activities & viewsma-polimi
 
Android Programming Basics
Android Programming BasicsAndroid Programming Basics
Android Programming BasicsEueung Mulyana
 
Graphical User Interface (Gui)
Graphical User Interface (Gui)Graphical User Interface (Gui)
Graphical User Interface (Gui)Bilal Amjad
 
Human computer interaction -Design and software process
Human computer interaction -Design and software processHuman computer interaction -Design and software process
Human computer interaction -Design and software processN.Jagadish Kumar
 
Android resources
Android resourcesAndroid resources
Android resourcesma-polimi
 
HCI LAB MANUAL
HCI LAB MANUAL HCI LAB MANUAL
HCI LAB MANUAL Um e Farwa
 
Introduction to programming
Introduction to programmingIntroduction to programming
Introduction to programmingNeeru Mittal
 
Problem Solving and Python Programming
Problem Solving and Python ProgrammingProblem Solving and Python Programming
Problem Solving and Python ProgrammingMahaJeya
 
Eclipse introduction IDE PRESENTATION
Eclipse introduction IDE PRESENTATIONEclipse introduction IDE PRESENTATION
Eclipse introduction IDE PRESENTATIONAYESHA JAVED
 
Flutter presentation.pptx
Flutter presentation.pptxFlutter presentation.pptx
Flutter presentation.pptxFalgunSorathiya
 
SELECT THE PROPER KINDS OF WINDOWS
SELECT THE PROPER KINDS OF WINDOWSSELECT THE PROPER KINDS OF WINDOWS
SELECT THE PROPER KINDS OF WINDOWSDhanya LK
 

What's hot (20)

An Introduction to Ben Shneiderman's Eight Golden Rules of Interface Design
An Introduction to Ben Shneiderman's Eight Golden Rules of Interface DesignAn Introduction to Ben Shneiderman's Eight Golden Rules of Interface Design
An Introduction to Ben Shneiderman's Eight Golden Rules of Interface Design
 
Introduction to Android and Android Studio
Introduction to Android and Android StudioIntroduction to Android and Android Studio
Introduction to Android and Android Studio
 
Android activities & views
Android activities & viewsAndroid activities & views
Android activities & views
 
Android Programming Basics
Android Programming BasicsAndroid Programming Basics
Android Programming Basics
 
Android architecture
Android architectureAndroid architecture
Android architecture
 
Tcp/ip server sockets
Tcp/ip server socketsTcp/ip server sockets
Tcp/ip server sockets
 
Graphical User Interface (Gui)
Graphical User Interface (Gui)Graphical User Interface (Gui)
Graphical User Interface (Gui)
 
Human computer interaction -Design and software process
Human computer interaction -Design and software processHuman computer interaction -Design and software process
Human computer interaction -Design and software process
 
Android resources
Android resourcesAndroid resources
Android resources
 
HCI LAB MANUAL
HCI LAB MANUAL HCI LAB MANUAL
HCI LAB MANUAL
 
Object oriented programming
Object oriented programmingObject oriented programming
Object oriented programming
 
Introduction to programming
Introduction to programmingIntroduction to programming
Introduction to programming
 
Problem Solving and Python Programming
Problem Solving and Python ProgrammingProblem Solving and Python Programming
Problem Solving and Python Programming
 
Eclipse introduction IDE PRESENTATION
Eclipse introduction IDE PRESENTATIONEclipse introduction IDE PRESENTATION
Eclipse introduction IDE PRESENTATION
 
Object model
Object modelObject model
Object model
 
Flutter presentation.pptx
Flutter presentation.pptxFlutter presentation.pptx
Flutter presentation.pptx
 
SELECT THE PROPER KINDS OF WINDOWS
SELECT THE PROPER KINDS OF WINDOWSSELECT THE PROPER KINDS OF WINDOWS
SELECT THE PROPER KINDS OF WINDOWS
 
Ide
IdeIde
Ide
 
Text Editor in System software
Text Editor in System softwareText Editor in System software
Text Editor in System software
 
Unit 11. Graphics
Unit 11. GraphicsUnit 11. Graphics
Unit 11. Graphics
 

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

Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxUdaiappa Ramachandran
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDELiveplex
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?IES VE
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 

Recently uploaded (20)

Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptx
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
 
20150722 - AGV
20150722 - AGV20150722 - AGV
20150722 - AGV
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 

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