Playing catch-up with the Twitter app

Home is where the Tweets are

Twitter's Home timeline is a vital part of the Twitter experience: it is the firehose through which we consume most of our Tweets. Some like it algorithmic, others prefer chronological, but in essence it's "just" a list of items stacked on top of each other.

For some (myself included) their place in that list is quite important. Twitter seems to a good job of placing related Tweets close to each other, and thus I often remember Tweets based on their position in relation to each other. You don't have to be a Twitter completionist to value your place in the Home timeline.

Twitter agrees: when you open the app it will attempt to preserve your last position in your timeline by showing you previously cached Tweets. The newest set of Tweets is appended to the top, and you can scroll up by tapping the "New Tweets" banner, tapping the top of the screen, or tapping the Home tab item. Recently the timeline has been a bit jumpy due to a bug on iOS, but that's luckily been fixed.

It's a long way Home

So staying in place and reading Tweets works nicely, and scrolling up to the newest Tweets is easy too. Great! But what happens if you accidentally scroll to the top? Either by tapping the banner as you scroll, tapping the top of the screen while dismissing a notification, or switching back to the Home tab and accidentally tapping a second time? You'll have to find your way back (if you care enough to do that, of course).

This is by no means a fatal error, but wouldn't it be nice to catch these users and provide them a thoughtful little way back to where they were?

It turns out that Tumblr encountered this same problem back in 2014, and came up with a solution: when you tap to go up, you can tap again to go back down.

Image from Unwrapping Tumblr

Man, this takes me back

Based on the solution by Tumblr, I set out to prototype this same interaction for the Twitter app in Figma. Twitter's birdhouse icon immediately formed a great inspiration: the hole inside the birdhouse could easily morph into an arrow. I spent some time playing with the animation and scroll timing.

The result is pretty simple: once you scroll back up – by tapping the Home icon, the top of your phone, or the "New Tweets" banner, the birdhouse will morph to include a downward arrow. Tapping the arrow will scroll you back to where you were.

Implementation

Twitter appends new Tweets to the top of the timeline while keeping your old Tweets loaded. If there's too many new Tweets, only the first bunch will be loaded and a "Load more Tweets" button is displayed in-between the new and old.

This makes it fairly easy to remember the scroll position to return to: simply load the tweets before you scroll up and remember the scroll position you came from. If you press that "Load more Tweets" button, or once you refresh and append even newer Tweets, that scroll position isn't valid anymore. At that point the scroll-back should stop being offered, because the user doesn't seem to need to return anymore.

That's it, sweet & simple! I'm quite happy with how this turned out, especially the animation and bounciness of the icon. Maybe it will find its way into our favourite app sometime 😇

I'm curious to hear what you think of this idea. Feel free to let me know on Twitter!