new icn messageflickr-free-ic3d pan white
Twitter Short Links Mockup | by remyrakic
Back to photostream

Twitter Short Links Mockup

The expand versions are what we find in the Twitter search UI. The expand buttons (possibly underlined) would be slightly transparent in order to blend in but would have full opacity on mouse hover.

 

However those 2 versions, A & B, only show the information you're looking for when you interact with the expand buttons. This interaction is pure excise.

 

So, the next version, "With Host", adds feedforward on the short link by showing the host it points to. It's only slightly better, but offers reassurance if the host is one you trust and visit frequently.

 

However, in my mind short links are a hindrance to the experience and shouldn't be a focal point in the tweet — the real links are actually more important in the message. The next version, "Inverting the polarity", keeps the feedforward of the previous version, but shows more info and puts the expanded link in the tweet itself. The short link being relegated to the sideline here.

I strongly think the expanded URL shouldn't be shown fully here, the links people shorten are often huge; they would offer little added value (what can you tell from a 150-character link you couldn't from a 100-character one), they'd mess up the layout, etc. So only the first X characters would be shown, say 20 or so as I used here, and an ellipsis if the whole URL was cut off.

 

Continuing in that direction, the last version "Bye-bye short link" removes the obscure short link from the main content altogether.

 

In those last 2 versions, you could add an expand button (yes I originally designed the ellipsis to be this expand button but I feel it'd be a hard-to-hit target, even with more space between the link and the ellipsis) but I don't think we'd need one, for a simple reason. There already exists an interaction for knowing where a link points to: put your mouse over it, and look in the browser's status bar. Of course, just adding this to the other versions (including the one twitter uses) would shed some light on the short link black hole, even though hijacking the status text like this has to take accessibility into consideration.

 

Of course, a tooltip window similar to Chris Messina's www.flickr.com/photos/factoryjoe/4176724903/ could be another direction, however I feel that just using "link" could be seen as giving even less information than the already obscure short link.

It could go really well with the 'Bye-bye short link' design, where the tooltip window would show the original short link url (and who knows maybe also some stats, even though I suppose they're probably only used by a tiny fraction of people)

 

I don't feel the URL expansion being slow is a problem, provided it's done *before* showing the tweet in the timeline. Be it on the twitter.com website or in a client, I believe users have no easy way to tell they received a tweet 30 seconds later than they were "supposed to" (this could be the maximum timeout allowed for the URL expansion to succeed). If the link wasn't already expanded in the tweet (last 2 versions), the summize style expansion would here be immediate.

 

Even though my personal opinion has no value compared to user testing, removing the short link altogether is my favorite :) Those different approaches were sequential in the "making", even though they can be seen as different directions, in my mind they all evolved into removing the short link, and this last version represents my current thoughts on the problem.

 

I'd love to get some feedback, tweet about this using the #shortlink hashtag. You can find me at twitter.com/lqd

719 views
0 faves
2 comments
Taken on December 14, 2009