Android Design in Action

2013 Recap and links to must see videos

All the following notes are taken from this great video published by the Google Android Team.

Workflow

Sketches
— great for soliciting high level feedback
— great for generating additional ideas
Wireframe
— focus on interactive instead of visual design
— Full Fidelity Mockups (Photoshop / Illustrator / …)
— Decide on the visual direction
Flows
— Visualize a sequence of steps
Redlines
— specs of exact values (fonts, colors, …)

Beautiful Apps (watch video)

These are apps that are 100% pure Android apps (follow most or all the guidelines, and look like the were created by Google itself)
— Pocket
— Pinterest
— TED
— Flipboard
— New York Times
— Google I/O: Open Source App! (great example of how to use fragments, use and style the Action Bar, support different screen sizes)

Google Play Redesign (watch video)

— Responsive: UI adapts to the screen size
— Modular
— Familiar and emotionally evocative
— Importance of use of colors: use different colors for different sections (movies, apps, music) so that the user always and easily knows where they are in the app (ie: the ActionBar is red in all screens under movies, and has other colors in other sections)

Favorite App Designs (watch video)

Put the extra effort in (animations, ease of use, details)
— Foursquare
— AirBnB
— Timely
— Libra
— Etsy

Branding and Consistency (watch video)

Find a balance between your own information/interaction/visual design and Holo’s one. Make sure your apps are “familiar” to the user, so that they don’t have to struggle to learn how it works. Users should have tricks that they can use everywhere (like visual indicators that tell something to the user — don’t replace them just because you think you can make them cooler).

• Information Design should be as branded as possible
• You don’t want to introduce many new interaction designs, to avoid confusing users => just use the standard types of menus, navigation patterns, etc. And navigation should not be part of your brand, anyway.
• For Visual Design, use branded colors.

Common UX Issues (watch video)

— Modal loading dialogs are awful. Use in-line loading indicator that doesn’t block the UI. If you use a modal dialog, at least don’t override the Back button.
— Don’t reinvent the wheel
— App navigation is well-defined in Android
— Poor visual design decisions can make your app feel amateurish
— Don’t deviate from the Pure Android guidelines

Best Practices

— Use DIPs (Density Independent Pixels)
— Avoid speedbump tutorials
— If a tutorial is present, allow immediate skip
— Don’t show splash screens — Remember: content first (splash screen are not content)
— Use colors and accents for branding
— Login: deley until necessary and only ask for it when the benefit is clear
— Register: suggest email addresses known by the device and prefer email to username

Launcher Icons
— Size on mobile is 48x48 dp
— Always provide mdpi + xxhdpi
— Size in Google Play is 512x512 px
— Use 3dp padding or full images size
— Three dimensional style, front view with a slight persective as if viewed from above

Action Bar (watch video)
— Navigation on the left, actions on the right
— Use standard icons for refresh, share, search, …
— Branding: action bar background, selected tab color, pressed state color

Navigation Drawers (watch video)
— Interaction design aspects (things like what should the Back button do)
— How to represent your information hierarchy
— Collapsable sections
— Create navigational hubs

Collections (watch video)
— How to add/remove/reorder items to a collection
— Item action overflow
— Contextual action bar

Images (watch video)
— How to show text overlays
— Using placeholders while image loads (Pinterest show a rectangle with the same color of the main color of the image that is being loaded)
— Center cropping
— Use blurring to help the user focus on the most important thing (eg: text on top of the image)

Maps (watch video — 2nd half)
— You can brand the marker design with your own colors
— Full screen or embedded maps (refer to Foursquare)
— Map padding (You can offset the controls to center and zoom the map, if you have overlay components that would clash with the standard map controls)

Home Screen Widgets (watch video)

Different types of widgets
— Information (weather)
— Controls (enable/disable wifi, bluetooth, …)
— Collection (Gmail mails)
— Hybrid (music controls)
Configuration
— Display any configuration choices when widget is placed on screen
— Sizing (in Android 4.0+) in dp: (cells * 74) — 30

Sharing + Full Screen UIs (watch video)

— Share Action Provider (ShareCompat.configureMenuItem)
— Don’t share to just FB or Twitter, allow sharing to all compatible installed apps

Screen modes
— Normal: action bar overlaid
— Low Profile: status bar dimmed, action bar and other UI hidden, navigation bar recessed, touch to toggle bars + controls
— Hide navigation: all system bars hidden, touch to toggle bars + controls
— Immersive mode in KitKat

Design Tools

Wireframing / Interaction design tools
— Omnigraffle
— Proto.io
— Fluid UI
— Balsamiq Mockups
— Android Design Preview: allows to mirror something from your computer to the device screen
— Android Asset Studio
— Android Holo Colors
— Action Bar Style generator

App Redesign examples

— Live Score Addicts
— Hypotetical News Reader
— Hypotetical Podcast Creator
— FINN.no
— Hypotetical Cricket App