Overhauling the Twitter Experience on Android
Not so long ago, I was asked to redesign the Twitter app as part of a special something. This is one of the most detailed designs I’ve done, so I thought it’d make a good article for Medium. Here we go!
Phone Design
The First Steps
The first thing I do when I start designing an app is write down the feature list as described by the client, and using these features I develop the basic user flow of the app, which is going to describe its primary navigation. However, that was unnecessary in this case, since Twitter already has these figured out. The user flow should always be built in parallel with the most common use cases, so it accommodates to the way the users will actually use the app, thus making its usage easier and clearly understandable.
It’s important to try and create multiple user flows, test, and iterate. Often designers will create a first version of what they’re building and stick with it without exploring alternatives. That first version might be good at first sight, but without comparing with alternatives, it won’t show its flaws and drawbacks.
However, since we’re redesigning a major social network, this step wasn’t necessary either, so I went ahead and drew this user flow along with some common use cases. As you can see in the image above, Twitter has laid out its features in a very straightforward way.
We have:
- the main screen, which is the Timeline where we can see the tweets of the people we follow and, consecutively,
- these peoples’ profiles
- notifications for interactions with our tweets or profiles
- direct messages (self-explanatory)
- the current Trends which works together with the search functionality (we’ll talk about this later)
- and our own Profile which is essentially like any other profile
The use cases depict different kind of activities when using the Twitter app. Be it endless scrolling, checking out replies, just tweeting and not interacting at all, and even a case where the user is not even using the Twitter app. Notice how in the last two use cases the user can stop engaging at any point.
Sketching
Okay, let’s start designing! Now’s the part where we have to accommodate the user flow to Android patterns that Android users are familiar with. The top choices were either tabs or a navigation drawer. After exploring each of these options, I took a step back to think of how users perceive the relation between a website and its phone app.
The website is usually a service’s starting point. Users perceive the website to be the brain of the network, while mobile apps are “convenient ways” to transfer the content to their hands.So it’s important that apps act like mirrors of the website they’re serving. As such, both platform need to behave in such way that users won’t have to relearn everything, essentially forming what we call cross-platform consistency.
With Twitter’s website using tabs, the alternative was out of the question. On first launching the app, users will immediately recognize the icons and they will instantly know what content to expect on each tab. I could have used text labels instead of icons, but icons reinforce brand and that’s exactly what makes them instantly recognizable.
Most Android apps use right-side drawers or panels to show notifications, so we lose a few points for not keeping track with other Android apps. But for the sake of consistency we’ll use a tab here.
This Action Bar accommodates all of Twitter’s navigation, as you can see all the top screens in the user flow diagram are accessible through this single element that works as a center point for getting around in the app.
Let’s move on to the Tweet design. You can see above the most common types of tweets; a normal tweet, a tweet with a picture, and a quoted retweet.
Right off the bat you might notice the avatars on these tweets are not circle-shaped like on most Android apps, but rather square-shaped, and that’s because one of Twitter’s brand details is their square-shaped avatars.
The guidelines helped in creating these layouts. Metrics are mostly based on the design guidelines, with colors from Twitter’s official branding spec being used to differentiate between the elements of a tweet, and yes, I checked — the colors work well for color-blind users. The icons in the image are just desaturated, but it’s better to check this colors by transferring your designs to your device and simulating color space. You can do that by going to Settings > Developer Options > Under “Hardware accelerated rendering” > Simulate color space
If we combine all of these we will get the Timeline screen, save for the FAB, but I bet you already know what that does. Alright, let’s talk about this FAB.
The FAB
Tweets consist of text, and optionally images from your device or a picture or video that you can shoot using Twitter’s camera option.
These are the options I took into account when creating the FAB. At first I went with a paper FAB, which is a paper sheet of options that reveals itself when the FAB is pressed. I also tried a Speed Dial which included the same options as sub-actions, but the flaw with these types of FABs is that the FAB in its unpressed state would have to use a Plus icon, which would then rotate to resemble an X when the FAB was pressed. And a Plus icon just didn’t sound right to me.
So instead I removed all of these options and found a better placement for them in the next screen, eliminating the need of choice, or how Taylor Ling calls it “interaction fatigue”. This way the FAB tells a simple story, “create a tweet”.
As soon as we press the FAB, a sheet of paper comes from the bottom and takes place on the screen. When the user touches the FAB, an ink explosion is started right from their finger, which covers the screen and introduces the new sheet of paper. This transition could very well work even without the ink explosion, but the ripple animation ties user press with the reaction, and the user understands that they caused the change in the UI, making them feel in control.
So this is the tweet editor screen. I went through many iterations of it, and settled on the most logical and usable one.
Let’s start off from the bottom. These boxes right here serve as placeholders, informing the user that they can occupy this space, with either a photo or video from the camera, or an image from the gallery. Over here we have 5 to 10 recent images from the gallery so that the user doesn’t have to waste time searching around for an image that they recently took or downloaded.
This is where those FAB options went. Friction is still the same, two taps away, so we didn’t slow down the user here (cognitive load has changed though).
Up here we can write our Tweet, and we can see the character count side by side with the Tweet button, because proximity implies relation. When the user surpasses the allowed character count, this makes a slight shake and draws attention, sort of like it wants to say “Hey man, I can’t allow you to type any more characters, you gotta delete something!”. And it also changes color based on how many characters you have left. Let’s tweet this and go back to our Timeline.
Tapping a tweet on the Timeline causes a change in hierarchy. The tweet is placed on a sheet of paper which then gains some elevation and expands so it covers the screen. Animation is key here! Cognitive load is minimal, since the animation communicates to the user the change in context and in hierarchy.
As paper expands, the user is aware that the Home screen is just under this sheet of paper, and they can go back instantly just by pressing the X button in the Action Bar.
I explored two versions of this animation, with the first one pushing the tweets away instead of placing the tweet above them, but ultimately I used the latter because I felt like it communicated the changes in hierarchy and context better in this situation.
The Tweet screen itself is pretty straightforward, nothing really needing an explanation here.
You can see here how all the tabs look like. Information design here is majorly Twitter-like to further reinforce brand.
You might have noticed that the FAB action is different in the Messages tab, that’s why it needs an appropriate animation to let the user know about this change.
When scrolling between the Home and Notification tab, the FAB remains unchanged, since the promoted action is still Create a Tweet. However, the action in the Messaging tab is Create a Direct Message, so while scrolling to the Messages tab, the FAB could shrink down and then grow back up with the new icon, drawing the user’s attention, hence letting them know about the change.
The Conceptual Model
What’s interesting is that by now the user has created a conceptual model of the app. Not necessarily of how Twitter works, but how the navigation of the app works. Hierarchy is clear in their mind and everything works according to their expectations.
Above is visual representation of the Z level. At the bottom there’s the base where all the tweets, notifications and messages are drawn, the ActionBar and the FAB. Accompanied by a “material explosion”, I think that’s the name these 3D looking renders are getting.
The animations we saw earlier, among other things, help the user build this conceptual model and get a grasp of the navigational structure. But since they’re arguably heavy in details, they might become tiresome and even slow down the user after a while. So why not speed this animations up after the user gets familiar with the structure of the app? Luckily, one of the awesome developers at Novoda had the same exact thought and made a library exactly for this case!
The conversation screen is also very straightforward but I’ll take this opportunity to explain the logic behind the 72dp keyline.
According to the design spec, an optimal way to organize the content of a list item is, starting from the left edge, a 16dp padding, the avatar of 40dp, again 16dp padding, and then the text of the item.
16 + 40 + 16 equals 72dp, so what the keyline is trying to achieve is to align the title of the ActionBar with the text on our list item, so it provides some visual balance to the layout. That’s exactly what we did in the Timeline screen, and it worked perfectly. But this is not the case here, since we don’t have list items, but rather conversation bubbles. So, I aligned the Action Bar text with the text in the bubbles, which is 48dps, because that’s what makes sense in this particular layout (and it’s also a pretty good number!).
Let’s move on to Profiles.
I really like what Twitter did with the new profile layout on both their Android and iPhone apps, so my version isn’t really that different.
So I took that 3:1 image they use as a header now and extended it so it covers the Status Bar too, while still remaining pretty visible.
Something Twitter has completely omitted on mobile apps is the color theming. They extract the most dominant color from the header image and use it to theme some UI elements. Essentially Android’s Palette. Only personal info uses the extracted color. Twitter-specific actions such as Follow and Tweet still use Twitter’s signature color.
Over here you can see I’ve used the same tabs that Twitter lists on each profile screen, further strengthening the consistency between the two platforms.
One thing that needed some thinking was the sub-tabs below the user’s info. Twitter divides the Tweets tab in Tweets, Tweets & Replies, and Photos and Videos. At first I thought of using a drop-down menu, but that wouldn’t be very effective because users wouldn’t know about the other options listed in the dropdown. “Out of sight, out of mind”, right? So instead I used this layout which uses a press to switch between types of Tweets. It took some time to get this to look right, but in the end the layout turned out to be pretty good looking and functional.
Not so long ago, Twitter decided to remove the Discover tab where the Trending topics were hosted, and moved them into the Search screen. This was probably a decision taken after careful consideration of their analytics data, so I’m going accept this decision and design on top of it.
After pressing the Search action in the Action Bar, we are presented with the Top 10 Trends on Twitter, along with brief descriptions of each. That’s the base of Twitter’s new Trend screen. Trends most of the time are acronyms or abbreviations, so it’s impossible to know what they’re about. In this screen, the Top Trend is given some chrome and placed at the top of the screen accompanied by a relevant image, with the search bar below it, that can be used to search for Tweets, People, News and more.
Tablet Design
When I first started redesigning Twitter for tablets, my first idea was to divide Timeline, Notifications and Messages into 3 different panels placed on a horizontally scrolling view. This layout showed its flaws very quickly. First off, when the screen can fit some more than 2 panels on screens, it is impossible to know which one the user is currently focusing on, and thus impossible to sync Action Bar actions and the FAB action with their respective panels.
So I decided to use tabs on tablet too. The layout is way cleaner, easier to see and understand what’s going on in the screen, and it’s still consistent with the website.
Here’s how it looks like. I moved the tabs up a row because I felt like they were wasting space placed on their own bar.
When scrolling, the blue sheet of paper will contract and gain some elevation so the tweets can scroll below it.
Touching the FAB causes the same animation we saw earlier to start, but instead of a splash of blue color, this ripple dims out the screen, and the editor is presented as a dialog. The layout is identical to the phone layout we saw earlier, so there’s nothing new here.
Tapping on a Tweet doesn’t switch to a new screen, but instead, the Tweet card expands in place to show the extra content. The X button that returns the Tweet to its original size is placed outside of the paper container. This allows it to stay on screen even when the Tweet has scrolled up, because a Tweet can contain replies and can get very long. So having the X button by its side allows us to exit the Tweet without scrolling all the way up.
Yes, you can exit the tweet by tapping on the background too, but this isn’t a clear indicator and the user won’t know if this functionality exists before trying it. So, adding a clear indicator such as the X button offers a clear affordance.
This is one of my favorite screens of this redesign. This is a basic Master Detail layout, Messages list on the left, Conversation on the right.
The Clear All action that on the phone was placed in the ActionBar, here it’s moved just above the messages, because it makes more sense to have it in a place closer to part of the layout that it acts on.
This one looks just like the website, while still making sense on mobile. Everything about color and tabs we talked about on the phone layouts applies here too.
Let’s note that all these layouts are flexible and can easily adjust on tablet portrait mode.
That’s it for my Twitter redesign! Hope you enjoyed reading this and I hope even more that you learned something new.
Check out the shot on Dribbble!
If you wanna get it touch, here’s my website chrisbasha.com
I’m pretty active on Google+ so you can follow me there, but not so much on Twitter (the irony, eh?)
