These are some notes taken from the Google I/O 2010 Android UI design patterns talk.
General recommendations about UI design: clarity should take precedence over simplicity. The click count number is not as important, as the clarity of how to achieve a certain task. The consistency is important, but more on a functional level, and not necessarily on the actual “chrome” or “skin” level. Make the UI elegant, clear, yet engaging. Note also, the first principle of a good design: be fast. Spent lost of time thinking and planning of what is the main story behind your app, what is the primary function, and focus on that.
UI design patterns
Dashboard – “What can I do with this app? What’s new?”
- A quick intro to an app, revealing capabilities and proactively highlighting new content.
- Full screen.
- Can be organized by: features, categories, accounts.
- DO focus on 3-6 main items for the user to choose from (2 x 3 items).
- DO highlight what’s new (or provide user with a hint, or something new, specials. Combine the old, stable, fixed with something specific for a given user, or new feature, or something specific, temporal).
- DO be flavourful (showcase the brand, show companions, use all real estate of the screen).
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 (e.g. search, refresh, compose/new).
- Can provide a quick link back to dashboard (or home screen).
- It is not toobar, and it is not replacement for menu. Just pick few actions and leverage them.
- DO use to bring key actions onscreen (up to 3)
- DO help to convey a sense of place
- DO use consistently within your app
- DON’T use for contextual actions (see quick action pattern below)
Quick Actions – “What can I do with this thing here?”
- Action popup triggered from distinct visual target.
- Long pressed on certain target.
- Minimally disruptive to screen context.
- Actions are straightforward, should be communicated via an icon or a short word. Focus on most obvious things a user might want to do.
- Fast and fun.
- DO use when items have competing internal targets
- DO present only the for most important and obvious actions
- DO use when the item doesn’t have a meaninfgul detail view
- DON’T use in contexts which support multiple selection (for selections use e.g. a new menu bar appearing from the bottom of the screen, as in gmail app)
Search Bar - “How can I find something?”
- Consistent pop-in search form anchored to top of screen
- Replaces action bar (if present)
- Should upport suggestions
- Can use corpora selector to alter search mode
- Alternatively, can offer suggestions for primary search mode, and additional items for triffering other modes.
- DO use for simple searches
- DO use the behaviour consistently
Companion Widget – Can I make this app a fun part of my Home screen?”
- Supports the app by displaying its content and capabilities on the Home screen
- Makes Home feel more custom, personalized
- DO provide value
- DO be space efficient
- DON’T make it too complex. DON’T try to provide too much.
- DO handoff to the app for more complex tasks
Enabling Device Diversity
- 3.7″, 480×800 252DPI (HDPI)
- 3.2″, 320×480 180DPI (MDPI)
- Use the hdpi/mdpi and ldpi for drawable assets.
- Scale assets yourself. Remember that MDPI to HDPI goes by 150%. Same between LDPI and MDPI.
New Android Icons
- Tactile, Rendered, Forward Facing, Top-lit, Synecdoche (rethorical device to associate the part to the whole and whole to the part, use a single aspect of the app to represent the entire app), Diverse shapes, materials
- Icon templates (use them to get started)
Presentation of an example (Google’s twitter client)
- Do not use tabs, use a dynamic bubble with icons instead
- Do use search bar and search history properly
- Do attach context menus (quick actions) within the ListView
- Twitter App code is going to be open sourced (date not known)