Listr – Usability Demo

I’ve been thinking hard about usability in web applications for the past few days. The number of new web 2.0 sites popping up every week is very high, and I can’t see that slowing down anytime soon. But with rapid development comes a number of drawbacks. Most noticeable is a lack of design, and with that, severe usability problems.

Sites like Plurged, BlinkList, and TailRank flood the user with content and various ways of organizing it, but forget some fundamentals of design.

In order to combat this influx of ugliness I opened up Photoshop and cropped up this:

(Click image for Flickr page and ability to go full resolution.)
Listr - Usable Web 2.0

You can instantly see the difference between this and the previously mentioned sites. For some reason said sites seem to find it necessary to explain what the site is about in big boxes right up top. This is valuable page space that could be used for actual content. TailRank manages this best by telling new visitors “What is TailRank? TailRank finds the best content from thousands of blogs so you don’t have to! Read more” and then linking to an about page. This is simple and effective. Plurge also does this, but that is still quite a big box up top. Listr example also uses bright orange badges to visually separate items of the list as well as showing a user how important they are. The section on the right is for recently submitted items in the list. Normally these items would be stuck at the bottom of the page because they do not have the number of votes necessary to get them to the top, and are hardly ever seen by the casual visitor. But by giving them some initial exposure on the page they have a chance of making it up the ranks where they belong. These are all simple but effective ways of making a list more usable.

Besides being a mockup showing examples of better web 2.0 design, Listr is actually a design prototype of an idea I have been toying around with. Similiar to Listible, Listr (or whatever it could be called) is meant to help people, groups, or the collecetive web come create and update useful link based lists. Using Digg-like voting to raise an items position on the page (though allowing both positive and negative votes), Del.icio.us like bookmarklets for easy posting to any list, the ability to create public or private (for groups or individuals) lists, and other such features would really set it apart from site(s) like Listible which are much more rigid and meant for one thing, creating big usermoderated lists.

(My mockup uses images from around the web, such as from Listible, SongbirdNest, and Digg-like. This is simply a mockup design and these elements are not actually used in any way.)

Advertisements

7 Replies to “Listr – Usability Demo”

  1. The purpose of the explanation in the big box is simply their to explain what the site is for and what makes it unique. No matter how smart you think your audience is there are always new users stumbling in with no idea what’s going on.

  2. You are quite right. I had been planning to change that part of the post and expand on what I meant before, but forgot. Your post reminded me. It is updated above. And don’t worry, I didn’t pick on Plurge just to rag on it. I like the site, otherwise I wouldn’t have known about it. I do this in a contrsuctive manner, and am not meaning to be negative to any site just for the purpose of being negative. Keep up the good work.

  3. “TailRank manages this best by telling new visitors “What is TailRank? TailRank finds the best content from thousands of blogs so you don’t have to! Read more? and then linking to an about page. This is simple and effective.”

    It’s not fun to have to waste this space. We only show this on the splash page when you’re not logged in. Once you authenticate this will of course go away. I might want to cookie this though and not show it at all.

  4. Kevin,

    I noticed that a little while ago. BlinkList does the same thing and the differences are dramatic.

    I think these new information portals need to show the user what the experience will be like when signed up better. When I first saw BlinkList I found it horrible and didn’t sign up for several weeks, and only then it was because someone mentioned that it looks much nicer when you are logged in.

    Sites like Digg and Delicious really show you what you are going to get. Web 2.0 is the only time I have seen sites focus more on their functions and inner user experience than on the initial “first impressions” a visitor gets. Some of the energy in design needs to shift towards the non-user index so they can really grab the first time visitors attention.

  5. Pingback: Craprr » Add an R

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s