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.

Minimalism & The Simplest Thing That Could Possibly Work

One of the core tenants of Agile/XP/TDD/Getting Real/Lean (etc) is doing the simplest thing that could possibly work. TDD says you should write a test and then only write enough code to make it pass. Lean says you should think about “minimal marketable features”. Paul Graham says you should launch just as soon as you have 1 feature that anyone would care about (here and here). Why is this so important? The fact of the matter is that 80% of your users use 20% of your app. That is to say, most people don’t care about most of what you have built. So why build it?

It turns out it’s really hard to know what people want before you make it. There are certainly ways to mitigate it, user observation testing, paper prototyping, but sometimes these things end up taking more time than just doing the simplest thing that could possibly work. In the end, you just need to build it, get it out there and see if anyone cares.

Well, the other side of this coin is that it’s also really hard to limit yourself to doing the simplest thing that could possibly work. You have to say “no” to many things and many people, including yourself, and people just aren’t good at that. No one wants to be the guy that always “puts down others ideas”.

Helvetification

Helvetireader

I’m very happy to be seeing a new trend in web apps, minimalism. I can only hope, that it continues to pervade all corners of software, both web based and desktop based. The tip of the spear seems to be the “helvetification” of popular apps. Some examples:

So what is so interesting about some new skins for some web apps? Is it just that I really like Helvetica? Well, I do like Helvetica, but the really interesting thing about these skins is not that they change the fonts and colors, it’s that they actually hide or remove significant parts of the apps. I’ve been using Helvetireader for probably over a year now, and I can’t stand to use google reader without it. I *hate* what GReader has become. It’s got tons of stuff I could care less about (probably say, 80% of it’s functionality). Starred Items? I use delicious. Trends? Really? And my favorite “Browse for stuff”. Uh, what? Isn’t that what using the internet is? What if Google Reader was the simplest thing that could possibly work? I think it would look like Helvetireader.

But Wait, There’s more!

So how does a couple skins for a couple web apps me that this is a trend? Well my friends, I didn’t think it did until I saw this:

lite.facebook.com

What is this? It looks like facebook, but they’ve gotten rid of all the crap I don’t care about. Lite.Facebook.com is supposed to be a version for “low bandwidth users”, but boy it sure does look like a minimal version of Facebook to me, and I like it. Compare it to say, myspace, and we’re talking Donald Judd levels of minimalism. And have you seen an Amazon Kindle? What about Readability from Arc90 (which happens to be really popular)? All of a sudden, we’re starting to get into trend categories, and I haven’t even mentioned how minimalism is the entire strategy of Apple, 37Signals, Twitter, and Tumblr.

But Features Are Good!

Gist Dashboard

Well, features can be good, but they can also be terrible. Recently, an interesting sounding website called “Gist” launched. What does Gist do? “Gist is designed to help the professional email user who often opens up their inbox only to feel like it’s helplessly out of control” (via ReadWriteWeb).  When I think of designing a site that is supposed to “take control” of something which is in chaos, I think of clean, minimal, organization. I would think that this tool would help me get to inbox zero, where there’s nothing in my email inbox but whitespace and the freedom to actually get my work done. So when I see screen shots like the one to the right, I can’t but help to think, “Is this really the simplest thing that could possibly work?”  This is a site that’s coming out of beta today. Not something that has been around for a decade. How would anyone know where to look, or what any of those boxes do?

Minimalism != the simplest thing that could possibly work

I could give you a bunch of definitions from famous artists and architects about minimalism, but I’m going to just say that minimalism isn’t the simplest thing that could possibly work, it’s when you optimize tsttcpw. The important point here is that it’s important here is that if you do more than tsttcpw, then you’re much less likely to rip out the parts that no one cares about. And I hope it’s apparent that, people want you to remove this crap. They don’t want more features, they want better experiences. They want that 20% of your application to be 100% of your focus, and they want the 20% to get better, not slowly become 18%, then 12%, then 10% because you keep adding crap they don’t care about. Minimalism, whether it’s in design, or any thing else, is taking that 20% and making it 100%.

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.