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.
Techie Talkz 
Hey, I also planned to design the Twitter app with ICS Design Guideline, but since you did it, I’ll just make some comments.
First, I wonder if it’s “clever” to have distinct colors for the ActionBar and the Stacked Tabs, because by default, they merge when switching to landscape mode (or on tablets), like the YouTube app:
I don’t know if I would use “Holo Light” or “Holo Light with dark action bars”, but I would put the same color (try both and choose the best one). The blue icon on light background should be nice, like you did on the “Search Mode” screen (rather than a blue icon over a blue background).
On the home screen (with stacked tabs), you should move the icon to the left of the brandname (“Twitter”), so that the icon always stays on the top-left corner.
I totally agree that the “Interaction and Mentions” tab is a mess. It’s redundant and I would only put all in the same screen, but the on/off switch is ok (to remain consistent with the website).
The Discover tab is really nice. God job!
The “Compose Tweet” screen is also nice, but if you choose “Holo Light with dark action bars” as main theme for the app, I would color the top and bottom bar in dark to remain consistent. By the way, I wonder how it feels if you combine Holo.Light and Holo.Light.Dark.Action.Bar on the same app, but on different screens.
Another thing you didn’t make (yet?), is the “show tweet” screen. Here you can use another UI element : the Swipe Views (like the Gmail app).
Finally, a nice option for those you use multiple accounts, is the possibily to quickly switch account, directly from the ActionBar. It could be a drop-down menu, available on every screen (like http://developer.android.com/design/static/content/action_bar_pattern_spinner.png)
Regards.
Matthieu
Hey!
Awesome comment you made here! Indeed the design still requires a few iterations to got the best out of the stock theme/UI elements.
I will keep your comment in mind when I start working on the next!
Rgds,
Taylor
Excellent concept, Taylor! I am in love with the ICS holo theme and your concept is the closest I have seen to an ICS optimized twitter client.
Though I doubt the devs at Twitter will revamp the UI of the official app, I hope someone decides to adopt your design and bring this beauty to life. Or if I go crazy from the lack of well-designed twitter apps, I might start learning to code to make this. Cheers!
Do tell me if someone contacts you to
develop this. (Twitter ID: @AgentAkki)
Hi there,
Thanks for your words! Indeed, I also doubt that the Twitter devs will revamp their app, but I will see what I can do, though I doesn’t have any plan yet.
I will keep you updated for sure!
Rgds,
Taylor