SlideShare a Scribd company logo
Android UI Design Tips
        by Luis Abreu
Introduction

Luís Abreu is a
Developer with an
Interest in User Interface and User Experience
Android early adopter
Android UI Design Tips
Android UI Design Tips
Android UI Design Tips
Android UI Design Tips
Android UI Design Tips
Android UI Design Tips
Why Do I Care?

• End-User
 • Aesthetics
   • Quality
     • More likely to install/purchase
Agenda

• Why Should You Care
• Principles of Interface Design
• Do’s and Don’ts
• Android UI Design Patterns
• The State of Things
Why Should You Care
Why Should You Care

• Better UI
 • Perceived Quality
   • Better Ratings
     • Better App Ranking
       • More Installs/Purchases
Example

Cycle Hire
Cycle Hire
              Widget




Original                Redesign
Cycle Hire
               List




Original                Redesign
Cycle Hire
               Map




Original                Redesign
Principles of Interface Design
Principles of Interface Design

1. Focus on the user
2. Make the right things visible
3. Show proper feedback
4. Be predictable
5. Be fault-tolerant
1. Focus on the user
• Know your users
  • Age, skill level, culture, disabilities, etc.
  • What task are they trying to achieve
  • What kinds of devices they’ll be using
  • Where/when/how they’ll be using their
     devices
• Test on real users, early and often
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
3. Show proper feedback


• Make sure the effects of an action are clear
  and visible
• Show adequate yet unobtrusive status
  indicators
4. Be predictable
• Do what the user expects
 • Properly manage the activity stack
 • Show information and actions users
    expect to see
• Use proper affordances
 • If it acts like a button, make sure it looks
    like a button
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
 • Use as few modal dialogs as possible.
Do’s and Don’ts
•   DON’T reinvent the     •   DON’T hijack the back
    wheel                      or menu buttons

•   DON’T port the UI
    from other platforms

•   DON’T use small font
    sizes

•   DON’T overuse modal
    progress and
    confirmation dialogs
•   DO create resources          •   DO properly manage
    for all different screen         the activity stack
    densities
                                 •   DO think about the
•   DO make large, obvious           device and context your
    tap targets (buttons, list       app will be used
    items)
                                 •   DO use native icons
•   DO follow existing UI
    Guidelines (Icon,
    Activity, Menu, Widget)
DO try to work with a UI Designer,
Illustrator/Animator as soon as possible
Android UI Design Patterns
“A design pattern is a general
reusable solution to a
commonly occurring problem.”
                 — Good Old Wikipedia
Android UI Design Patterns
•   Dashboard
•   Action Bar
•   Quick Actions
•   Search Bar
•   Tabs
•   Lists
•   ...
Dashboard
Dashboard
Dashboard
   “What can I do with this app? What’s new?”

• A quick intro to an app, revealing
  capabilities and proactively highlighting new
  content
• Can be organized by:
 • Features
 • Categories
 • Accounts
Dashboard
             Recommendations




• Highlight what’s new
• Focus on the 3-8 most important features
Action Bar
Action Bar
Action Bar
        “How can I do <common action> quickly?”

•   Dedicated real estate at top of the screen to support
    navigation and frequently used operations
•   Replaces title bar
•   Best for actions common across your app
    •   Search
    •   Refresh
    •   Compose
•   Can provide a quick link back to dashboard (or other app
    home)
Action Bar
             Recommendations

• Used to bring key actions onscreen
• Use consistently across your app
• Not for contextual actions
 • Delete
 • Edit
 • Call
Quick Actions
Quick Actions
Quick Actions
           “What can I do with this thing?”



• Action popup triggered from distinct visual
  target
• Minimally disruptive to screen context
• Actions are straightforward
• Fast & fun
Quick Actions
              Recommendations

• Use when items have competing internal
  targets
• Most important and obvious actions
• Use when the item doesn’t have a
  meaningful detail view
• Don’t use in contexts which support
  multiple selection
Search Bar
Search Bar
Search Bar
              “How can I find something?”

•   Consistent pop-in search form anchored to top of
    screen
•   Replaces action bar (if present)
•   Support suggestions
•   Can use a Quick Action selector to alter search
    mode
    •   Alternately, can offer suggestions for primary
        search mode, and additional items for triggering
        other modes
Search Bar
              Recommendations




• Use for simple searches
• Present rich suggestions
• Use the same behavior
The State of Things
Android Market
• Many Low Quality Apps
 • Room for improvement
• Low perception of value makes users less
  willing to pay, developer houses
• You can bring value to the platform
• 300000 Android users activated daily
Official Documentation
•   http://goo.gl/Uhh1

    •   Icon Design Guidelines and Templates

    •   Widget Design Guidelines

    •   Activity and Task Design Guidelines

    •   Menu Design Guidelines
Google I/O 2010 Videos
•   http://goo.gl/IJzVq

    •   Android UI Design Patterns

    •   The world of ListView

    •   Writing zippy Android Applications

    •   ...
Books/Presentations
•   Professional Android 2 Application
    Development

•   Android UI Design Patterns & Best Practices

•   Radioactive Yak App Surgery

•   Tapworthy Screencast

•   Android UI Design Tips
Other
•   Android UI Patterns Flickr Collection

•   Android Applications Flickr Collection

•   Android Drawables Explorer
Wrap Up

• Use the Patterns, Luke
• There’s plenty of room for improvement
• UI Design: it pays back
Thank You


• Twitter - @lmjabreu
• Email - lmjabreu@gmail.com

More Related Content

PDF
Android 4.0 UI Design Tips
PDF
The Best Windows Phone Apps 2013: A Designers Collection
PDF
Android UI design Patter
PDF
2012/02/15 Android 4.0 UI Design Tips@happy designer meetup
PDF
Android UI Design Tips
PPTX
iOS Human Interface Guideline
PDF
iOS 7 UI Transition Guide
PPTX
iOS Human Interface Guidelines (HCI)
Android 4.0 UI Design Tips
The Best Windows Phone Apps 2013: A Designers Collection
Android UI design Patter
2012/02/15 Android 4.0 UI Design Tips@happy designer meetup
Android UI Design Tips
iOS Human Interface Guideline
iOS 7 UI Transition Guide
iOS Human Interface Guidelines (HCI)

What's hot (20)

ZIP
Joomla User eXperience - Joomla Day NYC 2011
PDF
Android Design
PDF
Mobile App Development
PDF
打造你的第一個iPhone APP
PDF
iOS 7 Human Interface Guidelines
PDF
Adobe Max Modern iPhone App Design with Rick Messer
PDF
Mobile Development Architecture Ppt with Slides, Book Notes on using Web Silv...
PPTX
Graphical user-interface
PPTX
Consider Starting Small
PDF
[SwiftPH + PADC Meetup - May 2019] Mobile Interface Guidelines Comparison (iO...
PPT
Introduction to Mobile Application Development on Android
PDF
Tapping into Mobile UI with HTML 5
PPT
Lec005 android start_program
PDF
Stanford CS193P - Designing for iPad
PDF
Mobile Human interface giude
PPTX
Introduction to Android development - Presentation
KEY
Why the iPad UI matters, And how it differs from the Tablet PC, but also from...
PPTX
Mobile Application Development: Hybrid, Native and Mobile Web Apps
PDF
Introduction to Cross-Platform Hybrid Mobile App Development
PDF
Create great UIs for budget phones
Joomla User eXperience - Joomla Day NYC 2011
Android Design
Mobile App Development
打造你的第一個iPhone APP
iOS 7 Human Interface Guidelines
Adobe Max Modern iPhone App Design with Rick Messer
Mobile Development Architecture Ppt with Slides, Book Notes on using Web Silv...
Graphical user-interface
Consider Starting Small
[SwiftPH + PADC Meetup - May 2019] Mobile Interface Guidelines Comparison (iO...
Introduction to Mobile Application Development on Android
Tapping into Mobile UI with HTML 5
Lec005 android start_program
Stanford CS193P - Designing for iPad
Mobile Human interface giude
Introduction to Android development - Presentation
Why the iPad UI matters, And how it differs from the Tablet PC, but also from...
Mobile Application Development: Hybrid, Native and Mobile Web Apps
Introduction to Cross-Platform Hybrid Mobile App Development
Create great UIs for budget phones
Ad

Viewers also liked (16)

PPT
What is Tiki?
PDF
iOS Accessibility
PDF
[Ebook] UI Document - Tú Bùi
PPTX
Polynesian art ppt
PPTX
App Studio - Session 2: Build your first App with App Studio
PPTX
Mobile App Design for Behavior Change
PDF
Mobile App Design Best Practices - Usable Interfaces for Tiny Places
PPTX
Android User Interface Design
KEY
Icon & App Design Secrets for Mobile
PDF
Mobile App Design Proposal
PPT
Android ppt
PPTX
Styles of iOS UI app
PDF
Designing with Lean UX : Rapid Product Design [UX Lisbon 2014]
PDF
UX Design + UI Design: Injecting a brand persona!
PDF
Android Basic Components
PDF
UX, ethnography and possibilities: for Libraries, Museums and Archives
What is Tiki?
iOS Accessibility
[Ebook] UI Document - Tú Bùi
Polynesian art ppt
App Studio - Session 2: Build your first App with App Studio
Mobile App Design for Behavior Change
Mobile App Design Best Practices - Usable Interfaces for Tiny Places
Android User Interface Design
Icon & App Design Secrets for Mobile
Mobile App Design Proposal
Android ppt
Styles of iOS UI app
Designing with Lean UX : Rapid Product Design [UX Lisbon 2014]
UX Design + UI Design: Injecting a brand persona!
Android Basic Components
UX, ethnography and possibilities: for Libraries, Museums and Archives
Ad

Similar to Android UI Design Tips (20)

PDF
Android android-ui-design-patterns
PDF
Common Design Patterns for Mobile (part 2)
PDF
Android Design Guidelines 4.0
PDF
Design patterns for mobile apps
PDF
Design patterns for mobile apps
PDF
Excellence in the Android User Experience
PDF
UI Design
KEY
Best Mobile UI Practices - FITC Mobile 2010
PDF
Droidcon2014 - Android UX
PPTX
Android design patterns in mobile application development presentation
PPT
Android ui patterns
PPT
Android ui patterns
PDF
Designing apps for Android
PDF
Android UX-UI Design for Fun and Profit
PDF
Android UX-UI Design for Fun and Profit
PDF
Android UX-UI Design for fun and profit | Fernando Cejas | Tuenti
PDF
Tampa Bay UX - Scary UI 2
PDF
Common Design Patterns for Mobile (part 1)
PPTX
Design for Android OS training (some technical tips)
PDF
UI design for mobile apps
Android android-ui-design-patterns
Common Design Patterns for Mobile (part 2)
Android Design Guidelines 4.0
Design patterns for mobile apps
Design patterns for mobile apps
Excellence in the Android User Experience
UI Design
Best Mobile UI Practices - FITC Mobile 2010
Droidcon2014 - Android UX
Android design patterns in mobile application development presentation
Android ui patterns
Android ui patterns
Designing apps for Android
Android UX-UI Design for Fun and Profit
Android UX-UI Design for Fun and Profit
Android UX-UI Design for fun and profit | Fernando Cejas | Tuenti
Tampa Bay UX - Scary UI 2
Common Design Patterns for Mobile (part 1)
Design for Android OS training (some technical tips)
UI design for mobile apps

Recently uploaded (20)

PPTX
Big Data Technologies - Introduction.pptx
PDF
CIFDAQ's Market Insight: SEC Turns Pro Crypto
PDF
cuic standard and advanced reporting.pdf
PPTX
Cloud computing and distributed systems.
PDF
How UI/UX Design Impacts User Retention in Mobile Apps.pdf
PPT
Teaching material agriculture food technology
PDF
Peak of Data & AI Encore- AI for Metadata and Smarter Workflows
PDF
Mobile App Security Testing_ A Comprehensive Guide.pdf
PPTX
20250228 LYD VKU AI Blended-Learning.pptx
PDF
Advanced methodologies resolving dimensionality complications for autism neur...
PDF
Review of recent advances in non-invasive hemoglobin estimation
PDF
Approach and Philosophy of On baking technology
PDF
NewMind AI Weekly Chronicles - August'25 Week I
PDF
Building Integrated photovoltaic BIPV_UPV.pdf
PPTX
VMware vSphere Foundation How to Sell Presentation-Ver1.4-2-14-2024.pptx
PDF
7 ChatGPT Prompts to Help You Define Your Ideal Customer Profile.pdf
PDF
Empathic Computing: Creating Shared Understanding
PDF
Machine learning based COVID-19 study performance prediction
PPTX
A Presentation on Artificial Intelligence
PDF
Shreyas Phanse Resume: Experienced Backend Engineer | Java • Spring Boot • Ka...
Big Data Technologies - Introduction.pptx
CIFDAQ's Market Insight: SEC Turns Pro Crypto
cuic standard and advanced reporting.pdf
Cloud computing and distributed systems.
How UI/UX Design Impacts User Retention in Mobile Apps.pdf
Teaching material agriculture food technology
Peak of Data & AI Encore- AI for Metadata and Smarter Workflows
Mobile App Security Testing_ A Comprehensive Guide.pdf
20250228 LYD VKU AI Blended-Learning.pptx
Advanced methodologies resolving dimensionality complications for autism neur...
Review of recent advances in non-invasive hemoglobin estimation
Approach and Philosophy of On baking technology
NewMind AI Weekly Chronicles - August'25 Week I
Building Integrated photovoltaic BIPV_UPV.pdf
VMware vSphere Foundation How to Sell Presentation-Ver1.4-2-14-2024.pptx
7 ChatGPT Prompts to Help You Define Your Ideal Customer Profile.pdf
Empathic Computing: Creating Shared Understanding
Machine learning based COVID-19 study performance prediction
A Presentation on Artificial Intelligence
Shreyas Phanse Resume: Experienced Backend Engineer | Java • Spring Boot • Ka...

Android UI Design Tips

  • 1. Android UI Design Tips by Luis Abreu
  • 2. Introduction Luís Abreu is a Developer with an Interest in User Interface and User Experience Android early adopter
  • 9. Why Do I Care? • End-User • Aesthetics • Quality • More likely to install/purchase
  • 10. Agenda • Why Should You Care • Principles of Interface Design • Do’s and Don’ts • Android UI Design Patterns • The State of Things
  • 12. Why Should You Care • Better UI • Perceived Quality • Better Ratings • Better App Ranking • More Installs/Purchases
  • 14. Cycle Hire Widget Original Redesign
  • 15. Cycle Hire List Original Redesign
  • 16. Cycle Hire Map Original Redesign
  • 18. Principles of Interface Design 1. Focus on the user 2. Make the right things visible 3. Show proper feedback 4. Be predictable 5. Be fault-tolerant
  • 19. 1. Focus on the user • Know your users • Age, skill level, culture, disabilities, etc. • What task are they trying to achieve • What kinds of devices they’ll be using • Where/when/how they’ll be using their devices • Test on real users, early and often
  • 20. 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
  • 21. 3. Show proper feedback • Make sure the effects of an action are clear and visible • Show adequate yet unobtrusive status indicators
  • 22. 4. Be predictable • Do what the user expects • Properly manage the activity stack • Show information and actions users expect to see • Use proper affordances • If it acts like a button, make sure it looks like a button
  • 23. 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 • Use as few modal dialogs as possible.
  • 25. DON’T reinvent the • DON’T hijack the back wheel or menu buttons • DON’T port the UI from other platforms • DON’T use small font sizes • DON’T overuse modal progress and confirmation dialogs
  • 26. DO create resources • DO properly manage for all different screen the activity stack densities • DO think about the • DO make large, obvious device and context your tap targets (buttons, list app will be used items) • DO use native icons • DO follow existing UI Guidelines (Icon, Activity, Menu, Widget)
  • 27. DO try to work with a UI Designer, Illustrator/Animator as soon as possible
  • 28. Android UI Design Patterns
  • 29. “A design pattern is a general reusable solution to a commonly occurring problem.” — Good Old Wikipedia
  • 30. Android UI Design Patterns • Dashboard • Action Bar • Quick Actions • Search Bar • Tabs • Lists • ...
  • 33. Dashboard “What can I do with this app? What’s new?” • A quick intro to an app, revealing capabilities and proactively highlighting new content • Can be organized by: • Features • Categories • Accounts
  • 34. Dashboard Recommendations • Highlight what’s new • Focus on the 3-8 most important features
  • 37. Action Bar “How can I do <common action> quickly?” • Dedicated real estate at top of the screen to support navigation and frequently used operations • Replaces title bar • Best for actions common across your app • Search • Refresh • Compose • Can provide a quick link back to dashboard (or other app home)
  • 38. Action Bar Recommendations • Used to bring key actions onscreen • Use consistently across your app • Not for contextual actions • Delete • Edit • Call
  • 41. Quick Actions “What can I do with this thing?” • Action popup triggered from distinct visual target • Minimally disruptive to screen context • Actions are straightforward • Fast & fun
  • 42. Quick Actions Recommendations • Use when items have competing internal targets • Most important and obvious actions • Use when the item doesn’t have a meaningful detail view • Don’t use in contexts which support multiple selection
  • 45. Search Bar “How can I find something?” • Consistent pop-in search form anchored to top of screen • Replaces action bar (if present) • Support suggestions • Can use a Quick Action selector to alter search mode • Alternately, can offer suggestions for primary search mode, and additional items for triggering other modes
  • 46. Search Bar Recommendations • Use for simple searches • Present rich suggestions • Use the same behavior
  • 47. The State of Things
  • 48. Android Market • Many Low Quality Apps • Room for improvement • Low perception of value makes users less willing to pay, developer houses • You can bring value to the platform • 300000 Android users activated daily
  • 49. Official Documentation • http://goo.gl/Uhh1 • Icon Design Guidelines and Templates • Widget Design Guidelines • Activity and Task Design Guidelines • Menu Design Guidelines
  • 50. Google I/O 2010 Videos • http://goo.gl/IJzVq • Android UI Design Patterns • The world of ListView • Writing zippy Android Applications • ...
  • 51. Books/Presentations • Professional Android 2 Application Development • Android UI Design Patterns & Best Practices • Radioactive Yak App Surgery • Tapworthy Screencast • Android UI Design Tips
  • 52. Other • Android UI Patterns Flickr Collection • Android Applications Flickr Collection • Android Drawables Explorer
  • 53. Wrap Up • Use the Patterns, Luke • There’s plenty of room for improvement • UI Design: it pays back
  • 54. Thank You • Twitter - @lmjabreu • Email - lmjabreu@gmail.com

Editor's Notes