In September 2010 Twitter began rolling out a new interface for the browser version of Twitter.com. As an active user I was first in line to click the "Pssst... the new versions of Twitter is here. Try it now!" link to receive the new interface.
A few months down the line I almost sub-consciously changed back to the old Twitter.com interface. Not because I had anything against the new interface, but because... well, that's what I set out to find out; Why did I indeed change back?
Although I have heard of issues using the new Twitter.com on Internet Explorer it is not browser issues which have made me change back. After all; bugs are expected in any beta.
Why I use Twitter.com at all I access my Twitter feed through a range of devices: My iPhone, my iPad and, less frequently, on my computer. For me one of the key benefits of Twitter has always been its simplicity which lends itself perfectly to mobile devices.
I also access Twitter through a range of apps and services namely Twitter's own app for iPhone, Twittelator for iPad and Tweetdeck/ Hootsuite for laptops.
But across all devices I also use Twitter.com, more often than not triggered by Twitter email alerts about new followers or new messages. Clicking the links within these emails opens Twitter.com in a regular web browser. While I'm there I may as well check the tweets as well. No point to change to another Twitter client just for that hence I do use Twitter.com.
New vs Old: The Twitter.com interfaces in details So Twitter.com does play a significant role in how I digest my Twitter feed even though I use a range of apps as well. As such I expect it to deliver an optimal user-experience. Let's look at how the two Twitter.com interfaces compare to each other.
Load time The first difference between the two Twitter.com interfaces is clear when browsing using mobile 3G Internet connection: The new Twitter.com interface loads slower.
But even on WIFI/Broadband the new Twitter.com displays in steps: First the header — wait — then all the secondary content — wait for it — and then finally as the last thing to load is the most important content of all; the actual tweets. The old interface seems to show everything as fast as the new one only shows the first step. Round 1 goes to the old Twitter.com interface.
Layout As the new Twitter interface is wider than the old one, 920px wide vs the 764px it would be fair to assume it is harder to read the new interface on smaller screens. But the reality is that the actual tweet stream is only 510px wide vs the old width of 525px so the difference between the two is negligible as mobile users tend to zoom in on the actual content. Physical user behaviour But the one thing that made me abandon the new Twitter.com interface is how it interacts in the physical world of mobile devices and in my case especially how it interacts with the iPad.
Using a physical keyboard and tapping on a touchscreen keyboard are two very different experiences. On a physical keyboard you can feel the key react to the pressure of your fingers. As a user you have received actual physical feedback.
But tapping a touchscreen gives you little physical feedback. You know you touched the screen but your finger sensation doesn't tell you whether the key was sufficiently pressed or whether you hit multiple keys.
You rely almost exclusively on the virtual feedback from the screen; if the correct letter appears you must have pressed the right key.
Let's look at a user scenario across the two Twitter interfaces using iPad to illustrate the difficulties faced using a touchscreen keyboard.
Scenario 1: Adding @CapgeminiGreen to a Twitter list using the old interface
A user wants to follow twitter.com/capgeminigreen and add it to their Twitter list named "Eco" using the old Twitter.com interface with their iPad.
The user clicks the "Follow" button on the left. Twitter returns instant feedback with a bubble saying "Follow CapgeminiGreen".
Step 2 The user clicks again and the "Follow" button changes to a "Following" statement. Twitter also opens a panel underneath suggesting similar Twitter accounts.
Step 3 The user clicks "Lists" dropdown on the right. Twitter returns instant feedback with a bubble saying: "Manage lists in which CapgeminiGreen appears".
Step 4 The user clicks again and receives a dropdown listing their own Twitter lists.
Step 5 User clicks the tickbox next to "Eco" and a little progress wheel appears until the tickbox is checked.
The task is completed using the old Twitter.com interface with good feedback throughout ensuring the user that they actually did click what the intended to click and that Twitter acknowledged the action correctly.
Now let's look at the same scenario, again using the iPad touchscreen, but this time with the new Twitter.com interface.
Scenario 2: Adding @CapgeminiGreen to a Twitter list using the new interface A user wants to follow twitter.com/capgeminigreen and add it to their Twitter list named "Eco" using the new Twitter.com interface with their iPad.
Step 1 The user clicks the "Follow" button on the left.Twitter returns instant feedback by changing the button to a red "Unfollow" button. Twitter also opens a panel underneath suggesting similar Twitter accounts.
While this panel is being opened, the "Lists" dropdown will not react when clicked. This creates uncertainty in the user as they would not know whether it is them not pressing the touchscreen hard enough or whether it is Twitter not responding.
Step 2 The user clicks the "Lists" dropdown on the right. However, rather than dropdown being displayed, the red "Unfollow" button changes to a green "Following" button.
This odd reaction seems to happen with several links immediately after the user has clicked the "Follow" button. For example had the user chosen to click one of the suggested Twitter accounts not only would the red "Unfollow" button change to a green "Following" button, but the actual "Follow" link associated with the suggested Twitter account would have been underlined (see below image) giving the user the false impression that this particular account is now followed or at least Twitter is reacting to the request.
Step 3 The user clicks the "Lists" dropdown on the right. There is a short delay before the dropdown appears. This is unusual as users will expect a dropdown to show immediately. A user with a physical keyboard will assume the delay is on Twitter's side due to the physical feedback they have received when they pressed the mouse button so will most likely just wait for Twitter to catch up.
But a touchscreen user may think that they did not press the screen hard enough and may keep tapping the screen. Twitter will try honour the repeated tapping by opening and closing the list the same number of times as it has been tapped. This creates further delay with only 50% chance of the dropdown actually showing at the end as every other click will close the dropdown.
Step 4 User clicks the tickbox next to "Eco" and a little progress wheel appears until the tickbox is checked.
Conclusion The lack of correct feedback and timely response makes the new Twitter.com interface problematic for touchscreen users.
So what? Here and now it may be tempting to say "So what?" After all the iPad is relatively new and covers only a minority of web users. However, with an estimated 37.2 million iPads to be sold in 2011 it looks like the iPad is here to stay.
And other companies are joining in for their slice of the pie. Samsung, Dell and Blackberry have already launched their own tablets in anticipation of a surge in interest from mainstream markets and industry watchers expect 100 or more of the portable gadgets to be shown off at this year's Consumer Electronics Show in Las Vegas. Not forgetting the touch screen mobile phones adding another layer of users.
It is time to ask:
How does my website react to the physical world of touchscreen devices?
Robert Fransgaard is a member of Capgemini UK's User Experience and Rapid Design Visualisation team and a self-proclaimed digital native. You can find Robert on Twitter.