Capping IT Off

Capping IT Off

Why I prefer the old

Category : User Experience

rf-jan2011-pssst.jpg In September 2010 Twitter began rolling out a new interface for the browser version of 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 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 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 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, more often than not triggered by Twitter email alerts about new followers or new messages. Clicking the links within these emails opens 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

New vs Old: The interfaces in details So 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 interfaces compare to each other.

Load time The first difference between the two interfaces is clear when browsing using mobile 3G Internet connection: The new interface loads slower.

But even on WIFI/Broadband the new 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. rf-jan2011-step-by-step.jpg The old interface seems to show everything as fast as the new one only shows the first step. Round 1 goes to the old 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. rf-jan2011-streams.jpg Physical user behaviour But the one thing that made me abandon the new 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 and add it to their Twitter list named "Eco" using the old interface with their iPad.

Step 1

The user clicks the "Follow" button on the left. Twitter returns instant feedback with a bubble saying "Follow CapgeminiGreen".

rf-jan2011-userjourneyold-700-01.jpg 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.

rf-jan2011-userjourneyold-700-02.jpg Step 3 The user clicks "Lists" dropdown on the right. Twitter returns instant feedback with a bubble saying: "Manage lists in which CapgeminiGreen appears".

rf-jan2011-userjourneyold-700-03.jpg Step 4 The user clicks again and receives a dropdown listing their own Twitter lists.

rf-jan2011-userjourneyold-700-04.jpg Step 5 User clicks the tickbox next to "Eco" and a little progress wheel appears until the tickbox is checked.

rf-jan2011-userjourneyold-700-05.jpg Conclusion

The task is completed using the old 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 interface.

Scenario 2: Adding @CapgeminiGreen to a Twitter list using the new interface A user wants to follow and add it to their Twitter list named "Eco" using the new 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.

rf-jan2011-userjourneynew-700-01.jpg 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.

rf-jan2011-userjourneynew-700-02.jpg 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.

rf-jan2011-userjourneynew-700-03.jpg Step 4 User clicks the tickbox next to "Eco" and a little progress wheel appears until the tickbox is checked.

rf-jan2011-userjourneynew-700-04.jpg Conclusion The lack of correct feedback and timely response makes the new 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.


About the author

Leave a comment

Your email address will not be published. Required fields are marked *.