Under the hood: Twitter

A closer look at the UX of one of the most used websites on the Internet.

This is a part of the assignment at Viking Code School’s Basic Prep Work. The idea is to “take apart” different websites in order to understand how they work or why they don’t work. In this post I’ll give my thoughts on the user experience of Twitter.

Let’s dive in, shall we?

Who is the key user?

On their About page, Twitter has stated their mission as “To give everyone the power to create and share ideas and information instantly, without barriers.” so it seems they’re trying to appeal to as wide an audience as possible.
However, looking at the actual UX or the main page with tweets, trends etc. the target user would have to know a thing or two about the general information layout of the Internet because there isn’t one clear goal or route to take once you’ve logged in or searched a topic.

What is the user’s number one critical goal when using the site?

After poking around for a bit I determined two main goals of the site:

  • Find (the latest) information about or from a specific person/company/topic
  • Share information with the rest of the World in short messages

What is likely to make that user’s experience particularly positive?

  • The seemingly endless flow of information is packaged in short bursts (140 characters at a time) so the user is more likely to understand all the information.
  • Retweeting, adding hashtags to posts and liking other tweets make the user feel engaged and part of a community.
  • Reliably find interesting new topics through trusted/admired people.
  • The constantly updating nature of Twitter makes the user feel up to date with current news and trends.

What is the approximate information architechture of the site?

In the graphic below, the user starts from the Home Page and is presented with options in the middle column. These either lead to a list or feed of tweets, people, topics etc. or have another function (such as advertising your product or looking/editing your profile).

The main data architecture is shown in white boxes. Main data components are user accounts, their tweets and topics (hashtags) which are all interconnected.

Basic information and data architecture of Twitter.

What is the flow to accomplish the critical goal?

Using the information architecture and the listed goals above, we can determine the basic user flow through the website:

Finding information about someone or something
Sharing information with others

This may seem very simple and straightforward but that’s actually what you want when designing the user experience. The “shallower” and easier the design, the more users actually want to use it because most websites are just tools that you use to accomplish a certain goal. If a tool has a steep learning curve or is just tedious to use, people become bored and try a different tool instead or just avoid using it. This is especially true on the Internet.

What styles of navigation are used?

Do they answer the key questions “Where am I and how did I get here?” and “Where should I go next and how do I get there?”?

Navigation is either search-based and/or click-based which means you either enter a search term, scroll through results and click the one you want or just hop from one account to another by clicking twitter handles (@account) or topics (#some_topic).

The topic you’re currently browsing is displayed at the top.

The question “Where am I?” is answered and displayed on top of the page (it’s either the account name or topic name). However there is no breadcrumb menu or other indication about how you got there but given the nature of the site (one of the main goals is getting more new information) there’s no need for one most of the time since you can go back to your home page with one click and start over.

The question “Where should I go next and how do I get there?” is answered in two ways: the first way to go on, a.k.a. get new content is to simply scroll down the page which is indicated by initially showing more content than fits your screen to encourage scrolling and “teach” you to the site’s mechanics. This is a very elegant solution in my opinion since it requires zero thought from the user about “how to get there”. The second way to move from one place to the next is by clicking links in the feed you’re already reading. Again, this navigation works instinctively since the links stand out from plain text and the context or motivation to move there is given by the tweet you’re already reading. There’s also the option to share/retweet and like every tweet but these features are more secondary in my opinion (they’re grayed out and blend into the background rather than stand out).

What key interactions does the user have? Are they clear and usable?

There are many interactive parts inside tweets (links, pics, videos, hastags and other users’ twitter handles) and all of them are fairly simple to use, since one click is sufficient to reach the goal of those objects (follow a link, hashtag or a profile or enlarge a picture/video).

Lots of interactivity in one tweet.

Other interactions include sharing, retweeting and liking a tweet but as I mentioned they feel secondary and don’t stand out as much. This is a good thing since the main focus of getting information is already very visible and if posting options stood out in the same way it would probably create a lot of confusion especially in new users.

Conclusion

What did the site do well to allow the user to accomplish her goal effectively, efficiently and with good satisfaction?

Finding “hot topics” and staying up to date with them is fast and simple. After learning how the site works, it’s also clean and simple to engage in the community and retweet/like the content or to contribute new information.

What did the site do poorly when allowing the user to accomplish his goal effectively, efficiently and with good satisfaction?

Since I’m not an avid Twitter user, my only critique is that for a non-user it’s not very straightforward to find information from the home page without an account.