0
Android UI Patterns           Presented by           Vladan PulecCreated by Vladan Pulec and Peter Pascale
Agenda       Android UI History     Android 4 UI Highlights      Android UI Patterns
Android Version HistoryLook and FeelFormalized2009
Android Version History2010 Google IODashboard UI Pattern
Android Version History2011 Google IOTablet PatternsNo MoreDashboard
Android Version HistoryIce Cream SandwichOctober 19 2010Honeycomb UI - UnificationNo More Hardware Buttons
Android Market Sharehttp://blog.nielsen.com/nielsenwire/online_mobile/generation-app-62-of-mobile-users-25-34-own-smartpho...
Android Market Share Source: Nielsen (http://www.bgr.com/2011/12/15/smartphone-penetration-skyrockets-in-2011-iphone-becom...
Android Versions - RealitySource: developer.android.comAs of March 5, 2012
UI Design Pattern GoalsImage Source: http://www.flickr.com/photos/jdhancock/5138860024/
Tablet vs. Phone User Experience Users hold and interact with phones and tablets differently    UI needs to be adaptive to...
UI Design Goals Related to Patterns                  Stay Consistent             Use Visual Hierarchy                  Val...
Android 4.0 UI Features                                                                     Simplified Look and Feel      ...
Navigation in Android 4.0 Software Navigation Buttons  System Back  System Home  Recents  No Search or Menu
Android UI Patterns                Action Bar             Multi-Pane Layout                 Carousel               Quick A...
Action BarMulti-Pane Layout    Carousel  Quick Actions   Dashboard  Workspaces
Action Bar    Dedicated Real Estate at the Top of Each Screen   Make Frequent Actions Prominent   Support Navigation   Ind...
Action Bar - Sections          Where am I?      application icon or logocan be used for "upward" navigation
Action Bar - Sections                What can I see?                    view details        (can have a navigation compone...
Action Bar - Sections                      What can I do?             action buttons (icons, text, or both)           most...
Action Bar - Examples
Action BarConsistency Between Phone and Tablet
Action Bar - Antipatterns     Ignoring the "Where - See - Do" Best Practice      Button controls at the bottom of the scre...
ActionBar Code Demohttps://github.com/vpulec/ActionBar-Demo
Backward CompatibilityActionBar native support in Honeycomb and upRemedy• Compatibility Pack can be used for earlier  vers...
Backwards Compatibility Libraryhttp://developer.android.com/sdk/compatibility-library.html
Action Bar - Summary               Replaces traditional title bar               Makes frequently used actions             ...
Action BarMulti-Pane Layout    Carousel  Quick Actions   Dashboard  Workspaces
Multi-Pane Layout
Multi-Pane Layout
Multi-Pane Layout - Orientation Change Preserve Functional Parity
Implementing Multi-Pane Layout  Fragments... The Building Blocks  The Resource System... The Dynamic Assembler  Backwards ...
Fragments
Fragments                  Reusable Section of an Activity  Master          Detail Fragment  List Fragment
Fragment Basics Behavior             .java Layout             .xml             or programatic...             or not at all...
Resource System ChangesOld Layout Categories - Since 1.6:res/layout/my-layout.xml             <-- TypicalOrres/layout-land...
Resource System ChangesHoneycomb Layout Categories - 3.0 - 3.1:Size        small, normal, large, xlargeOrientation port, l...
Resource System ChangesHoneycomb Layout Categories - 3.0 - 3.1:Size        small, normal, large, xlargeOrientation port, l...
Resource System ChangesNew Layout Categories - 3.2+:Allows Specific Screen Size Designation - Not Just Categoriesres/layou...
Multi-Pane Layout Code Demo  https://github.com/peterpascale/FragmentExample
Action BarMulti-Pane Layout    Carousel  Quick Actions   Dashboard  Workspaces
Carousel - "Beyond the List"               Break the Monotony of List Views
Carousel - "Beyond the List"                   YouTube Video Wall
Carousel - Implementation   CarouselView     - Renderscript     - Ready for Customization   Gallery     - Single Items, Si...
Action BarMulti-Pane Layout    Carousel  Quick Actions   Dashboard  Workspaces
Quick ActionsEasy access to contextualactionsPractical even for limited real-estateUser easily sees context evenwhen quick...
Action BarMulti-Pane Layout    Carousel  Quick Actions   Dashboard  Workspaces
Dashboard Good application entry point  Takes a lot of real estate May appear that application  has limited functionalityM...
Action BarMulti-Pane Layout    Carousel  Quick Actions   Dashboard  Workspaces
Workspaces Useful when dealing with a lot of data           Clear navigation
Thank You
Android UI Patterns      New Patterns                Problem                       Solution                 Since         ...
Resources•   http://en.wikipedia.org/wiki/User_interface_design•   http://www.androiduipatterns.com/•   http://momentummob...
Upcoming SlideShare
Loading in...5
×

Android ui patterns

3,578

Published on

A presentation deck from Mobile March (http://mobilemarchtc.com).

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,578
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
97
Comments
0
Likes
3
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 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 Google Emphasizes Platform Consistency user should feel in control http://momentummobile.com/mobile-app-ui-ux-design.html
  • 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 - 
  • Transcript of "Android ui patterns"

    1. 1. Android UI Patterns Presented by Vladan PulecCreated by Vladan Pulec and Peter Pascale
    2. 2. Agenda Android UI History Android 4 UI Highlights Android UI Patterns
    3. 3. Android Version HistoryLook and FeelFormalized2009
    4. 4. Android Version History2010 Google IODashboard UI Pattern
    5. 5. Android Version History2011 Google IOTablet PatternsNo MoreDashboard
    6. 6. Android Version HistoryIce Cream SandwichOctober 19 2010Honeycomb UI - UnificationNo More Hardware Buttons
    7. 7. Android Market Sharehttp://blog.nielsen.com/nielsenwire/online_mobile/generation-app-62-of-mobile-users-25-34-own-smartphones/
    8. 8. Android Market Share Source: Nielsen (http://www.bgr.com/2011/12/15/smartphone-penetration-skyrockets-in-2011-iphone-becomes-no-1-handset/ )
    9. 9. Android Versions - RealitySource: developer.android.comAs of March 5, 2012
    10. 10. UI Design Pattern GoalsImage Source: http://www.flickr.com/photos/jdhancock/5138860024/
    11. 11. Tablet vs. Phone User Experience Users hold and interact with phones and tablets differently UI needs to be adaptive to support user interaction
    12. 12. UI Design Goals Related to Patterns Stay Consistent Use Visual Hierarchy Value Simplicity Pay Attention to PatternsImage Source: http://www.flickr.com/photos/45574318@N00/5370376951/
    13. 13. Android 4.0 UI Features Simplified Look and Feel Unified Tablet/Phone Platform System Bar and Action Bar Virtual Navigation Buttons No Hardware ButtonsImage Source: http://www.flickr.com/photos/lwallenstein/3870027760/sizes/m/in/photostream/
    14. 14. Navigation in Android 4.0 Software Navigation Buttons System Back System Home Recents No Search or Menu
    15. 15. Android UI Patterns Action Bar Multi-Pane Layout Carousel Quick Actions Dashboard Workspaces
    16. 16. Action BarMulti-Pane Layout Carousel Quick Actions Dashboard Workspaces
    17. 17. Action Bar Dedicated Real Estate at the Top of Each Screen Make Frequent Actions Prominent Support Navigation Indicate Current Location in App Consistent Between Tablets and Phones Provide Branding
    18. 18. Action Bar - Sections Where am I? application icon or logocan be used for "upward" navigation
    19. 19. Action Bar - Sections What can I see? view details (can have a navigation component) can include tabs, dropdowns, breadcrumbs
    20. 20. Action Bar - Sections What can I do? action buttons (icons, text, or both) most important or frequently used actions new place for Search and Menu
    21. 21. Action Bar - Examples
    22. 22. Action BarConsistency Between Phone and Tablet
    23. 23. Action Bar - Antipatterns Ignoring the "Where - See - Do" Best Practice Button controls at the bottom of the screen Inconsistent across different applications
    24. 24. ActionBar Code Demohttps://github.com/vpulec/ActionBar-Demo
    25. 25. Backward CompatibilityActionBar native support in Honeycomb and upRemedy• Compatibility Pack can be used for earlier version• ActionBarSherlock (actionbarsherlock.com) makes the implementation easier
    26. 26. Backwards Compatibility Libraryhttp://developer.android.com/sdk/compatibility-library.html
    27. 27. Action Bar - Summary Replaces traditional title bar Makes frequently used actions prominent Convenient means of handling menu and search Dedicated, persistent real estate Displays application icon together with the activity title
    28. 28. Action BarMulti-Pane Layout Carousel Quick Actions Dashboard Workspaces
    29. 29. Multi-Pane Layout
    30. 30. Multi-Pane Layout
    31. 31. Multi-Pane Layout - Orientation Change Preserve Functional Parity
    32. 32. Implementing Multi-Pane Layout Fragments... The Building Blocks The Resource System... The Dynamic Assembler Backwards Compatibility Library... support 1.6+
    33. 33. Fragments
    34. 34. Fragments Reusable Section of an Activity Master Detail Fragment List Fragment
    35. 35. Fragment Basics Behavior .java Layout .xml or programatic... or not at all...
    36. 36. Resource System ChangesOld Layout Categories - Since 1.6:res/layout/my-layout.xml <-- TypicalOrres/layout-land/my-layout.xmlres/layout-port/my-layout.xml
    37. 37. Resource System ChangesHoneycomb Layout Categories - 3.0 - 3.1:Size small, normal, large, xlargeOrientation port, landEx:res/layout/my-layout.xmlres/layout-xlarge-land/my-layout.xmlres/layout-xlarge-port/my-layout.xml
    38. 38. Resource System ChangesHoneycomb Layout Categories - 3.0 - 3.1:Size small, normal, large, xlargeOrientation port, landEx:res/layout/my-layout.xml Deprecatedres/layout-xlarge-land/my-layout.xmlres/layout-xlarge-port/my-layout.xml
    39. 39. Resource System ChangesNew Layout Categories - 3.2+:Allows Specific Screen Size Designation - Not Just Categoriesres/layout/main_activity.xml Phonesres/layout-sw600dp/main_activity.xml 7" Tabletsres/layout-sw720dp/main_activity.xml 10" Tabletssw = Smallest Widthw = Available Min Widthh = Available Min Heighthttp://developer.android.com/guide/practices/screens_support.htmlhttp://developer.android.com/guide/practices/screens_support.html#DeclaringTabletLayouts
    40. 40. Multi-Pane Layout Code Demo https://github.com/peterpascale/FragmentExample
    41. 41. Action BarMulti-Pane Layout Carousel Quick Actions Dashboard Workspaces
    42. 42. Carousel - "Beyond the List" Break the Monotony of List Views
    43. 43. Carousel - "Beyond the List" YouTube Video Wall
    44. 44. Carousel - Implementation CarouselView - Renderscript - Ready for Customization Gallery - Single Items, Single Images - Not Full Screen http://j.mp/io2011-carousel-sample
    45. 45. Action BarMulti-Pane Layout Carousel Quick Actions Dashboard Workspaces
    46. 46. Quick ActionsEasy access to contextualactionsPractical even for limited real-estateUser easily sees context evenwhen quick action is open
    47. 47. Action BarMulti-Pane Layout Carousel Quick Actions Dashboard Workspaces
    48. 48. Dashboard Good application entry point Takes a lot of real estate May appear that application has limited functionalityMay be overwhelming to a new user
    49. 49. Action BarMulti-Pane Layout Carousel Quick Actions Dashboard Workspaces
    50. 50. Workspaces Useful when dealing with a lot of data Clear navigation
    51. 51. Thank You
    52. 52. Android UI Patterns New Patterns Problem Solution Since Phone TabletAction Bar Access to most common Horizontal action bar on top 3.0 Yes Yes actions of the screenCarousel Engaging way to select scrolling 2D/3D carousel 3rd party Yes Yes options (3.0+)Multi-pane Layout View Provide effective use of Composite UI with reusable 3.0 No Yes large screens components (with 1.6 compatibility) Existing Patterns Problem Solution Since Phone TabletDashboard Application home screen Main brander landing page Any In Some No CasesQuick Action Menu Provide contextual actions simple pop-up menu 3rd party Yes In Some on a small screen (2.0+) CasesWorkspaces Displaying a lot of data on a horizontally scrollable tabs Any Yes No small screen
    53. 53. Resources• http://en.wikipedia.org/wiki/User_interface_design• http://www.androiduipatterns.com/• http://momentummobile.com/mobile-app-ui-ux-design.html• http://developer.android.com/guide/topics/ui/declaring-layout.html• http://developer.android.com/guide/practices/screens_support.html• http://developer.android.com/guide/practices/ui_guidelines/icon_design.html• http://www.google.com/events/io/2011/sessions/designing-and-implementing-android-uis-for-phones- and-tablets.html• http://www.donnfelker.com/downloads/AndroidTabletDevelopment.pdf• http://developer.android.com/guide/topics/fundamentals/fragments.html• http://j.mp/io2011-carousel-sample
    1. A particular slide catching your eye?

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

    ×