Getting on Your Users’ Side

By Cody in Information Design, Nice Touch, Usability

The first thing I looked for when I went to Hulu’s page for The Soup was the list of full episodes—someone had told me about a particular episode and I wanted to check it out. Scrolling down the page, though, I found only clips. My immediate reaction to discovering this fact was childish but came directly from my gut: I was pissed off. I wanted to see an episode of The Soup, I wanted to see it now, and now Hulu was standing in my way instead of making it easy for me like watching television online should be. Annoyed, I began to click away elsewhere while silently saying to myself, ‘I don’t care about their licensing predicaments and the intricacies of television broadcast rights—why can’t Hulu just get its act together and get this show so I can watch it?’

But then I noticed the little notice under the show banner.

It says, ‘Full episodes of The Soup are not available for online streaming at this time. We’ll continue to request them on our users’ behalf.‘ With those two little sentences, Hulu completely reversed the snap negative judgment I had hefted on the site. To the user, those sentences make it clear that not only is Hulu aware that this show is missing full episodes, but that they seem just as dissatisfied with the situation as I do. And what’s more, they’re working hard to change the situation.

The wording ‘on our user’s behalf’ is absolutely perfect for the intended effect. It made me feel like Hulu was on my side.

Users are unforgiving, and they’ll blame everything connected to your site on you even when those things are out of your control. So when something is out of your control, show the user you’re on their side. When you can’t give your users everything they want, commiserating goes a long way towards making them happy anyways.

Hulu goes a lot further than simply dumping boilerplate into this notice box. Many shows have descriptions of how many episodes are available for streaming at once, and when new episodes of the show will return if the show is on a hiatus.

Anatomy of a Stylesheet Rule

By Matt in Information Design, Design

We were putting together a CSS style guide for a client and created this image as a quick guide to the anatomy of a stylesheet rule. It’s helpful to have a common vocabulary of terms when talking about something you’re working on, and even more helpful to know they’re the right ones.

Usability on Facebook: The People Take Charge

By Matt in Information Design, User Science, Design, Commentary, Usability

Something is happening on Facebook, but it’s not the sort of thing you’re going to read about on Techmeme. It has to do with usability; specifically, the readability of a collection of comma-separated interests in a person’s profile. Apparently some people think the lists are too close together, and because Facebook doesn’t allow the sort of customization that MySpace does, the users are bending what they can’t break.

For those unaware, one of the default applications that comes “installed” on all Facebook profiles is the “Information” application, which allows the user to list their points of contact as well as their interests, favorite books, movies, and music, and a few other mundane details. Here’s what mine looks like, for reference.

But recently, on a few of my friends’ profiles, I started to notice something different. Here, a friend has separated her massive list of interests with a single dash.

For some, a single dash isn’t enough:

So: users obviously think their interests are hard to read when smushed so close together, right? Or is it just a trend they’re following?

People gussy up their MySpace profiles for a plethora of reasons, none of which we would assume is very practical. I’m sure they’d do the same on Facebook if profiles there were customizable, but it’s interesting to see that this change is one that has to do with usability. The choice and arrangement of applications on one’s profile are one of the most customizable aspects of Facebook, but also prone to increasingly random placement as their number rises on a given profile page. Unlike the placement of applications, this dashes alteration is deliberate. Or is it? I decided to find out. I asked the two friends behind the profiles above about their choice:

Hi! I’m writing up a post for the Sakuzaku blog about something I noticed on your and a few other Facebook profiles. You separate your interests, music, TV shows, etc. with little dashes, like this: [Here I provided an example.]

I find it really interesting that you and a bunch of other people are doing this, and I wanted to ask whether you began doing it yourself or you noticed it somewhere else first? Do you remember where you first saw it, and when? Why, in your own words, do you separate them that way?

I had my replies in only a few hours. C— wrote:

Hiya! Well, actually, I was editing my profile one day and saw that it was a mite long-winded… I wanted to make it look less cluttered and easier to read. A couple of years ago, I had an even longer list of quotations, because Facebook didn’t have as much of a character limit. So, I used a separator at that point too, but it was a long row of stars (the Shift-8 kind). However, with the new character limits, I couldn’t do that anymore. Plus, the areas besides my quote wall were looking kind of cluttered too. So, the dash just seemed like the best solution. It was the first thing I came up with, after I realized I couldn’t do the stars anymore.

Note that she’d been doing it for years, and only recently switched from a row of asterisks to double-dashes because of a character limit.

Coincidentally, the other friend I asked had stopped “dashing” her profile by the time I got around to asking. K— replied:

I actually began doing that on my own when I saw that it was sort of hard to distinguish between what was in what section without a space in between just because of the amount of text I put in there. It doesn’t keep a space between sections if you press enter a few times, except for between the last section and about me. I’m really organized like that, so it was bothering me. I’m not really sure why I changed it back… I think it’s because I started deleting sections and just putting my music and my about me and then gradually added the others again over a short period of time.

Both mentioned, in their own words, that it was about usability: “I wanted to make it look less cluttered and easier to read.” “I saw that it was sort of hard to distinguish between what was in what section without a space in between just because of the amount of text I put in there.” Regardless of whether their desire to separate things visually is driven by a desire to draw more focused attention to their interests, the fact remains that they believe they’re correcting an error in Facebook’s design judgment. This is bolstered by the particularly interesting claim that they each made the decision independently. In a way, they were designing with their “users” in mind: the people consuming their profiles.

The central argument of the piece I published last year, in response to Clay Shirky’s article on A Brief Message about the iPod and MySpace, was that good design is not necessarily arrogance. But there was something else I hinted at: users care about usability, but don’t realize they do. Most people probably aren’t even familiar with the term on a daily basis, but they could probably give you examples of what it means in an applied sense, at least. Thus the popularity of the “beautiful and useful” iPod — it’s popular because it’s pretty and the easiest-to-use MP3 player on the market. They likely can’t tell you that it’s a masterpiece of usability engineering, but they can tell you that they like how it “just works.” Like the iPod, Facebook is a tool that is both usable and popular: A social network done right.

So what does it all mean? I think there are two important and intriguing things to take away from this.

The first is that once users are committed to something (or even, indeed, forced to use it for lack of alternatives), they will change what they think isn’t perfect, to the best of their ability, to adapt the thing to their own standards of usability. Ergo, iPod cases to prevent scratching, and dashes separating big lists of interests in Facebook. (If they can’t change it enough, of course, they’ll leave, if they can.) Secondly, trends in style (especially in technological contexts) inevitably include elements of usability — however unnoticeable they might be to the people participating in the trends.

Sometimes the most fascinating and telling elements of the user experience are found in the smallest of details. Do you agree? Have you seen anything else like this on the Web?

Dollar Signs, Dollar Signs, Dollar Signs!!!

By Matt in Information Design, Constructive Criticism, Usability

We don’t think you should use dollar signs to indicate the price of an eating establishment. It’s too ambiguous and deliberatively uncommunicative to be very useful, and it needlessly conceals one of the most important factors in making a dining decision.

Want some reasons why we think so? Well, here you go:

• There’s no consistency across the myriad websites that have decided to perpetrate this disaster of information design — what should be shorthand always needs to be supplemented with some sort of popup that explains the approximate value range that each group of dollar signs represents.
• The strategy suffers even more when it is out of context. Google search results quite ingeniously display excerpts from each individual page, which are concordanced around your keywords. It is these snippets which guide your decision to click on a page or ignore it as irrelevant. Searching for “greek restaurant honolulu” returns results with useless strings of dollar signs littered everywhere; it’s just not helpful when you’re skimming results looking for grub. You want to know which pages feature Greek restaurants with meals that cost $8–12, not ones with meals that cost two dollar signs.
• The definitions of “cheap” and “expensive” are entirely subjective. A $30 dinner may seem completely reasonable to a working professional, but to a college student, for example, it’s a complete deal breaker. Prices differ significantly in different geographic areas, too.

We’ll pick on Yelp for our constructive criticism this time around, because they sprung to mind (and to the top of our search results page), and because they provide a perfect example.

It’s okay to include a popup to explain how the price strata were established and assigned, but in this case it’s completely unnecessary to enforce that level of indirection — the ambiguous iconography should just be changed to what the symbols represent. (At least, though, Yelp explains what the dollar signs mean — neither Frommer’s nor New York Magazine give even a clue as to what a three–dollar-sign restaurant translates into in real dollars.)

But, this post isn’t really just about dollar signs in restaurant reviews. The general problem here is that the symbols serve very little purpose, except to cloak information and degrade communicative efficacy. The string ‘$30–$50′ takes up precious little more space than ‘$$$$’. Why would you not just include the information itself rather than a placeholder for it? On a map, for example, where information is correlated to coordinates with absolute spatial interpretations, it may very well be prudent to succinctly condense information with symbols. However, a table of results or a restaurant detail page are not maps or graphs — their design should be crafted to expose the information they need to communicate. In these cases we think you should consider very carefully the reasons for employing a scheme that requires further explanation. If you find your interface needs a legend embedded somewhere, that should set off warning bells. There’s usually always room to be clear.