Return to Jive Software

Currently Being Moderated
4

Evolution of Clearspace's User Bar

Posted by Bill Lynch on Dec 20, 2006 8:50:08 AM

In Clearspace we have a new UI element on every page we're calling the User Bar (pretty creative name no?). The idea behind it is simple: provide a consistent place to get at a number of useful features. The idea is not new -- many sites have it. Often, it's called "Satellite Nav," meaning it's a set of links that are global to each page. They're fixed and never changed.

 

The User Bar has gone though many changes over the course of development. Initially, it was just an ugly set of links at the top of the page. Now it's a great looking set of links, menus and a search box.

 

!http://jivesoftware.com/blog/wp-content/uploads/2006/12/toolbox.gif!The User Bar actually started off as the "Toolbox" or "Wallet." The idea was to provide one click for anything you might need. For example, after clicking on the "Toolbox" link a new section would slide down and have information about your profile, links to write new content, history, etc. Over time, the major problem we had with this was that it hid a lot of functionality. We wanted users to easily see their avatar, a profile link and other useful links. So, given this the "Toolbox tab" was scrapped.

 

!http://jivesoftware.com/blog/wp-content/uploads/2006/12/toolbox2.gif!Next, the Toolbox turned into a menu item. While the UI was better, this direction still hid a lot of functionality. The biggest reason we decided to not go this route is because it really confused our users. People had wildly different expectations of what a "toolbox" meant.

 

After some serious user testing we decided to make a new bar that acted more like a menu. There would be only a few options to choose from and each one would open up on a mouse click (with a hover effect). Initially each link started out pretty wordy: "New" was "Create Content", "History" was "View History" and "Your Stuff" was "Profile & Tools" (ack!). We spent a lot of time whittling each link down to the fewest words and fewest characters. Now we think we have a pretty useful bar and the links make sense.

 

Here's a shot of what we ended up with:

 

[http://jivesoftware.com/blog/wp-content/uploads/2006/12/bill-user-bar.gif]

Both the user's avatar and username are links to the user's profile. The "New" link opens a small menu to create a new discussion, blog post or document from anywhere in the application. "Your Stuff" is a menu all about you: links to your profile, private messages, your blog, drafts, etc. "History" is a useful way to jump around to content you've recently read. Finally, "Communities" is a way to see and go to different communities in the system.

 

What's not shown is the simple search box -- that's on the right next to an icon to get a printable version of any page.

 

We've been using this and we really like where it's ended up. I used to see a lot of hesitation when people would mouse over a link or the old toolbox -- users generally had no idea what the links would do. Now it's much more obvious and people have responded really well.

 

1,099 Views Tags: clearspace, communities


Add a comment Leave a comment on this blog post.
Aug 14, 2007 5:52 PM Guest John Nilsson  says:

May I ask why you choose "Your stuff" and not "My stuff"?

 

Aug 14, 2007 5:52 PM Guest matt  says:

John,

 

Great question. We actually had an internal vote to decide which way to go. A lot of websites have used "my" in the past, although more seem to be moving to "your", such as Flickr. There's also a good blog entry about this topic:

 

http://detritus.net/steev/mt/archives/000798.html

 

Aug 14, 2007 5:52 PM Guest James Stansell  says:

That's great for people who do a lot of clicking.  I'm wondering if the functions are accessible using the keyboard.

 

Aug 14, 2007 5:52 PM Guest bill  says:

James,

 

I can't promise we'll have keyboard shortcuts for the first release but we'll definitely put those in ASAP. I love keyboard shortcuts.

 

However, browsers can do tricky things. I don't know if you noticed but Firefox 2.0 changed a couple of their shortcuts so a few of the webapps I commonly use got shafted as a result. For example, "Alt S" on windows opens Firefox's history menu item.

 

Cheers,

--Bill