Android UI Patterns by Peter Pascale, Vladan Pulec
Agenda <ul><li>Android UI History </li></ul><ul><li>Android 4 UI Highlights </li></ul><ul><li>Android UI Patterns </li></ul>
Android Version History <ul><li>Look and Feel  </li></ul><ul><li>Formalized </li></ul><ul><li>2009 </li></ul>
Android Version History <ul><li>2010 Google IO </li></ul><ul><li>Dashboard UI Pattern </li></ul>
Android Version History <ul><li>2011 Google IO </li></ul><ul><li>Tablet Patterns </li></ul><ul><li>No More  </li></ul><ul>...
Android Version History <ul><li>Ice Cream Sandwich </li></ul><ul><li>October 19 2010 </li></ul><ul><li>Honeycomb UI - Unif...
Android Market Share
Android Market Share
Android Versions - Reality Source: developer.android.com As of November 3, 2011
UI Design Pattern Goals
UI Design Goals Related to Patterns <ul><li>Stay Consistent </li></ul><ul><li>Use Visual Hierarchy </li></ul><ul><li>Value...
Tablet vs. Phone User Experience <ul><li>Users hold and interact with phones and tablets differently </li></ul><ul><li>UI ...
Android 4.0 UI Features <ul><li>Simplified Look and Feel </li></ul><ul><li>Unified Tablet/Phone Platform </li></ul><ul><li...
Navigation in Android 4.0 <ul><li>Software Navigation Buttons </li></ul><ul><li>   System Back </li></ul><ul><li>   System...
Android UI Patterns <ul><li>Action Bar </li></ul><ul><li>Multi-Pane Layout </li></ul><ul><li>Carousel </li></ul><ul><li>Qu...
<ul><li>Action Bar </li></ul><ul><li>Multi-Pane Layout </li></ul><ul><li>Carousel </li></ul><ul><li>Quick Actions </li></u...
Action Bar <ul><li>Dedicated Real Estate at the Top of Each Screen </li></ul><ul><li>         Make Frequent Actions Promin...
Action Bar - Sections <ul><li>Where am I? </li></ul><ul><li>application icon or logo </li></ul><ul><li>can be used for &qu...
Action Bar - Sections <ul><li>What can I see? </li></ul><ul><li>view details  </li></ul><ul><li>(can have a navigation com...
Action Bar - Sections <ul><li>What can I do? </li></ul><ul><li>action buttons (icons, text, or both) </li></ul><ul><li>mos...
Action Bar - Examples
Action Bar Consistency Between Phone and Tablet
Action Bar - Antipatterns <ul><li>Ignoring the &quot;Where - See - Do&quot; Best Practice </li></ul><ul><li>Button control...
ActionBar Code Demo
Action Bar - Summary <ul><li>Replaces traditional title bar </li></ul><ul><li>Makes frequently used actions prominent </li...
<ul><li>Action Bar </li></ul><ul><li>Multi-Pane Layout </li></ul><ul><li>Carousel </li></ul><ul><li>Quick Actions </li></u...
Multi-Pane Layout
Multi-Pane Layout
Multi-Pane Layout - Orientation Change <ul><li>Preserve  </li></ul><ul><li>Functional  </li></ul><ul><li>Parity </li></ul>
Implementing Multi-Pane Layout <ul><li>Fragments ... The Building Blocks </li></ul><ul><li>The  Resource System ... The Dy...
Fragments
Fragments <ul><li>Reusable Section of an Activity </li></ul>Master  List Fragment  Detail Fragment 
Fragment Basics <ul><li>  </li></ul><ul><li>Behavior </li></ul><ul><li>Layout </li></ul>.xml .java or programatic... or no...
Resource System Changes <ul><li>Old Layout Categories - Since 1.6: </li></ul><ul><li>res/layout/my-layout.xml    <-- Typic...
Resource System Changes <ul><li>Honeycomb Layout Categories - 3.0 - 3.1: </li></ul><ul><li>Size               small, norma...
Resource System Changes <ul><li>Honeycomb Layout Categories - 3.0 - 3.1: </li></ul><ul><li>Size               small, norma...
Resource System Changes <ul><li>New Layout Categories - 3.2+: </li></ul><ul><li>Allows Specific Screen Size Designation - ...
Backwards Compatibility Library <ul><li>http://developer.android.com/sdk/compatibility-library.html </li></ul>
Multi-Pane Layout Code Demo https://github.com/peterpascale/FragmentExample
<ul><li>Action Bar </li></ul><ul><li>Multi-Pane Layout </li></ul><ul><li>Carousel </li></ul><ul><li>Quick Actions </li></u...
Carousel - &quot;Beyond the List&quot; Break the Monotony of List Views
Carousel - &quot;Beyond the List&quot; YouTube Video Wall
Carousel - Implementation CarouselView      - Renderscript      - Ready for Customization Gallery      - Single Items, Sin...
  <ul><li>Action Bar </li></ul><ul><li>Multi-Pane Layout </li></ul><ul><li>Carousel </li></ul><ul><li>Quick Actions </li><...
Quick Actions <ul><li>Easy access to contextual actions </li></ul><ul><li>Practical even for limited real-estate </li></ul...
  <ul><li>Action Bar </li></ul><ul><li>Multi-Pane Layout </li></ul><ul><li>Carousel </li></ul><ul><li>Quick Actions </li><...
Dashboard <ul><li>Good application entry point </li></ul><ul><li>Takes a lot of real estate </li></ul><ul><li>May appear t...
  <ul><li>Action Bar </li></ul><ul><li>Multi-Pane Layout </li></ul><ul><li>Carousel </li></ul><ul><li>Quick Actions </li><...
Workspaces <ul><li>Useful when dealing with a lot of data </li></ul><ul><li>Clear navigation </li></ul>
Summary  
Android UI Patterns New Patterns Problem Solution Since Phone Tablet Action Bar Access to most common actions Horizontal a...
Resources <ul><ul><li>http://en.wikipedia.org/wiki/User_interface_design </li></ul></ul><ul><ul><li>http://www.androiduipa...
Upcoming SlideShare
Loading in …5
×

Android UI Patterns

18,732
-1

Published on

These are slides from a talk on Android UI patterns given by myself and Pearson colleague Vladan Pulec. Fragment demo code on GitHub.

Published in: Technology
3 Comments
37 Likes
Statistics
Notes
No Downloads
Views
Total Views
18,732
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
749
Comments
3
Likes
37
Embeds 0
No embeds

No notes for slide
  • Peter
  • Peter Android UI as a bit of a moving target. Android 4 - the focus Android UI patterns in the context of Android 4
  • Peter UI layout established default color schemes boxy immature UI patterns
  • Peter Dashboard pattern introduced Action bars implemented inconsistently
  • Peter Dashboard is being replaced with action bar
  • Peter UI unification lesson learned - UI keeps constantly evolving and applications need to adjust hardware navigation going away
  • Peter
  • Peter/Vladan diversified support for multiple versions
  • Vladan
  • Vladan Google Emphasizes Platform Consistency user should feel in control http://momentummobile.com/mobile-app-ui-ux-design.html
  • Vladan phones - one hand holds the device, the other interacts tablets - Because of the size and the weight of tablets, you might design your screens differently to accept interactions on the left and on the right portions of the screen. Ideally, some users would just use their left and right thumbs to interact with your app. Google SDK supports reuse between devices of different screen sizes
  • Vladan Support in Action Bar or other mechanism Don&apos;t Assume Search Hard Key Unified UI toolkit: A single set of UI components, styles, and capabilities for phones, tablets, and other devices. Rich communication and sharing: New social and calendar APIs, Android Beam for NFC-based instant sharing, Wi-Fi Direct support, Bluetooth Health Device Profile support. Deep interactivity and customization: Improved notifications, lockscreen with camera and music controls, and improved app management in the launcher. New graphics, camera, and media capabilities: Image and video effects, precise camera metering and face detection, new media codecs and containers. Interface and input: Hardware-accelerated 2D drawing, new grid-based layout, improved soft keyboard, spell-checker API, stylus input support, and better mouse support.
  • Vladan Navigation to Search and Menu items must be supported in the application UI - These functions have to find a place in the UI.
  • Vladan actions - context sensitive actions, most used actions for each screen  navigation tabs incorporated directly into the bar search button throughout an application Honeycomb tables (and future Ice Cream Sandwich phones) lack physical navigation buttons Contextual actions can be used based on user&apos;s action on the screen (ie. selecting text or an email message) overflow - less commonly used actions, tablets do not have &amp;quot;Menu&amp;quot; button, Overflow menu replaces it Branding and Home Access - excellent spot for application logo, selecting the logo should either send users to the home screen, go back within the application
  • close to hardware controls
  • Peter
  • Peter Take Advantage of Tablet Real Estate Consolidate Multiple Phone Screens into One Layout Master - Detail
  • Peter Android goal: Create a single APK (android exe) for both tablet and phone app. Ambitious, but Android provides a number of facilities  to support this. First - Fragments You can think of a fragment as a modular section of an activity, which has its own lifecycle, receives its own input events, and which you can add or remove while the activity is running. You can combine multiple fragments in a single activity to build a multi-pane UI and reuse a fragment in multiple activities. 
  • Peter Android goal: Create a single APK (android exe) for both tablet and phone app. Ambitious, but Android provides a number of facilities  to support this. First - Fragments You can think of a fragment as a modular section of an activity, which has its own lifecycle, receives its own input events, and which you can add or remove while the activity is running. You can combine multiple fragments in a single activity to build a multi-pane UI and reuse a fragment in multiple activities. 
  • Fragment - represents a behavior or a portion of user interface in an Activity  Can combine multiple fragments in a single activity to build a multi-pane UI and reuse a fragment in multiple activities.  modular section of an activity,  which has its own lifecycle,  receives its own input events,  you can add or remove while the activity is running 
  • Peter Honeycomb added new layout categories which you could combine with sizes.
  • Peter
  • Peter
  • Vladan
  • Vladan
  • Vladan
  • Vladan/Peter categorize the patterns into categories-new, relevant, dated new patterns - action bar - multipane - carousel Still good - dashboard - busy indicator - quick action menu - workspaces Not so good - action drawer - dynamic list - look what this is - 
  • Android UI Patterns

    1. Android UI Patterns by Peter Pascale, Vladan Pulec
    2. Agenda <ul><li>Android UI History </li></ul><ul><li>Android 4 UI Highlights </li></ul><ul><li>Android UI Patterns </li></ul>
    3. Android Version History <ul><li>Look and Feel  </li></ul><ul><li>Formalized </li></ul><ul><li>2009 </li></ul>
    4. Android Version History <ul><li>2010 Google IO </li></ul><ul><li>Dashboard UI Pattern </li></ul>
    5. Android Version History <ul><li>2011 Google IO </li></ul><ul><li>Tablet Patterns </li></ul><ul><li>No More  </li></ul><ul><li>Dashboard </li></ul>
    6. Android Version History <ul><li>Ice Cream Sandwich </li></ul><ul><li>October 19 2010 </li></ul><ul><li>Honeycomb UI - Unification </li></ul><ul><li>No More Hardware Buttons   </li></ul>
    7. Android Market Share
    8. Android Market Share
    9. Android Versions - Reality Source: developer.android.com As of November 3, 2011
    10. UI Design Pattern Goals
    11. UI Design Goals Related to Patterns <ul><li>Stay Consistent </li></ul><ul><li>Use Visual Hierarchy </li></ul><ul><li>Value Simplicity </li></ul><ul><li>Pay Attention to Patterns </li></ul>
    12. Tablet vs. Phone User Experience <ul><li>Users hold and interact with phones and tablets differently </li></ul><ul><li>UI needs to be adaptive to support user interaction </li></ul>
    13. Android 4.0 UI Features <ul><li>Simplified Look and Feel </li></ul><ul><li>Unified Tablet/Phone Platform </li></ul><ul><li>System Bar and Action Bar </li></ul><ul><li>Virtual Navigation Buttons </li></ul><ul><li>No Hardware Buttons </li></ul>
    14. Navigation in Android 4.0 <ul><li>Software Navigation Buttons </li></ul><ul><li>  System Back </li></ul><ul><li>  System Home </li></ul><ul><li>  Recents </li></ul>No Search or Menu
    15. Android UI Patterns <ul><li>Action Bar </li></ul><ul><li>Multi-Pane Layout </li></ul><ul><li>Carousel </li></ul><ul><li>Quick Actions </li></ul><ul><li>Dashboard </li></ul><ul><li>Workspaces </li></ul>
    16. <ul><li>Action Bar </li></ul><ul><li>Multi-Pane Layout </li></ul><ul><li>Carousel </li></ul><ul><li>Quick Actions </li></ul><ul><li>Dashboard </li></ul><ul><li>Workspaces </li></ul>
    17. Action Bar <ul><li>Dedicated Real Estate at the Top of Each Screen </li></ul><ul><li>         Make Frequent Actions Prominent </li></ul><ul><li>         Support Navigation </li></ul><ul><li>         Indicate Current Location in App </li></ul><ul><li>         Consistent Between Tablets and Phones </li></ul><ul><li>         Provide Branding </li></ul>
    18. Action Bar - Sections <ul><li>Where am I? </li></ul><ul><li>application icon or logo </li></ul><ul><li>can be used for &quot;upward&quot; navigation </li></ul>
    19. Action Bar - Sections <ul><li>What can I see? </li></ul><ul><li>view details  </li></ul><ul><li>(can have a navigation component) </li></ul><ul><li>can include tabs, dropdowns, breadcrumbs </li></ul>
    20. Action Bar - Sections <ul><li>What can I do? </li></ul><ul><li>action buttons (icons, text, or both) </li></ul><ul><li>most important or frequently used actions </li></ul><ul><li>new place for Search and Menu </li></ul>
    21. Action Bar - Examples
    22. Action Bar Consistency Between Phone and Tablet
    23. Action Bar - Antipatterns <ul><li>Ignoring the &quot;Where - See - Do&quot; Best Practice </li></ul><ul><li>Button controls at the bottom of the screen </li></ul><ul><li>Inconsistent across different applications </li></ul>
    24. ActionBar Code Demo
    25. Action Bar - Summary <ul><li>Replaces traditional title bar </li></ul><ul><li>Makes frequently used actions prominent </li></ul><ul><li>Convenient means of handling menu and search </li></ul><ul><li>Dedicated, persistent real estate </li></ul><ul><li>Displays application icon together with the activity title </li></ul>
    26. <ul><li>Action Bar </li></ul><ul><li>Multi-Pane Layout </li></ul><ul><li>Carousel </li></ul><ul><li>Quick Actions </li></ul><ul><li>Dashboard </li></ul><ul><li>Workspaces </li></ul>
    27. Multi-Pane Layout
    28. Multi-Pane Layout
    29. Multi-Pane Layout - Orientation Change <ul><li>Preserve  </li></ul><ul><li>Functional  </li></ul><ul><li>Parity </li></ul>
    30. Implementing Multi-Pane Layout <ul><li>Fragments ... The Building Blocks </li></ul><ul><li>The Resource System ... The Dynamic Assembler </li></ul><ul><li>Backwards Compatibility Library ... support 1.6+ </li></ul>
    31. Fragments
    32. Fragments <ul><li>Reusable Section of an Activity </li></ul>Master  List Fragment  Detail Fragment 
    33. Fragment Basics <ul><li>  </li></ul><ul><li>Behavior </li></ul><ul><li>Layout </li></ul>.xml .java or programatic... or not at all...
    34. Resource System Changes <ul><li>Old Layout Categories - Since 1.6: </li></ul><ul><li>res/layout/my-layout.xml   <-- Typical </li></ul><ul><li>Or </li></ul><ul><li>res/layout-land/my-layout.xml </li></ul><ul><li>res/layout-port/my-layout.xml </li></ul>
    35. Resource System Changes <ul><li>Honeycomb Layout Categories - 3.0 - 3.1: </li></ul><ul><li>Size               small, normal, large, xlarge </li></ul><ul><li>Orientation     port, land </li></ul><ul><li>   </li></ul><ul><li>Ex: </li></ul><ul><li>res/layout/my-layout.xml </li></ul><ul><li>res/layout-xlarge-land/my-layout.xml </li></ul><ul><li>res/layout-xlarge-port/my-layout.xml </li></ul>
    36. Resource System Changes <ul><li>Honeycomb Layout Categories - 3.0 - 3.1: </li></ul><ul><li>Size               small, normal, large, xlarge </li></ul><ul><li>Orientation     port, land </li></ul><ul><li>   </li></ul><ul><li>Ex: </li></ul><ul><li>res/layout/my-layout.xml </li></ul><ul><li>res/layout-xlarge-land/my-layout.xml </li></ul><ul><li>res/layout-xlarge-port/my-layout.xml </li></ul>Deprecated
    37. Resource System Changes <ul><li>New Layout Categories - 3.2+: </li></ul><ul><li>Allows Specific Screen Size Designation - Not Just Categories </li></ul><ul><li>res/layout/main_activity.xml           Phones </li></ul><ul><li>res/layout- sw 600dp/main_activity.xml   7&quot; Tablets </li></ul><ul><li>res/layout- sw 720dp/main_activity.xml   10&quot; Tablets </li></ul><ul><li>  </li></ul><ul><li>sw = Smallest Width </li></ul><ul><li>w = Available Min Width </li></ul><ul><li>h = Available Min Height </li></ul><ul><li>http://developer.android.com/guide/practices/screens_support.html </li></ul><ul><li>http://developer.android.com/guide/practices/screens_support.html#DeclaringTabletLayouts </li></ul>
    38. Backwards Compatibility Library <ul><li>http://developer.android.com/sdk/compatibility-library.html </li></ul>
    39. Multi-Pane Layout Code Demo https://github.com/peterpascale/FragmentExample
    40. <ul><li>Action Bar </li></ul><ul><li>Multi-Pane Layout </li></ul><ul><li>Carousel </li></ul><ul><li>Quick Actions </li></ul><ul><li>Dashboard </li></ul><ul><li>Workspaces </li></ul>
    41. Carousel - &quot;Beyond the List&quot; Break the Monotony of List Views
    42. Carousel - &quot;Beyond the List&quot; YouTube Video Wall
    43. Carousel - Implementation CarouselView     - Renderscript     - Ready for Customization Gallery      - Single Items, Single Images      - Not Full Screen http://j.mp/io2011-carousel-sample
    44.   <ul><li>Action Bar </li></ul><ul><li>Multi-Pane Layout </li></ul><ul><li>Carousel </li></ul><ul><li>Quick Actions </li></ul><ul><li>Dashboard </li></ul><ul><li>Workspaces </li></ul>
    45. Quick Actions <ul><li>Easy access to contextual actions </li></ul><ul><li>Practical even for limited real-estate </li></ul><ul><li>User easily sees context even when quick action is open </li></ul>
    46.   <ul><li>Action Bar </li></ul><ul><li>Multi-Pane Layout </li></ul><ul><li>Carousel </li></ul><ul><li>Quick Actions </li></ul><ul><li>Dashboard </li></ul><ul><li>Workspaces </li></ul>
    47. Dashboard <ul><li>Good application entry point </li></ul><ul><li>Takes a lot of real estate </li></ul><ul><li>May appear that application has limited functionality </li></ul><ul><li>May be overwhelming to a new user </li></ul>
    48.   <ul><li>Action Bar </li></ul><ul><li>Multi-Pane Layout </li></ul><ul><li>Carousel </li></ul><ul><li>Quick Actions </li></ul><ul><li>Dashboard </li></ul><ul><li>Workspaces </li></ul>
    49. Workspaces <ul><li>Useful when dealing with a lot of data </li></ul><ul><li>Clear navigation </li></ul>
    50. Summary  
    51. Android UI Patterns New Patterns Problem Solution Since Phone Tablet Action Bar Access to most common actions Horizontal action bar on top of the screen 3.0 Yes Yes Carousel Engaging way to select options scrolling 2D/3D carousel 3rd party (3.0+) Yes Yes Multi-pane Layout View Provide effective use of large screens Composite UI with reusable components 3.0 (with 1.6 compatibility) No Yes Existing Patterns Problem Solution Since Phone Tablet Dashboard Application home screen Main brander landing page Any In Some Cases No Quick Action Menu Provide contextual actions on a small screen simple pop-up menu 3rd party (2.0+) Yes In Some Cases Workspaces Displaying a lot of data on a small screen horizontally scrollable tabs Any Yes No
    52. Resources <ul><ul><li>http://en.wikipedia.org/wiki/User_interface_design </li></ul></ul><ul><ul><li>http://www.androiduipatterns.com/ </li></ul></ul><ul><ul><li>http://momentummobile.com/mobile-app-ui-ux-design.html </li></ul></ul><ul><ul><li>http://developer.android.com/guide/topics/ui/declaring-layout.html </li></ul></ul><ul><ul><li>http://developer.android.com/guide/practices/screens_support.html </li></ul></ul><ul><ul><li>http://developer.android.com/guide/practices/ui_guidelines/icon_design.html  </li></ul></ul><ul><ul><li>http://www.google.com/events/io/2011/sessions/designing-and-implementing-android-uis-for-phones-and-tablets.html </li></ul></ul><ul><ul><li>http://www.donnfelker.com/downloads/AndroidTabletDevelopment.pdf </li></ul></ul><ul><ul><li>http://developer.android.com/guide/topics/fundamentals/fragments.html </li></ul></ul><ul><ul><li>https://github.com/peterpascale/FragmentExample </li></ul></ul><ul><ul><li>http://j.mp/io2011-carousel-sample </li></ul></ul><ul><li>Images </li></ul><ul><ul><ul><li>Android & Alien </li></ul></ul></ul><ul><ul><ul><ul><li>http://www.flickr.com/photos/jdhancock/5138860024/ </li></ul></ul></ul></ul><ul><ul><ul><li>Roof </li></ul></ul></ul><ul><ul><ul><ul><li>http://www.flickr.com/photos/45574318@N00/5370376951/ </li></ul></ul></ul></ul><ul><ul><ul><li>Android Pics </li></ul></ul></ul><ul><ul><ul><ul><li>http://www.flickr.com/photos/lwallenstein/3870027760/sizes/m/in/photostream/ </li></ul></ul></ul></ul>
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×