HOME | DD
ghost301 — Twitter for Android - with ICS Theme
by-nc-nd
Published: 2012-01-25 12:40:02 +0000 UTC; Views: 15880; Favourites: 48; Downloads: 971
Redirect to original
Description
01|MAY|2012 - Made a Revision 1 of the initial design. Took some of the comments into consideration for Revision 1.What is changed:
1. Noise effect in the top bar is slightly improved, and removed the gradient effect
2. Added virtual menu button
3. Resized the Twitter logo to slightly smaller
4. Removed the shadow on the Twitter logo in Search mode
5. New Compose UI. No longer a compose window.
--------------------------------
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.
Android UI/UX
Related content
Comments: 20
eres la verga deberias trabajar con twitter y facebook y google joder!
👍: 0 ⏩: 0
I really liked the tweet lanes idea of a contextual tweet bar, would love to see that here.
👍: 0 ⏩: 0
Thanks! Glad you like it!
👍: 0 ⏩: 0
Love It! Just wondering how would you apply the theme, just to replace twitter app/use patch/etc?
👍: 0 ⏩: 1
Hey, thanks for the love! Unfortunately, it can't be just the skin of it, it has to be an new app entirely. There are already some Twitter app in the Play Store using the Holo skin, you can check them out if you looking for something similar.
👍: 0 ⏩: 0
Thanks! Indeed, I did use G+ as one of the reference.
👍: 0 ⏩: 1
Great design skills, im working on an app for android and need someone to work on the ui design, are you freelance designer?
👍: 0 ⏩: 1
Thanks! Sounds interesting, but currently I am a little too busy to take freelance design job.
What sort of app you are working on (if you don't mind to share)?
👍: 0 ⏩: 0
This is so much cleaner, and nicer than the original UI...
👍: 0 ⏩: 1
Hi there,
Thanks! Glad you like it!
👍: 0 ⏩: 0
Hey it's nice but the options to attach stuff to a tweet isn't really in Holo...you should use a lower action bar instead...
👍: 0 ⏩: 2
Thanks for the suggestion!
👍: 0 ⏩: 0
You can also use a new view instead of a popup...other then that, i would LOVE to see this thing in real...the only Holo app for twitter is Boid and it looks not very nice :S
👍: 0 ⏩: 0
Some advice:
- Google Android Design and guide the guide a deep reading.
- Some fonts are just too small to be readable on a phone.
- I'll suggest you to re-work the texture of the nav-bar and color.
- Eliminate the shadow in the Twitter icon on top of the white bar.
- It honestly needs a lot more polish and sophistication, give it more iterations.
👍: 0 ⏩: 1
Hi there,
Thanks for your advice!
1. Thanks for your suggestion. I have read the Android Design more than I could imagine for making the ICS GUI Design Kit.
2. Which fonts? I have transferred my concepts to my Nexus S and everything look just fine. Those are the default size in the current Twitter app which I think they are OK. Size is changeable via options.
3. Agreed. I will see what I can improve on the Action Bar.
4. Sure. That was actually directly from the original Twitter app, so indeed the shadow doesn't look fit in the app.
5. I will see what I can do for the next iteration.
Keep'em coming!
👍: 0 ⏩: 1
2.I think he means the font size used in "connect", more specifically the date and associated text. Maybe too small for screens smaller than 4 ", but from what I see, I think that would be the only problem related to the font size.
3.I agree with Febernovo, I think you added noise to the top bar, but the end result was not as good visually.
Other than that, my criticism would be that the app doesn't have a virtual menu button.
👍: 0 ⏩: 0