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

Android OS & SDK - Getting Started
Android OS & SDK - Getting StartedAndroid OS & SDK - Getting Started
Android OS & SDK - Getting StartedHemant Chhapoliya
 
Android app development ppt
Android app development pptAndroid app development ppt
Android app development pptsaitej15
 
6 mobile user interface design bb
6   mobile user interface design bb6   mobile user interface design bb
6 mobile user interface design bbShahid Riaz
 
USER INTERFACE DESIGN PPT
USER INTERFACE DESIGN PPTUSER INTERFACE DESIGN PPT
USER INTERFACE DESIGN PPTvicci4041
 
User interface design: definitions, processes and principles
User interface design: definitions, processes and principlesUser interface design: definitions, processes and principles
User interface design: definitions, processes and principlesDavid Little
 
Cross-Platform App Development with Flutter, Xamarin, React Native
Cross-Platform App Development with Flutter, Xamarin, React NativeCross-Platform App Development with Flutter, Xamarin, React Native
Cross-Platform App Development with Flutter, Xamarin, React NativeKorhan Bircan
 
Software Development Model - Waterfall, RAD & Agile
Software Development Model - Waterfall, RAD & AgileSoftware Development Model - Waterfall, RAD & Agile
Software Development Model - Waterfall, RAD & AgileFakrudin Abu Bakar
 
Designing Web Interfaces
Designing Web InterfacesDesigning Web Interfaces
Designing Web InterfacesBill Scott
 
Software Development Life Cycle
Software Development Life CycleSoftware Development Life Cycle
Software Development Life CycleSlideshare
 
Comparison of Software Engineering Models
Comparison of Software Engineering  ModelsComparison of Software Engineering  Models
Comparison of Software Engineering Modelstahir iqbal
 
Software Estimation Techniques
Software Estimation TechniquesSoftware Estimation Techniques
Software Estimation Techniqueskamal
 
Android testing
Android testingAndroid testing
Android testingJinaTm
 
Android ui dialog
Android ui dialogAndroid ui dialog
Android ui dialogKrazy Koder
 

What's hot (20)

Android OS & SDK - Getting Started
Android OS & SDK - Getting StartedAndroid OS & SDK - Getting Started
Android OS & SDK - Getting Started
 
Software engineering
Software engineeringSoftware engineering
Software engineering
 
Web controls
Web controlsWeb controls
Web controls
 
Android app development ppt
Android app development pptAndroid app development ppt
Android app development ppt
 
6 mobile user interface design bb
6   mobile user interface design bb6   mobile user interface design bb
6 mobile user interface design bb
 
Prototype Model
Prototype ModelPrototype Model
Prototype Model
 
The Mobile Ecosystem
The Mobile EcosystemThe Mobile Ecosystem
The Mobile Ecosystem
 
Cocomo model
Cocomo modelCocomo model
Cocomo model
 
UI / UX Design Presentation
UI / UX Design PresentationUI / UX Design Presentation
UI / UX Design Presentation
 
USER INTERFACE DESIGN PPT
USER INTERFACE DESIGN PPTUSER INTERFACE DESIGN PPT
USER INTERFACE DESIGN PPT
 
User interface design: definitions, processes and principles
User interface design: definitions, processes and principlesUser interface design: definitions, processes and principles
User interface design: definitions, processes and principles
 
Cross-Platform App Development with Flutter, Xamarin, React Native
Cross-Platform App Development with Flutter, Xamarin, React NativeCross-Platform App Development with Flutter, Xamarin, React Native
Cross-Platform App Development with Flutter, Xamarin, React Native
 
Software Development Model - Waterfall, RAD & Agile
Software Development Model - Waterfall, RAD & AgileSoftware Development Model - Waterfall, RAD & Agile
Software Development Model - Waterfall, RAD & Agile
 
Designing Web Interfaces
Designing Web InterfacesDesigning Web Interfaces
Designing Web Interfaces
 
Software Development Life Cycle
Software Development Life CycleSoftware Development Life Cycle
Software Development Life Cycle
 
Comparison of Software Engineering Models
Comparison of Software Engineering  ModelsComparison of Software Engineering  Models
Comparison of Software Engineering Models
 
Incremental Model
Incremental ModelIncremental Model
Incremental Model
 
Software Estimation Techniques
Software Estimation TechniquesSoftware Estimation Techniques
Software Estimation Techniques
 
Android testing
Android testingAndroid testing
Android testing
 
Android ui dialog
Android ui dialogAndroid ui dialog
Android ui dialog
 

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

What's New in Teams Calling, Meetings and Devices April 2024
What's New in Teams Calling, Meetings and Devices April 2024What's New in Teams Calling, Meetings and Devices April 2024
What's New in Teams Calling, Meetings and Devices April 2024Stephanie Beckett
 
Where to Learn More About FDO _ Richard at FIDO Alliance.pdf
Where to Learn More About FDO _ Richard at FIDO Alliance.pdfWhere to Learn More About FDO _ Richard at FIDO Alliance.pdf
Where to Learn More About FDO _ Richard at FIDO Alliance.pdfFIDO Alliance
 
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...panagenda
 
FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...
FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...
FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...FIDO Alliance
 
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdfThe Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdfFIDO Alliance
 
AI presentation and introduction - Retrieval Augmented Generation RAG 101
AI presentation and introduction - Retrieval Augmented Generation RAG 101AI presentation and introduction - Retrieval Augmented Generation RAG 101
AI presentation and introduction - Retrieval Augmented Generation RAG 101vincent683379
 
The Metaverse: Are We There Yet?
The  Metaverse:    Are   We  There  Yet?The  Metaverse:    Are   We  There  Yet?
The Metaverse: Are We There Yet?Mark Billinghurst
 
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...FIDO Alliance
 
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...FIDO Alliance
 
Powerful Start- the Key to Project Success, Barbara Laskowska
Powerful Start- the Key to Project Success, Barbara LaskowskaPowerful Start- the Key to Project Success, Barbara Laskowska
Powerful Start- the Key to Project Success, Barbara LaskowskaCzechDreamin
 
Syngulon - Selection technology May 2024.pdf
Syngulon - Selection technology May 2024.pdfSyngulon - Selection technology May 2024.pdf
Syngulon - Selection technology May 2024.pdfSyngulon
 
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...CzechDreamin
 
WebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM PerformanceWebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM PerformanceSamy Fodil
 
Microsoft CSP Briefing Pre-Engagement - Questionnaire
Microsoft CSP Briefing Pre-Engagement - QuestionnaireMicrosoft CSP Briefing Pre-Engagement - Questionnaire
Microsoft CSP Briefing Pre-Engagement - QuestionnaireExakis Nelite
 
Oauth 2.0 Introduction and Flows with MuleSoft
Oauth 2.0 Introduction and Flows with MuleSoftOauth 2.0 Introduction and Flows with MuleSoft
Oauth 2.0 Introduction and Flows with MuleSoftshyamraj55
 
Easier, Faster, and More Powerful – Notes Document Properties Reimagined
Easier, Faster, and More Powerful – Notes Document Properties ReimaginedEasier, Faster, and More Powerful – Notes Document Properties Reimagined
Easier, Faster, and More Powerful – Notes Document Properties Reimaginedpanagenda
 
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdfHow Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdfFIDO Alliance
 
PLAI - Acceleration Program for Generative A.I. Startups
PLAI - Acceleration Program for Generative A.I. StartupsPLAI - Acceleration Program for Generative A.I. Startups
PLAI - Acceleration Program for Generative A.I. StartupsStefano
 
Portal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russePortal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russe中 央社
 
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdfSimplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdfFIDO Alliance
 

Recently uploaded (20)

What's New in Teams Calling, Meetings and Devices April 2024
What's New in Teams Calling, Meetings and Devices April 2024What's New in Teams Calling, Meetings and Devices April 2024
What's New in Teams Calling, Meetings and Devices April 2024
 
Where to Learn More About FDO _ Richard at FIDO Alliance.pdf
Where to Learn More About FDO _ Richard at FIDO Alliance.pdfWhere to Learn More About FDO _ Richard at FIDO Alliance.pdf
Where to Learn More About FDO _ Richard at FIDO Alliance.pdf
 
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
 
FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...
FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...
FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...
 
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdfThe Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
 
AI presentation and introduction - Retrieval Augmented Generation RAG 101
AI presentation and introduction - Retrieval Augmented Generation RAG 101AI presentation and introduction - Retrieval Augmented Generation RAG 101
AI presentation and introduction - Retrieval Augmented Generation RAG 101
 
The Metaverse: Are We There Yet?
The  Metaverse:    Are   We  There  Yet?The  Metaverse:    Are   We  There  Yet?
The Metaverse: Are We There Yet?
 
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
 
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
 
Powerful Start- the Key to Project Success, Barbara Laskowska
Powerful Start- the Key to Project Success, Barbara LaskowskaPowerful Start- the Key to Project Success, Barbara Laskowska
Powerful Start- the Key to Project Success, Barbara Laskowska
 
Syngulon - Selection technology May 2024.pdf
Syngulon - Selection technology May 2024.pdfSyngulon - Selection technology May 2024.pdf
Syngulon - Selection technology May 2024.pdf
 
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
 
WebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM PerformanceWebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM Performance
 
Microsoft CSP Briefing Pre-Engagement - Questionnaire
Microsoft CSP Briefing Pre-Engagement - QuestionnaireMicrosoft CSP Briefing Pre-Engagement - Questionnaire
Microsoft CSP Briefing Pre-Engagement - Questionnaire
 
Oauth 2.0 Introduction and Flows with MuleSoft
Oauth 2.0 Introduction and Flows with MuleSoftOauth 2.0 Introduction and Flows with MuleSoft
Oauth 2.0 Introduction and Flows with MuleSoft
 
Easier, Faster, and More Powerful – Notes Document Properties Reimagined
Easier, Faster, and More Powerful – Notes Document Properties ReimaginedEasier, Faster, and More Powerful – Notes Document Properties Reimagined
Easier, Faster, and More Powerful – Notes Document Properties Reimagined
 
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdfHow Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf
 
PLAI - Acceleration Program for Generative A.I. Startups
PLAI - Acceleration Program for Generative A.I. StartupsPLAI - Acceleration Program for Generative A.I. Startups
PLAI - Acceleration Program for Generative A.I. Startups
 
Portal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russePortal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russe
 
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdfSimplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.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