One of the things I love about being involved in a large open source project, like DotNetNuke, is the opportunity to work with people who love what they do and who work like lunatics to get things right. I learn a lot working with the rest of the members of the blog team. While chatting via email with Rip Rowan a few months back regarding changes to the new comment interface for the blog module, I realized that some of the interface elements we'd added had a low value to screen space ratio, or V/SS ratio for short, and I realized that I was using this very subjective metric to determine whether or not we should include interface elements.
Here's the story in pictures. We started with this interface. Our goal was to allow people commenting on a blog entry to make use of Gravatar1 support for images, and here's where we started.
Yes, I know, too busy. It had a postback and the V/SS ratio for the links under the email textbox was way too low. In fact, as other team members pointed out, these links were actually confusing.
Rip took the ball and ran with it, coming up with this much more intuitive interface.
As much as we were able to improve the interface, there was still a nagging feeling that more could be done to simplify the design. The more we looked at the design, the more we realized that less was still more. What was the value being added by the checkbox which said Show my Gravatar1? It was a nice thought, but the value, when you consider what it is that most people are trying to achieve when they fill out a comment form, was too low.
Here's our final version, which you can see is much cleaner.
Finally, I should say that while I am occasionally prone to delusions of grandeur, I recognize that I am not trained as an expert in usability, and I know that there are many great principles in this discipline of which I am not aware and probably never will be. But I write this post to encourage developers and architects out there to consider asking this simple question of every element included in a proposed interface. What is it's value in relationship to the screen real estate it will consume? The great thing about thinking in terms of value is that it is broad enough to cover a variety of important usability concerns, like is it intuitive? If its not immediately clear to your testers or pilot users, you'll know. You'll get questions like, what's the purpose of this link or that widget? That's should raise a red flag that your V/SS ratio may be too low for this aspect of the interface. If it is, you have several options:
- Use a different visual metaphor - In some cases, the value is too low for your problem child interface element because you've chosen the wrong visual metaphor for interacting with the user.
- Use progressive disclosure - It may be that the confusing elements on your page are only needed by a small percentage of your users. If this is the case, then use progressive disclosure to tuck these elements away under an advanced tab or an options button.
- Hire a graphic designer - The use of white space, images and placement of controls on the page is something a good graphic designer will feel intuitively. By and large, this is not something a developer will feel intuitively. OK, that's probably not right. Developers will often have very strong feelings about their choice of layout, but in the end you'll end up with something other developers like to use, and not end users. By the way, there are developers who double as designers, but they're rare. I would say Rip is one of those.
- Toss it - This is hard. You or your developers have invested time and energy into this piece of the UI and someone probably feels some level of attachment or ownership related to this little piece; but in the end, if the V/SS ratio isn't high enough for an element within the interface and you've tried the approaches listed above, you should just select the offending region and hit the delete button. In this case, less is more.
What do you think? How do you go about making these kinds of interface decisions? Do you have metrics that you apply while trying to shoot for the stars when designing or managing the UX for your application?
1
What is a Gravatar? Well, that's probably another post entirely because I think there's a lot of potential with the idea of Gravatars when it comes to solving the whole identity problem. I think people have strayed away from other identity solutions that do too much, track too much information. The great thing about Gravatar is that it's incredibly simple and all they track is my email address, which I use as an identifier and one or more unique images that I can associate with my email address (or email addresses, since their interface allows you to keep track of multiple email accounts). Gravatar started as a way to manage identity in comments you leave on blogs, but I think you'll see people begin to use Gravatars everywhere as a nice, simple way to manage identity. The image to the left is my Gravatar image associated with my work email address and the image to the right is associated with my personal email address.
Sure, there are some risks. Anyone can use my email address (if they know it) to pose as me in the comments of someone else's blog. All they need to know is my email address. But for the purpose that it serves, to provide a simple and easy way to manage a global, visual identity that follows me throughout my Web 2.0 world, it works great. There you go, a post within a post!