Tuesday 14 June 2011

Android UI pattern - Workspaces


Workspaces is a renamed pattern UI pattern from patterns "scrollable lists". I don't think the pattern only applies to lists hence the new name. 


Workspaces is a horizontally scrolling composite component that consists of tabs and data container, often a list. This component provides easy navigation between a lot of data that is hierarchically on the same level.

Pattern card

Problem

Displaying a lot of data and user navigation between the data is not simple on a small smart phone screen. 

Solution

Workspaces allows easy navigation between multiple composites of data. Navigation between the data sets is done either horizontal swiping to move between adjacent categories or if tabs are available by taping on the tabs. If all the tabs do not fit on screen the tab bar should be separately scrollable to allow users to browse all available categories of data.





Consequences 
  1. Easy navigation between a lot of data.
  2. Clear indication of available data categories.

Workspace examples
Google docs

 Google I/O


Implementing workspaces
iosched (Google I/O) app has an implementation of the workspaces pattern. The project's class Workspace.java can be used to create the functionality.

Another useful project is android-viewflow. See the project github for more screenshots and code.


More from this blog

3 comments:

  1. Thanks for your sharing...!!
    Here's similar implementation:

    http://www.matt-reid.co.uk/blog_post.php?id=62

    ReplyDelete
  2. This is called CardLayout in J2SE, and it has been with us since the ancient times. An extension to CardLayout is usually the TabLayout, also on implementation level.

    Perhaps the newness of this is the navigation between cards with swipes, but I'm not sure if Workspaces would be the best name for that.

    ReplyDelete
  3. Workspace is named by the android Home.apk. You can open the source of the Home app in Native android phone, and you'll know that.

    ReplyDelete