Click the image above for full-size view.
I loved the Holo theme in Ice Cream Sandwich. That’s the reason I made the Android ICS GUI Design Kit in PSD for Android Designer to design high quality app with stock UI elements in mind. But I am also curious how well can the UI elements in Holo theme for ICS can be applied to the currently available apps, so I decided to start with the official Twitter Android app, which is an easy one I think.
I have tried to apply stock UI elements as many as possible to show that they can be used to design high quality app and preserve the user experience (UX) that is consistent and predictable with the stock ICS. During the design, I also try to improve the UX of the app for better usability.
- Stacked Tabs - For the main tabs, I have decided to use Stacked Tabs instead of Scrollable Tabs. Scrollable Tabs can work well in this case, however, for 4 tabs, Stacked Tabs is suitable. This will allow the user to tap on the wanted tab, and also allow the user to scroll through the tabs using horizontal gesture. You will notice that the selected tab will have a highlighted effect at the bottom of that tab (which is a stock tab behavior). For the unselected tabs, the grey indicates that it is not selected and there is no update for that tab. The blue highlight for unselected tabs indicates that there is some unchecked updates.
- Refresh button – To be honest, I am not a fan of ‘Pull down to refresh…’ feature in the Twitter app. Call me old school, but I still prefer a Refresh button on the Action Bar.
- Search button - I have also added a Search button on the Action Bar. In the official Twitter app, a Search button (but looks like a text field) is placed on top of the content (both in Connect and Discover tab), so if you scrolled down to the very bottom of the page, you will have to scroll all the way back to the top to access it. I am aware that we have a hardware Search button, but I think it will still be easier if the user can initiate the search within the app.
- Grid Lists – The Discover tab is a good example to show how the Grid Lists can be used in the app, other than the stock Gallery app.
- Mentions Only switch at Connect tab – In the official Twitter app, the bottom bar consists of two tabs, Interaction and Mentions, which in my opinion, is redundant and confusing. So instead I have made it a switch to turn on/off Mentions Only mode for the Connect tab.
It is really interesting to see how well an app can be enhanced only with the stock UI elements in ICS and of course, well in-line with the Android Design Guideline. Let’s hope with the released Android Design guideline meant for ICS, there will be more good quality app in the Android Market.
Don’t hesitate to comment/criticize my UI concept, this is where we can learn our mistake and do better for the next one.