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
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
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
contribute to the platform, more high quality apps = more users & installs/purchases, leading to more high profile developers\n
Cycle Hire App Surgery - http://goo.gl/8wZN\n
\n
\n
\n
\n
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
know thy users for they are not you - http://goo.gl/PrWVg\n
