Twitter timeline: the worst icon to ever signify a feature

Twitter is one of the most popular social networks out there and a company that employs a large number of graphic, interface and experience designers. According to Digital Information World, it is among the top 10 social networks.

However, there is a big design problem in Twitter that hasn’t been properly addressed by this large number of designers, and it has become an example of dark pattern in interface design: the timeline view toggle icon.

The “Timeline View” toggle icon in Twitter’s desktop web version.

The timeline view toggle is a feature that allows a user to change between viewing the timeline in chronological order or in an order of relevance curated by Twitter’s algorithms (“highlighted” tweets). This second viewing mode also shows tweets that you might like seeing because your friends liked (“hearted”) them. For some users this meant seeing all the selfies their friends liked, all the Trump tweets their family liked, and all the adult content their co-workers liked, along with promoted content, or content that was simply very popular in the social network — be it actually relevant or fake news spreading fast.

In 2017 this timeline viewing mode became the default for any new Twitter account (or any new install of the app), and users were quite confused by it because there wasn’t a way to turn it off. Twitter provided a feature called “See less of this” that would allow you to hide a certain tweet from your timeline (also hidden under a tweet’s contextual menu). If you marked enough tweets of a certain kind with this, they would eventually disappear until a new Twitter update came out and reset it.

Finally, in 2018, noticing the issue that this behavior brought, Twitter decided to add the timeline view mode toggle. Many users did not notice the change, and many still don’t know that you can go back to the original chronological view without everyone’s likes being thrown at you.

First, let’s consider the user flow of this feature:

1. The user logs in successfully to Twitter
2. They are taken to the Home tab where all the content is sorted by relevance
3. They click or touch an icon button to toggle the timeline between relevance and chronological order
4. They see a modal drawer or pop-up dialog with both options: the current one (highlighted tweets) and the chronological one
5. They click or touch the chronological order button
6. The drawer or dialog closes
7. The timeline refreshes to show the tweets in the selected order
8. A toast notifications tells you what’s changed

Now let’s see how it actually looks:

The Twitter timeline on the web, desktop version. On the left menu: Home, Explore, Notifications, Messages, Saved Items, Lists, Profile and “More”.

Did you have any luck finding the timeline icon button?

Here’s what Twitter’s official help has to say about it:

“In the top menu, tap the ‘sparkles’ icon. Tap the arrows to switch to the timeline view of your choice.” — Official twitter.com help

Here’s that icon one more time:

The “sparkle” icon used for “timeline view” settings: A large four-point star with smaller cross-shaped stars around it. Same design as the Sparkle emoji. — Screenshot

You might be familiar with it, it’s the same design as the “Sparkle” emoji. ✨

This is, by far, one of the worst choices of icon I’ve seen recently, to the point where I believe it has been chosen to keep users from finding the feature and help twitter drive more promoted content to everyone’s timelines. It feels like a dark pattern, more than just a bad design decision.

The sparkle icon does not help the user find the feature, and it doesn’t represent a timeline or a setting at all. It also does not reflect the toggle interaction nor the current status of the timeline, always looking the same under any setting.

Also notice that, even though the title of the timeline says “Most recent tweets”, only the icon button is clickable, so it ends up breaking the expectancy that the icon is related to the title, or that the title is a label to the icon. Both of these things are true, but they’re not designed in a way that this is made clear, since the icon is so hard to relate to “timeline”. Another fault in this case is that when you scroll the timeline (pretty much the first thing any user will do when entering Twitter), the header with the timeline title and the icon button does not stay in sight.

There are many ways this feature could have been exposed to the user:

• A clock icon or something else related to “time”

A clock with hands — by https://www.flaticon.com/authors/freepik

• A series of itens in a row, representing a “timeline”

Boxes of text running vertically along a timeline — by https://www.flaticon.com/authors/kiranshastry

• Custom representations of each timeline mode, as in “ordered by date” and “ordered by relevance”

A calendar icon — https://www.flaticon.com/authors/freepik

A rising chart icon, representing relevance and trending content — by https://www.flaticon.com/authors/freepik

There are plenty of solutions available out there, and you could probably come with something better than Twitter’s weird sparkle emoji icon in under 10 minutes.

Other than the icon itself, this is a rather strange location for this button, because even though it is presented in the context of the timeline, all of the other timeline settings are placed under the Settings tab (which is under the “More…” item in the menu, and in a separate tab inside it).

When you click/touch that sparkle icon, you’ll see this:

“The most recent tweets are shown as they are published” is the current status, “Go back to the Home view — you will see highlighted tweets first” is the other status — its double arrow icon doesn’t make much sense either.

This little pop-up contains a much better icon— even if not perfect — to describe the current status and feature: an analog clock and an arrow running around its rim, along with little sparkles — What’s up with the sparkles, Twitter?!

If you do toggle to the next view mode (“highlighted tweets first”), you’ll see the sparkles icon back, indicating the current status, but it only changes inside this pop-up, with the actual icon button on the timeline remaining the same.

“The Home Page shows the highlighted tweets first” — this is the current viewing mode. “View most recent tweets instead — You will be returned to the Home Page if you’re absent for a while”.

As I previously stated, even if you change to the chronological timeline view, you will be taken back to the default relevance view if you don’t log in or open the app for a while.

Ways this feature design could be improved

First of all, the toggle button icon could really work as a toggle button:

• Click/touch the button to toggle between chronological and relevance timeline views (e.g. Most recent/Highlights)
• It could have different labels for each state: “Most Recent” and “Highlights”, for example.
• It could have different icons for each state: Clock and Chart, for instance.
• The title of the timeline and the toggle button could be fixed upon scroll, so that users have a better chance at finding it once they noticed their timeline is not set up as they prefer.

There are other improvements that could be made to the feature as a whole:

• This feature could also be placed in the Settings page, not only on the timeline, along with some better copy and radio buttons:

“View the timeline in chronological order. You will see tweets as they are posted, and you will not see tweets other users have liked.”;
“View highlighted tweets, suggested to you. You will see the most relevant tweets among the users you follow, including those that they liked best”.

• Upon onboarding or coming back to the app/website after a while, users could be taught how to switch back to chronological view.

We’re glad you’re back! While you were away, we switched your timeline back to Highlights view. If you want to, you can switch to the Most Recent view —[ Switch to Most Recent] /[ Leave it as it is].

• If the toggle button works as expected, there would not need to be a pop-up/dialog telling you what is happening. Text label, alt text and the toast notification would suffice.

Text label: “Most Recent”
Alt text: “Viewing most recent tweets. Click to change to Highlights view.”
Toast notification: “Viewing Highlighted tweets and most liked content. [Revert to Most Recent view]”

• Even if the toggle button gets a label, there is an alternative where clicking the title (“Most Recent Tweets”) could also act as a menu button, opening a list of options (“Most Recent” and “Highlights”) for the user to choose from. This would be the most fail-safe option. On hover, the title would highlight the timeline header as a whole, including the icon, so the user notices the relationship between them.

The new user flow would become:

1. The user logs in successfully to Twitter
2. They are taken to the Home tab where all the content is sorted by relevance
3. They click/touch the chart icon labeled “Highlights”
4. The icon changes to a clock, and its label to “Most Recent”
5. The timeline refreshes to update the view
6. A toast notification tells what’s different and how to revert it. Ideally this notifications contains an action link or button to revert to the previous state.

The Twitter design team hasn’t had success finding a proper icon or interaction that is suitable for this feature, yet. The design of a product is always evolving. I am not aware, of course, of all the business decisions made around this feature, and how important it is for twitter’s goal of pushing promoted and relevant (popular?) content, but it is obvious to me that the way it works right now is very close to a dark pattern, unfortunately tricking users into ignoring it so that Twitter can show you whatever content is more important to their success as a social network.

In a time where fake news are all around us, it is important that users can have better control of what is delivered to them. In that sense, it is almost irresponsible to hide such feature, and I hope it’s just an overlook that they can fix soon.