Showing posts with label honeycomb. Show all posts
Showing posts with label honeycomb. Show all posts

Sunday, 26 June 2011

Tablet UI patterns - Split View


Pattern card

Problem
Tablets have much more screen real estate than their smartphone counter parts. To use the space well but still maintain consistency between the smartphone and tablet app a different design approach for showing information is needed.

Solution
Split View is a design approach that is often used on many desktop and web applications. Left side of the screen displays higher level categories and selecting one of them brings detailed info of the selection to the right side of the screen.



Consequences 
  1. Full utilisation of the screen
  2. Consistent information architecture between smartphone and tablet app

Friday, 24 June 2011

Tablet UI patterns - Action Bar


Android Action Bar is a well established UI pattern on Android phone UI design. It is the single most powerful visual tool to make an app look like an Android app. 

In their tablet version of the Android OS Google decided to support the pattern on API level. In Honeycomb implementing a standard looking Action Bar is easier than ever before.

Pattern card

Problem

Most important app functionality should always be easily accessible by users. Apps on a single platform should be internally consistent how they approach main level navigation and important actions.

Solution



Action bar is a branded top bar of the application that provides easy access to relevant actions on the screen and a shortcut to application's home screen. The action bar can also be used to indicate use's location in the application.


Consequences 
  1. Very easy and fast access to relevant action on current screen.
  2. Easy access to application's home screen by clicking the application logo at left. This paradigm is already well known from web sites.
  3. opportunity to provide branding to the application.
  4. Helps user in navigation by indicating his / her current location in app.

Wednesday, 9 March 2011

What's New in Honeycomb APIs, UI Point of View

As first Honeycomb tablets are hitting store selveds and the SDK has been out for few weeks Google has been busy updating their documentation for the new OS version.

The Android Dev Guide is massive. Not everybody have time to go through all of it or even just the new posts (tagged with new! -tag). So I've gathered here a quick overview about the technical documentation for Android UI development and design. I hope this overview gives designers decent understanding about what is now possible and developers an overview and a reference of the new articles.

More after the jump...

Google engineer's comments on Honeycomb action bar at stackoverflow

Google's framework engineer Adam Powell added some good notes to a question in stackoverflow.

Can i hide the App Icon from the Action Bar in Honeycomb? 
I am currently planning the honeycomb update for my app and i am wondering how to use the Action Bar correctly. My first question is if it is possible to hide the App-Icon and Title from the Action Bar. And is there any kind of Design guidline for the Honeycomb-UI yet?



adamp:

Yes, you can hide the app icon and title. You can also replace the app icon with a wider logo image for your activity.
The app icon/logo at the left is collectively treated as a "home" affordance. You can optionally ask the system to display it as "up." When tapped, this should take the user either to a home/landing page for your app or one level up in the app's navigation hierarchy, respectively.
This complements the system back button by providing a consistent way for the user to move around your app when the history associated with the back button might be complex. (For example, the user might have been deep-linked into your app through a notification or an intent from another application.) By using this pattern your app won't need to hijack the normal behavior of the back button in special cases for convenience.
The action bar does double duty in the form of action modes. The two APIs are orthogonal but the resulting UI occupies the same screen real estate. An action mode presents a set of contextually relevant options to the user as a customized action bar. For example, a user might select several items from a list at a time. The app might present an action mode to let the user take a bulk action on the set of all selected items such as delete or share.
Action modes are a great way to present contextual actions that doesn't stop the user from interacting with the rest of the UI the way that popup menus do.

Design guidelines will hopefully be published "soon." :)