Typography of web applications

One of the hardest things about designing web applications is presenting the multitude of types of information that is necessary at any one time. What do you display? What do you leave out? What information is more or less important than other information? If a piece of information is actionable, how do you visually inform the user of that?

Recently Twitter redesigned their interface using a new 2 panel layout where the sidebar dynamically changes, allowing for deeper inspection into the tweets that show up in your timeline. From a design standpoint there are a number of things that are great about this. The proportions (using the golden ratio) are excellent. The metaphor of a slide out panel is excellent. The exprience over “old Twitter” for reading conversation is vastly better.

However, there are 2 things that specifically bug me about the new design:  what I’d call the over stylization of the content and an over abundance of information.

New Twitter conversation view.

This is a conversation in the side panel between two people I know. The first problem is that I think this is too much information. Here is what I see here: close link with icon, 3 tweets in two distinct styles with avatars, usernames, real names, timestamps, API client names and conversation links that link to the same conversation I’m viewing. There is also a user profile, which is in the same style as a tweet except the user’s bio is in italics. There is also links to use the original tweet in all the functions Twitter provides and the panel even goes on to list out other tweets from @bleything, however I have chosen to crop those out. Keeping in mind that my original intention was to view a conversation, and I came upon that conversation by clicking on a link in a original tweet, my goals are fulfilled but I’m also bombarded with more extraneous information than the original conversation contained.

Second, although there are probably less than 1000 characters here, and less than 420 characters of the information I requested when I wanted to view the conversation, there are no less than 12 distinct combinations of font weight, color and size.

Annotating a screen shot of new twitter to show the 12 distinct font styles.

Lets compare this with a “conversation view” from the Echofon Mac desktop app.

Echofon conversation viewI find Echofon’s conversation much easier to read, and if I want more information, such as the API Client used to post the tweet or the user’s bio, I don’t mind digging deeper through the pathways I already know exist in the app. If I like to do something with one of the tweets, hidden controls appear when I mouse over. And even though there are graphics, the UI here is cleaner and only contains 2 text styles.  Literally every piece of information or action provided in the new Twitter conversation is accessible via either 1 mouse click or hover.

Designing applications is always about more than what the app look like. It’s how the app works, what information it presents, and making sure the user can easily and clearly achieve their goals.

Don’t ignore the social web

I recently watched @garyvee’s keynote at Big Omaha. It’s great, and he makes a really great point in it that I’m going to pervert to the next level:

Social networking isn’t social networking, it’s business. The internet has won. TV is dead. Newspapers are really dead.  And the best way to conduct business on the internet is through social networking. (paraphrasing)

You can see it here: http://www.vimeo.com/4671951 (8:30 in)

Now, he goes on to say it’s not actually Twitter or Facebook, but more that you need to start blogging. I totally don’t disagree, but I am going to argue that you can’t ignore Twitter or Facebook.

If you are a content producer, you can’t ignore Twitter or Facebook because they are, by far, the easiest way to get positive viral metrics going for your content. Each retweet, “like” and comment you get is going to spread your content wider and wider via methods as strong or stronger than traditional “word of mouth”. And, frankly, you aren’t handcuffed to google to come back and scrape your content for keywords.

But bigger, if you have any sort of user generated content, ignoring Facebook and Twitter is practically suicide. Both services now have login solutions, which then allow you to post the activity of your users back to the services. This is great for you, since it has the ability to spread your new UGC virally, but your users may also love it because they are probably looking for some sort of recognition of their contributions to your site. If someone “shares” something on your site, they probably want to “share” it somewhere else.

There are 3 keys to doing it “right”.

First, all of your user generated content MUST have a unique url. Without a unique url, you can’t effectively share these actions.

Second, you must ask for permission. If this isn’t obvious, you must have been in a cave when Beacon-gate went down.

Finally, you must provide both primary and secondary participation. So if someone uploads something your service, you must let them share that back to facebook or twitter, and you must give the people that come back to you through the share to contribute directly to what was shared. If they, for example, “upload a video” (primary participation) and you tweet for them about it, then you have to have some way to engage the people coming to see the video (secondary participation). Whether that’s comments, or “likes” or a star rating, you have to engage your new traffic, of they will just bounce. And two thumbs up if you give them a great path to explore your site from  here.

Whether you are producing content or have a service where others produce content, you can’t ignore the social networks. But don’t think of them as competition, think of them as distribution channels for your actions or your users actions. And make sure you engage the interest you gain from them, or it will all go away.