Investigating Android Design PatternsArpit Mathur (@arpit)Software guy, Comcast Innovation Labs

Caveat• Design Enthusiast ….so not a real designer!!

The search for a world clock…

http://www.challishodge.com/from-experience-to-trust/

Design Patterns

Interaction design patterns are a way to describe solutions to common usability or accessibility problems in a specific context.

They document interaction models that make it easier for users to understand an interface and accomplish their tasks.

Sources

http://www.youtube.com/watch?v=M1ZBjlCRfz0

1) Getting to all the functionality

Dashboards

Making Dashboards a little more useful

But app (should) resume from the previous saved state

Pivot/Workspace pattern

A slight variant: Panorama

Getting to item specific functionality

Quick Actions

Submenu screens

Long Press Menu

Swipe for submenu

Warning: May conflict with Pivot gestures

• Long-press actions are harder to discover and hide the content• But it’s a learnt behavior, now built into List?

• Documentation and UX conversations seem to go pro quick actions but newer Google apps seem to be going to quick actions as well

Hidden affordancesFine balance between avoiding clutter and being discoverable

A funny thing happened on my way to share…

Contextually positioned

Refresh / Stop

Share

All Windows / New window

Tap to select text

Hidden (Dolphin)

Pull to refresh

TweetBot

Quick summary• Avoid dashboards, choose pivots• Long press to get item specific functionality• Or swipe for extra cool points

• Place action buttons at contextually relevant positions• Group similar functionality• Hide rarely used functionality

Other patterns• ActionBar• Search• Widget

Remember these are just guidelines. To really build fantastic UI, be aware of these and then break ‘em wisely!

Links:• Android UI design patterns (Google IO talk):

http://www.google.com/events/io/2010/sessions/android-ui-design-patterns.html

• http://www.androiduipatterns.com/

• Twitter for Android: A closer look at Android’s evolving UI patterns: http://android-developers.blogspot.com/2010/05/twitter-for-android-closer-look-at.html

• The Humane Interface: http://www.amazon.com/Humane-Interface-Directions-Designing-Interactive/dp/0201379376