Blaise Senior UX Designer at AllofUs Friend of foxes Android UI The Basics

2 main flavours of Android V2.3 GingerbreadV3.0 Honeycomb Optimised for Phone (OK for Tablet too) Tablet only

Gingerbread vs iPhone 1 Home button (double click for recent apps) Up to 5 controls: -Home (hold for recent apps) -Back <<< Important -Menu <<< Important -Search (optional) -4-way + Select

Back button o Similar to a browser’s Back button o When going back, ignore menus/overlays o Tabs count as 1 page (i.e. Back = Go one level up) o No need for on-screen back button! Page 1 Page 2 Page 3 (tab 2) Page 3 (tab 2) Page 3 (tab 1) Page 3 (tab 1) Menu Back

Menu button o Opens an “Options menu” that slides in from the bottom o Options are independent from the focus. (see contextual menus) o Avoid using it for navigation o Use it for things like: Refresh Settings Log out Sort Add new item to list/Compose

Design patternn: Context menu/Quick actions o Available via press & hold o Actions apply to the selected item o Shortcuts only, these actions should be available on the main interface too (i.e. on the detail page for that item) o Can have nested sub-menus

Design patternn: Action bar Highly recommended pattern

Design patternn: Action bar Hint: put the most used options in the Action bar and the less frequent options in the menu

Design pattern: Dashboard Use this pattern only if it makes sense

Design pattern: Dashboard

Design patternn: Tabs

Design pattern: Search Consistent pop-in search form anchored to top of screen Replaces action bar (if present) Support suggestions/Auto-complete Also available via Search button

Design pattern: Notifications Two types: Ongoing Notifications (Dismissable) Clickable

Design pattern: Widgets Active mini-applications that sit on the desktop They can be interactive via: Tap Swipe vertical Not pinch, Not hold Interacting can: modify the state of the widget Fire up full app Different sizes (stick to icon grid)

Design pattern: Sync There is a “Master switch” for apps transferring data in the background Syncing can be automatic or triggered by user Apps can also sync (i.e. add) their own contacts & calendars with the phone’s contacts

Design pattern: Inter-app services When trying to open a URL from within an app (e.g. from twitter), other apps that could interpret that URL are suggested to the user. Apps can provide services (e.g. “share picture”) for other apps to use.

Honeycomb What about me?

Honeycomb general layout

o Our friend the Action bar… Revamped! o (more on that later)

Honeycomb general layout o 3 on-screen buttons replace physical ones o That black bar is always there, but it can hide when watching fullscreen video o Buttons are: Back, Home, Switch app o What! No “menu” button? More on that later…

Honeycomb general layout o Big clock doubles as a notification area o It can be pulled up to reveal more details.

Honeycomb general layout o Dismiss individually o Can have action buttons

A bit of vocabulary

Honeycomb action bar Action bar = Action bar + Options menu + Context menu Actions Navigation Icon/Logo

Honeycomb action bar

General actions = Apply to the current screen = Options Menu (button) Contextual actions = Triggered by selection = Context menu (hold)

Landscape vs portrait

Resizable widgets

Sources and cool links tml / / rgery

Thank you! Blaise Senior UX Designer at AllofUs Friend of foxes