Download as KEY, PPTX
Uploaded byLuis Abreu
Android UI Design Tips
This document provides Android UI design tips and best practices. It discusses principles like focusing on the user, visibility, feedback, predictability and fault tolerance. It also covers common patterns like dashboards, action bars, quick actions, search bars and lists. The document recommends following Android guidelines and testing designs with real users. It notes that while the Android market has low-quality apps, good designs can deliver value and drive growth.
More Related Content
![[SwiftPH + PADC Meetup - May 2019] Mobile Interface Guidelines Comparison (iO...](https://cdn.slidesharecdn.com/ss_thumbnails/swiftph-mobileinterfaceguidelines-190522010444-thumbnail.jpg?width=640&height=640&fit=bounds)
![[Ebook] UI Document - Tú Bùi](https://cdn.slidesharecdn.com/ss_thumbnails/uidocument-150824092212-lva1-app6891-thumbnail.jpg?width=640&height=640&fit=bounds)
![Designing with Lean UX : Rapid Product Design [UX Lisbon 2014]](https://cdn.slidesharecdn.com/ss_thumbnails/uxlisbon2014designingleanux-workshopslideshare-140604100358-phpapp02-thumbnail.jpg?width=640&height=640&fit=bounds)
Android UI Design Tips
- 1. Android UI DesignTips by Luis Abreu
- 2. Introduction Luís Abreu isa Developer with an Interest in User Interface and User Experience Android early adopter
- 9. Why Do ICare? • End-User • Aesthetics • Quality • More likely to install/purchase
- 10. Agenda • Why ShouldYou Care • Principles of Interface Design • Do’s and Don’ts • Android UI Design Patterns • The State of Things
- 11. Why Should YouCare
- 12. Why Should YouCare • Better UI • Perceived Quality • Better Ratings • Better App Ranking • More Installs/Purchases
- 13.
- 14. Cycle Hire Widget Original Redesign
- 15. Cycle Hire List Original Redesign
- 16. Cycle Hire Map Original Redesign
- 17. Principles of InterfaceDesign
- 18. Principles of InterfaceDesign 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 onthe 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 theright things visible • The most common operations should be immediately visible and available • Secondary functionality can be reserved for the MENU button
- 21. 3. Show properfeedback • 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.
- 24.
- 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 towork with a UI Designer, Illustrator/Animator as soon as possible
- 28. Android UI DesignPatterns
- 29. “A design patternis a general reusable solution to a commonly occurring problem.” — Good Old Wikipedia
- 30. Android UI DesignPatterns • Dashboard • Action Bar • Quick Actions • Search Bar • Tabs • Lists • ...
- 31.
- 32.
- 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
- 35.
- 36.
- 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
- 39.
- 40.
- 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
- 43.
- 44.
- 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 ofThings
- 48. Android Market • ManyLow 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 2010Videos • 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 • Usethe Patterns, Luke • There’s plenty of room for improvement • UI Design: it pays back
- 54. Thank You • Twitter- @lmjabreu • Email - [email protected]
Editor's Notes
- #2 \n
- #3 \n
- #4 \n
- #5 \n
- #6 \n
- #7 \n
- #8 \n
- #9 \n
- #10 \n
- #11 \n
- #12 \n
- #13 contribute to the platform, more high quality apps = more users & installs/purchases, leading to more high profile developers\n
- #14 Cycle Hire App Surgery - http://goo.gl/8wZN\n
- #15 \n
- #16 \n
- #17 \n
- #18 \n
- #19 Focus on the user > the task he wants to accomplish, his context\n\nMake the right things visible > so that the user doesn&#x2019;t have to dig into your app\n\nShow proper feedback > don&#x2019;t make the user guess what&#x2019;s going on\n\nBe predictable > don&#x2019;t make the user think\n\nBe fault-tolerant > users make mistakes, help them avoid them\n
- #20 know thy users for they are not you - http://goo.gl/PrWVg\n
- #21 \n
- #22 \n
- #23 \n
- #24 \n
- #25 \n
- #26 \n
- #27 \n
- #28 \n
- #29 \n
- #30 \n
- #31 \n
- #32 \n
- #33 \n
- #34 \n
- #35 \n
- #36 \n
- #37 \n
- #38 \n
- #39 \n
- #40 \n
- #41 \n
- #42 \n
- #43 \n
- #44 \n
- #45 \n
- #46 \n
- #47 \n
- #48 \n
- #49 \n
- #50 \n
- #51 \n
- #52 \n
- #53 \n
- #54 \n
- #55 \n