Modern Software Experience

2010-09-29

Twitter

redesign

Twitter was started in 2006. Since its introduction, Twitter has introduced various new features, but the design of the twitter site did not change much. Today, Twitter unveiled its first major redesign.

Twitter.com is the biggest twitter client, with more visitors than all other twitter clients combined. The new Twitter.com has been built on top the twitter API and been built with speed in mind. The old twitter often  defaulted to displaying the infamous Fail Whale. The new twitter should be more responsive.

Twitter has been using the new client internally for a few months already, and is now rolling the upgrade to all twitter users, but not all at once. Roll out to all twitter users is going to take a few weeks.

Old Twitter

Twitter Old design

This is the old twitter; a fixed sized design optimised for 800 x 600 monitors. In this 1024 x 768 screenshot you already notice lots of unused space to the left and the right of this pixel-based layout, and it only gets worse with larger page sizes.

Twitter Old Design Bottom of Page

There is a main menu along the top and links to info about twitter in a footer. In between the header and footer are about fifty tweets. If you want to see more, you need to click the more button near the bottom. If you want to see yet more, you need to click it again, etcetera.

The small content area is divided into a left and a right side. The left side is the main content area; it shows tweets of those you follow, with a box along the top that allows to enter tweets of your own. The right side shows a link to your own twitter profile, some statistics, an advertisement, links to your mentions, your direct messages, favourites, and retweets. Below that are a search box, saved searches, your twitter lists, twitter trends, an display of some of the accounts your following, and a link to the RSS feed for your tweets.
The overall design is content on the left and a sidebar on the right.

Pssst... New Twitter

Twitter Psst... New Twitter

This is how Twitter alerts you that you have New Twitter; a blue bar along the top of your page saying Pssst... the new version of Twitter is here, with a yellow Try it now! button behind it. If you click that button, the layout changes from the old twitter to the new twitter.

Twitter: New Twitter

Along the top of new twitter is a blue bar with the text Welcome to #NewTwitter! Read up on what's new. You can also leave the preview and come back later, and a Close button at the very right. You can click leave the preview to return to the old twitter layout. For a while, twitter allows switching back and forth between the old and new layouts. Twitter calls New Twitter a preview, and will probably keep doing so until it leaves Old Twitter behind.
By the way, note the inclusion of the #NewTwitter hashtag in the welcome message; smart move.

New Twitter

Twitter's New Twitter: Home Page

This is the new twitter sans the blue switch back and forth bar. You don't need that bar to switch back, just click on your name in the upper right corner, on the black bar, to reveal a drop-down menu that includes a Leave Preview option. Notice the stylised blue pen & grey pad icon to the right of Messages and to the left of that menu.

size

The New Twitter makes better use of the page, but only marginally so. The old twitter was designed for 800 x 600 pixels, the new twitter seems designed for 1024 x 768 pixels. The right pane will extend a bit when you enlarge the page, but not much; in a browser maximised on a modern wide screen monitor, most of the web page will remain unused.

The New Twitter looks different. Twitter is no longer a content area on the left with a sidebar on the right. This is now a two-pane tweeting experience, with tweets on the left and additional content on the right.
Mentions, retweets, searches and list are all in the left pane now, directly above your twitter timeline. Tabs allow you switch these different views of the twitterverse.
The content of the right pane is not static, nor does it flow like your twitter timeline does. It adapts to the selected tweet.

details pane

Yes, you can select tweets now. It used to be that you could hover over tweets to reveal the options for that button. These would be star (favourite) for all tweets, reply and retweet for most tweets, and delete for your own tweets. All that is still there and still works as it used to work.

The new Twitter adds the ability to select a tweet to find out more. Now, when you click on a tweet or a tweeter, the right pane changes to provide more information and context. Twitter calls the right pane the details pane.

Twitter displays a small arrow for tweets you hover over. The arrow most often points left, it only points right if you have selected that tweet; the right-pointing arrow indicates that the right pane has more details. Some have written that you need to click that arrow to show or hide details, but that is not correct. There is no need to click the arrow, you can simply click the tweet to select it - just don't click on special things like hashtags, mentions or links.

Twitter New Twitter layout; image in details pane

When you click on a tweeter, the right pane shows a mini profile. When you click on a tweet, the right pane displays other tweets containing the same hashtags or mentions. It will show information on a place when you click the location someone is tweeting from.

Old Twitter Profile Pop-up

Another thing the right pane will shows for tweets are images and videos. Some have referred to this as inline images and video, but that is exactly what it is not; the additional is not shown inside the twitter stream, but next to it.

Many twitter clients already displayed images and videos. Most of them did so inline; within the twitter timeline. That seemed the logical thing do, and works fine for small images and YouTube videos. However, with inline display of images, a tall image results in a tall tweet, pushing all other tweets down, and making you scroll to find these.

timeline text-only

Twitter has decided that the twitter timeline remains text-only. There are no extraordinary tall tweets. Instead, additional content is shown on the right. Moreover, the content is not downloaded by default, but online shown when you select the tweet.

In the above screenshot, the top of New Twitter's details pane is some distance from the page top and as a result the image which could fit is cut off. This seems to be a defect specific to New Twitter viewed in Safari. It looks fine in Chrome. It looks best when you use a somewhat larger browser window. Do notice the grey scrollbar to the right of the details pane.

mini profiles

The old twitter had pop-up profiles; hover over a user-name to see a brief profile. Well, actually, to see a very brief profile with just the profile picture, name and location. You had to click the more... link to see the rest of the pop-up, containing the web site link, twitter bio, latest tweet and statistics.

I never really liked these pop-up profiles, and apparently, twitter did not like them very much either; the pop-up profiles on top of the twitter timeline have been replaced with mini profiles in the details pane.

Twitter's New Twitter mini profile

The mini profile show a profile picture, name, location, bio and web site link. Below that are statistics; number of tweets, following and followers, and the number of twitter lists the user appears in. Below that are some buttons, to follow or unfollow, to have tweets delivered to your mobile phone or not, and to see their retweets or not. You can message the user, add them to one of your lists, and decide to mention, block or report the user.

All of this is present in old Twitter, but you have to visit the users profile page to access these controls. In New Twitter, the controls are available through the mini profile in the details pane. Thus, if you see a tweet you really like or dislike, you can immediately decide to follow or block that person. If someone retweets too much, you unsubscribe from their retweets. You can do this without opening another browser tab or otherwise leaving your twitter stream.

infinite scroll

The more button is gone. The new Twitter is a bottomless experience. The tweets just go on and on. The new twitter supports infinite scroll; just scroll down to see more tweets. I've tried to locate a footer, but the timeline just keeps scrolling…

Twitter on Twitter

Twitter has created a two-minute video introducing the new twitter design. It is a Flash video hosted on YouTube, so you'll need the Flash plug-in to view it. It takes two minutes to show what you can discover for yourself in just a few seconds; selects tweets in the left pane to see related content in the right pane.

The Twitter blog entry A Better Twitter is more informative. It highlights the most important changes. While I merely mentioned that the right pane will show media, the blog entry reminds you that it took partnerships with DailyBooth, DeviantART, Etsy, Flickr, Justin.TV, Kickstarter, Kiva, Photozou, Plixi, Twitgoo, TwitPic, TwitVid, USTREAM, Vimeo, yfrog, and YouTube to make that work.

A thing that blog entry does not tell you is that you do not always have to link to a single image. You can also link to an set of Flickr images. When you do, the details pane will show a bunch of thumbnails and a slideshow with larger images below that. I tried it with the URL for a Flickr search, but that did not work. The screenshot below shows how these thumbnails enrich the tweet; it gives a good idea what you'll find there when you follow the link.

Twitter's New Twitter: a Flickr photo set in the details pane

no need to tweet

Twitter held a press conference for American bloggers. Scobleizer has the only video of the press conference.
One thing that Twitter stressed during the press conference is that you don't need to tweet. Twitter CEO Evan Williams remarked that you don't have to make a web page to use the web, and you don't need to tweet to use twitter. It is perfectly fine to just follow others and be informed by their tweets, and the new twitter.com has been designed to provide a better reading experience than the old one.
For example, the right hand pane will show replies to tweets.

replies

By the way, the right hand pane will show replies to a tweet, but not replies to a reply. This limitation seems deliberate, it stresses the idea that Twitter is for broadcasting brief messages to an audience and perhaps receiving some feedback, not for having long conversations with just a few people. That is what instant messaging clients are for. Twitter isn't an instant messaging client, it is a broadcasting platform.

tweeting

Old Twitter always shows a tweet button and a character count, the new twitter does not. It only shows these when you set the focus to the edit box. Subtle changes like that seems to underscore the idea that you don't need to tweet.

While the new twitter was designed to provide a better experience for readers, twitter has not forgotten that you need writers to attract readers. In Old Twitter, if you decided to tweet, you had to open another browser tab or scroll back up to the edit box, do your tweeting, and then scroll back down again, trying to find where you had left of reading the twitter stream.
In the new twitter, there's always that stylised blue pen & grey pad icon in the bar along the top of the window; you can scroll the page, but that black bar stays put.
Clicking that icon brings up the What's happening dialog box that allows you to tweet, and then continue reading the stream. You do not even have to click that icon, but can use a keyboard shortcut instead.

keyboard shortcuts

shortcutaction
?keyboard shortcut help
ffavourite
nnew tweet
rreply
tretweet
mdirect message
SPACEpage down
jnext tweet
kprevious tweet
/search
.refresh page

The new twitters supports several handy keyboard shortcuts. The one you should remember right away is ? (question mark), to bring up a menu that shows all keyboard shortcuts. The ones you'll be using quickly are SPACE to page down and . (full stop) to refresh the page; hitting the full stop key is a lot easer and quicker than clicking n new tweets.

The keyboard support is half-baked. There is a shortcut key for bringing up the dialog to compose a tweet, but no key for actually posting that tweet. It may seem that you still need to reach for the mouse to click the Tweet button, but you can also hit the Tab key to change the focus from the edit box to the Tweet button and then hit enter to choose that button.

short links

The most remarkable shortcoming of New Twitter is that short links remain short links. Twitter does not expand the links. Apparently, Twitter wants to keep tweets short. Twitter could keep tweets short yet provide expanded links by using the smart short linking technique I introduced in May; users would see the short link on the page, but could hover over the short link to have their browser display the expanded link in the status bar.

New Twitter

The New Twitter takes a bit of getting used too and not all Twitter add-ons such as PowerTwitter are compatible with New Twitter yet, so the ability to switch back and forth between Old Twitter and New Twitter is a welcome bit of flexibility. However, the new features make the change worthwhile.

The New Twitter is  a more modern twitter, that sports features that many popular twitter clients already offered. New Twitter offers an media-rich Twitter experience without destroying the simplicity of the twitter stream.

links