Friday 18 November 2011

Ice Cream Sandwich UI feature - Tabs


Ice Cream Sandwich is now out and Android's latest version is open source again. The Nexus Galaxy was already released in some parts of the world and is getting flattering reviews. In all the reviews the biggest point has been the operating system itself. UI improvements have now made Android more user friendly than ever before.

What does this mean for us, the app designeres and developers?

Google has packed the OS with very smooth set of default apps that will make users to expect much more from all the other apps. Bad UI will not be tolerated anymore. We have to pay much more attention to details and understrand how users expect apps to work.

Old Tabs
One change that has been gradually coming but is now an internal part of the OS is improved interaction with tabbed UI.

Tabs on Android used to look like the ones in this phone app from 2.2. Functionally they worked the same way tabs work in any desktop app or web. You tap one you get to that page.

It is a working model and we got by with just that. But now as phones are getting physically bigger users start to run into problems. On Android tabs are always on the top. That means that you need to reach further from where you hold the phone to be able to operate them. We need to provide users a better way!




In Android 2.2 release Google bundled a news and weather app with all Nexus phones. Although not many people actually used the app it was still important. It introduced us to the workspaces / sliding tabs UI design pattern. Users didn't have to tap on the tabs anymore but were able to navigate between tabs by swiping.


New Tabs
In the latest 4.0 release the work has now finished. All bundled Google apps now support swiping as a method to move between tabs. The actual tab bar is no longer scrollable itself but I don't think many users knew about it or used it anyways.
[Edit 2011-11-19] I was wrong in claiming that the tabs don't scroll. They actually do at least on action bars. Thanks Jake!


Here are couple of examples how tabs now look like



ICS tab style is directly derived from Honeycomb tab styling


Conclusion
As the integrated apps that users are going to use every day now swiping as tab navigation users are going to expect all apps with tabs to function the same way. Tabs, especially the ones that look like the new ones, are going to be associated with the functionality.

Users will expect your app to support swiping between tabs!



8 comments:

  1. I am not a fan of the ICS tab visual design. No obvious visual clue for current tab.

    ReplyDelete
  2. Hey Jotarun,
    Yeah it is a bit subtle but there is. Selected tab is underlined with bolder line. I think it does work well on real device where the UI isn't so static as it is on screenshots.

    ReplyDelete
  3. @jotarun, The tabs are clearly marked with a line underneath.

    ReplyDelete
  4. Controlling tabs with swiping left and right, then the next level screen fading-on(in) the previous screen. The back button pointing the left feels wired now. Mental model needs to be trained a bit?

    ReplyDelete
  5. So, is this built in now? I know that they released the ViewPager for this sort of swiping. Do we still have to use the ViewPager? Or do we simply use tabs now?

    ReplyDelete
  6. So words are out, icons are in? Seems more confusing.

    ReplyDelete
  7. I also have the same question as Aaron. Is there a way to implement this so it will work well on both 2.x and ICS? Do we use a ViewPager or just tabs?

    Thanks, Love the site!

    ReplyDelete
  8. Hey guys,
    Yes there's an easy way to implement this so it works very well in older versions too. There's a great Open Source & free backport of this functionality in form of a library project. See here: http://viewpagerindicator.com/ and here: http://actionbarsherlock.com/
    I hope those two gets you started :)

    ReplyDelete