Google I/O: Android Design for Success

by June 29, 2012

At Google I/O in San Francisco, CA the Android design team at Google shared the design process and tools they recommend fro creating great native Android applications. Here are my notes from their talk:

Google’s Android design team consists of a few different groups. Research: brings in insights to the team. Visual design: typography, iconography, animation, etc. Interaction design: design the structure and behavior of apps. Prototyping: make complex interaction ideas tangible. Technical writing: consist voice and tone for the OS. Management: used to connect the team and keeps things moving.

Purpose & Organization

  • You should address your app’s design needs by tackling its foundation first: utility, purpose; structure/navigation; layout, visual hierarchy. Cover this base first before you jump into custom theming and transitions.
  • Define your purpose. What is your app: purpose, goals, and most important elements? The purpose of an app has a huge impact on how it is built. Write out one sentence that communicates what your app is all about.
  • Collect information about the tactical goals, tools, and friction points associated with the purpose of your app. If you do user research, make sure key members of team participate. This research gives you context for your design.
  • Decide on and organize the content of your application. Functional places and goals uncovered during research provide a guide for structuring your app. Real-life objects can set expectations for users but be careful when emulating real-world artifacts. You’ll often need to translate them appropriately for digital use.
  • Making a diagram of functional places and goals that includes key content and actions can give you an overview of the app you’re building.

Interaction & Visual Design

  • Start with the top-level screen of your app. It’s the entry point of your app and where people will spend the most time. Ask: “what will be the hero of the screen?” What will help people be successful? Use your research to decide.
  • Add an action bar at the top with branding, key actions, rest in a “more” option. Start with the most basic goal and include actions for it. Then move on to secondary actions and find places for them.
  • Lower-level screens allow you to: browse deeper into data, edit data, consume data, etc.
  • Tablet-sized interfaces can allow you to cut down on jumping back and forth between screens (pogo-sticking).
  • Make simple images that illustrate the content and features in your app. Many people use wireframes because they are lightweight, low fidelity sketches of what will be on each screen.
  • Android’s Design Guide has a number of stencils available as vector art for the core building blocks inside Android including UI elements, icons, and fonts.
  • The Design Guide also has key information about design principles, app structure, and building blocks.
  • App Structure: is the Cliff’s Note of Android design. Gives you a good overview
  • Action Bar: navigation, identity, views, and actions are integrated in this pattern. Using this pattern will help people use your app as system apps use this pattern heavily so people are already familiar with it.
  • Building blocks: give you a set of elements you can use within your app.
  • Move your early sketches to higher fidelity visual designs. Pick a reference device for your initial visual designs and make sure you are working from one of the Android themes. Once you have a reference device and a theme set, start laying out the key screens.
  • By using the Design Guide, you can get a great looking app quickly and take advantage of the design work done by the Android team. A few small tweaks to these patterns can differentiate your app.
  • When doing custom work, be mindful of type and contrast decisions.
  • Design is always doable. Start at the fundamentals and work your way up.