1. Blaise Galinier @blasj Senior UX Designer at AllofUs Friend of foxes Android UI The Basics

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

3. 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

4. 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

5. 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

6. 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

7. Design patternn: Action bar Highly recommended pattern

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

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

10. Design pattern: Dashboard

11. Design patternn: Tabs

12. 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

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

14. 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)

15. 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

16. 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.

17. Honeycomb What about me?

18. Honeycomb general layout

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

20. 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…

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

22. Honeycomb general layout o Dismiss individually o Can have action buttons

23. A bit of vocabulary

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

25. Honeycomb action bar

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

27. Landscape vs portrait

28. Resizable widgets

29. Sources and cool links http://www.slideshare.net/AndroidDev/android-ui-design-tips http://developer.android.com/guide/practices/ui_guidelines/index.h tml http://www.flickr.com/photos/takenbyhim/collections/72157625473 800733/ http://www.flickr.com/photos/takenbyhim/collections/72157625510 583450/ http://blog.radioactiveyak.com/search/label/Android%20App%20Su rgery http://phandroid.com/2011/05/11/10-tips-for-android-ui-design/

30. Thank you! Blaise Galinier @blasj Senior UX Designer at AllofUs Friend of foxes