How Twitter Could Lose The Game By Design


image


Do you know how to use the twitter logo? My guess is that you are far from able to navigate the Twitter website in general, and that in particular, you can not explain the why’s and wherefore’s behind the intricate and complex functionality that exists behind the Twitter logo. Don’t feel bad. I have used Twitter daily for years and I still can’t figure out how the Twitter website works either.

image


Even Steve Rubel, THE super-duper-duper-user of Twitter was trying to figure out the most simple aspects of who can see what and unfortunately, I didn’t know. I’ll bet you didn’t know the answers either.

Twitter is totally messed up and I know why. Its due to the interface design. Twitter has been known to have poor retention rates and I would suggest that their biggest problem is that most new users will never figure out how to use it.

Ev and Biz, you guys rock and I love Twitter so I hope you will take this seriously. I know you know this stuff so I’m giving you a D- and will stand-by to see what happens, especially now that Facebook has bought Friendfeed. But I would not let any student get away with this. The Twitter interface design by any academic standard gets an F for being completely incoherent, inconsistent, broken and likely left by the wayside over all these years. Take just the logo, for instance.

Company logos have the main purpose of representing the vision and the brand of a company with aesthetics. There are no rules but there are standards and considerations. The logo is regularly adaptable to various media like business cards and metal plates, and commonly acts as a company’s masthead in the digital form. What more, the logo tends to act as an interface element - a clickable action that leads a user to the website’s home page. One of the first questions any interface designer must ask is, “How does the user get back to the home page from here?” This is so important. It’s of no matter what level they entered in at or how deep they went into the site, the typical web-surfer rightfully expects that there will be a link somewhere to get back home. Aside from a link that simply reads “Home”, in a consistent, global location, surfers take for granted that the company logo will usually be clickable and lead them home. Obviously.

A common stump with the interface design of the logo leads the designer to ask: “Should the logo on the home page be clickable?” In otherwords, if you are already on the home page, why have any links that you can click on that will take you to the same page? There are some compelling reasons either way but I dont want to bore you with petty issues. Typically the details of this kind of discussion and the variability at play are so minor, but in the case of Twitter, as you will see, the problems compound to create complexity in ways that are not only absurd, it leads the user to madness. The convoluted design of Twitter is likely why even the greatest of first adopter experts and day-to-day users alike can’t ever explain how Twitter works. Ahem, back to the logo in particular.

Lets map out this amazing puzzle of how to use the Twitter logo, which is different, depending on who you are, what domain you are on, where you are coming from and a variety of other unexpected variables.

Here is what Twitter calls the home page. I concur. Note we are now looking at http://twitter.com

image

Confused already? Yea, the design is not consistent once you log in, this home page is “new” and it’s just for people who are *not* logged in.

Imagine now that you decide to go Twitter for some reason and for some reason you are not already logged in, and then land on the page above. Since you probably hate AT&T as much as everyone, you notice “AT&T” is a hot topic so you get distracted and click on it. Typical, from start to finish.

image

So now that we are here and see everyone complaining about AT&T (i.e. total non-news), lets get back home. So what’s the obvious first thing to do? Why look for a link that says “home”, of course. But there is no link that says “home”. No worries, most people know enough about what to do and naturally give clicking on the logo a try.

image

Nope. As you can see above, clicking on the Twitter logo didn’t take us back to the home page, but if you look closely, note it did tweak the URL. So now it may seem like we are stuck and thus, even though interface design should not be our problem because we are just users trying to get by, we are going to have to keep thinking about these things to get by. After looking around the page some more, and finding nothing, the very determined user may eventually stop to consider that maybe - just maybe - clicking the logo a second time, will work. What luck. In fact, with Twitter, you gatta click on the logo two times to get home from the search return page, if you are not logged in.

image

It took some work but now that we are back to the assumed home page again, lets login.

image

Once logged in, the home page now changes to a new home page. Remember that page you found that had the AT&T search on it? Forget that home page, now that you are logged in you cant get there any more. To be sure, in the screenshot above, (1) you can note right above the first tweet, the word “Home” which is *not* clickable (2) the word “Home” in the global nav bar at the top right of the page which *is* clickable, (3) the twitter logo itself which is clickable and leads to itself, and wait, there’s more: (4) the word “home” is also now in a right navigation menu and it’s also clickable and leads to itself. This home link has a highlight that appears to reveal the subjective artistic preference of the designer’s extreme taste for subtleness which overshadows the usefulness of the design as an indicator.

Now that we have made it this far, and we are at the new logged-in home where we see the tweets from our friends, lets find our archives to see our own recent tweets. How do you get there? It’s not easy, you’ll have to figure that out. Eventually you will find you must click on your own name. In my case, I must learn not to click on “@andrewbaron” and instead click on “andrewbaron”. The link I need is not in any of the navigation bars, and not apparently a link even but I digress from the topic at hand, the problems just with the logo.

image

Great, as you can see above, I made it to my own tweets without the need for the logo. After a quick scan, I’m now ready to see what my friends are saying again and I’m ready to click…but where? Looking at the above screen shot, which link would you click on to find your friends? You remembered! It was a trick question because there is no link to get there. You must have remembered that in order to see what your friends are saying, you must click on the logo. If that doesn’t make sense to you, it’s because it doesn’t make sense. Though you would assume your friends’ tweets along with your own tweets would both be at the same level of navigation, that is not the case here, don’t ask why. Anyway, dont look now but the right navigation on the above page is mostly missing most of its links too. Yes, the logo, lets move on.

Wait just a second. Have a closer look at the right nav bar. What’s that link that is unique to only this page called “tweets”? Have you ever seen that before? Go ahead and click on that new link. Yep, it’s useless as an interface feature because it leads to itself. But it does have a subtle highlight. Lets move on.

image

The user must also learn how to use the logo from a Twitter subdomain. Consider the Twitter search site which was once Summize and lives happily at search.twitter.com shown above. It’s got the same exact logo so you would expect to click on it to get home. Not the case here. Stuck on the search.twitter subdomain,  there is no longer a home button to get back to the main twitter site, and no familiar navigation so this is your new home, get used to it. Or dont. Now that your brain is really working hard to learn and remember the navigation features, if you are not too warn out and have made it to level 26, as they say, you’ll probably quickly make it to the bottom of the page to find the link you need in the footer, and learn that it’s called “twitter home”, to be distinguished form the particular home that you on right now or any others I guess. Or without guessing, you can find in the HTML code that the home you are on now is called the ‘Twitter Search Home’. So to find out where you are, just go to your browser and depending on the make and model, find something like “show source code” and check the header metadata. Easy!

image

Above is another good example of being locked into a Twitter subdomain with no familiar way out, welcome to the Twitter blog. Note in the screenshot above there is no home link at all, but there is a masthead logo, all-be-it a different logo. This one is clickable and leads back to the main blog where the logo is now NOT clickable. This is inconsistent with the other twitter logo uses on home pages so more red marks. You can get back to the new Twitter home from the word ‘blog’ in the footer (if you make it that far down) or you may notice the “back to the main twitter blog” link that takes you to the “main” page, whatever that means.

Conclusion: WTF?

In all the classes I have ever taken or taught, I have never seen anything so messed up. If a student handed in today’s iteration of Twitter as an example of solid interface design, one that will be effective for millions of users to navigate within the context of the content and aesthetic design at hand, I would have no choice but to say we failed.

Related: Rocketboom Founder Puts His Twitter Account On Sale, Twitter Down Art Collection, The Real Reason Why Friendfeed is Working, The Twitter Global Mind (video written by Andrew Baron), How To Keep Twitter From Crashing in a Crisis

  1. thegoodlige reblogged this from dembot
  2. ronenreblogs reblogged this from dembot and added:
    Catching up on friends, saw this Great post by Andrew Baron over at dembot:
  3. whitneymcn reblogged this from dembot and added:
    Nice post from Andrew Baron. It is fascinating: while I support a relatively organic approach to product design and...