UX Teardown: Twitter

Thanks to the great curriculum at Viking School, I’ve been dipping my feet in the world of user experience. A good user experience makes a happy user, and increases the likelihood of retaining your users. In this series of UX Teardown, I will be taking a closer look at how the visual components of Twitter affect and impact their users.

If an individual has spent a certain amount of time on the internet or on the news, chances are good that they have encountered mention of a “tweet” or the Twitter app. Let’s take a look at the interface provided by Twitter and see how it performs for a positive user experience.

Once the user has logged in, the landing page is quite intuitive.

Screen Shot 2017-04-16 at 7.51.45 PM

Twitter has definitely set some of their own personal trends in terms of user experience. For instance, the use of hash tags is now ubiquitous around the entire web, and most users are familiar when they see it. As such, they can litter the landing page with hash tags, because they have been a big enough force to the internet, that the rest of the internet has recognized the relationship between hash tags and trending topics.


Screen Shot 2017-04-16 at 8.01.21 PM

Moving on to the navigation, its bar is spacious and present no matter which page you go to on the site. It contains a mix of icons and text to help with accessibility, and the primary functionality of twitter is emphasized with a fancy “Tweet” button.

The navigation flows very well, and is quite linear. You get from point A to point B without any sort of confusion. The navigation bar is always there to bring a user back to A, if they wish to return to their profile page.

It’s hard to miss. A+ on that one. Good job Twitter.

Twitter is a profile-based social media website. As such, it attracts users from all walks of life, from an unknown programmer to the president of the United States. The goal of the user is to post short message snippets, known as a “tweet”, to all of their followers, and Twitter has provided a very visual cue to where these tweets can be created.

Screen Shot 2017-04-16 at 8.08.15 PM

On the left side of the profile landing page, we see the important information clearly laid out. Important statistics and top trends are all displayed in an easy and readable fashion.

Every single statistic takes the user to a relevant page, retaining a similar interface, and keeping the website coherent. For example, clicking on “Following” brings the users to a list of followers displayed like postcards. The flow is natural, and the design does not confuse the user.

Twitter’s information architecture follows a rather Database-like pattern. You have users and followers who all are capable of posting tweets. There are relationships here, but not all of them depend on each other. Take a look at public tweets as an example; they can be viewed by anybody and even embedded in other websites.

Twitter is all about getting those followers and tweeting to them. The website emphasizes this by good placement of the “Follow” buttons, along with the appropriate designs to make them stand out. The same goes for the “Tweet” button, as mentioned above. This is the case for every single user profile, and makes it easy for users to interact with the main functionalities of the app.

Screen Shot 2017-04-16 at 8.33.53 PM

Twitter does an incredible job crafting and telling stories in user experience, and it shows. It is currently the hottest platform for every subject imaginable, including domestic and international politics, social uprisings, and various other world-changing events. This success is due to their intuitive interface, which makes it almost impossible to get lost in. All colors are paired with contrasting elements that bring out the UI and into the view of the user.

In terms of poor experience, there is very little to point out. One little quirk I noticed was the “Twitter” logo at the very middle of the navigation bar. It seems to be clickable like a link, but does not actually take the user anywhere. Perhaps it should be changed to either a functional link, or an element that cannot be interacted with, so that users do not try and click on it and expect to be taken to another page.