I gave a talk last week on Navigation in large, complex applications at the UIE Web Master’s Tour (LukeW did a lovely writeup here, if you want an overview), so now I want to pick up the topic a bit more in my writing. Today, I want to showcase a navigation widget that I’ve been seeing quite a bit lately: the Mini Menu Bar, or (for fun) the Minibar. The first time I really noticed the Minibar was in the family of products produced by 37Signals: Basecamp, Highrise, etc. Here’s how it looks (on the top is the Minibar closed and on the bottom, open):
The gist of the thing is quite simple:
- It lets you navigate between the different product offerings from 37Signals (Highrise, Backpack, and Basecamp in this example).
- It provides a link to the Launchpad, which is their cross-application Dashboard, from which you can launch all the different applications and make adjustments to your account.
- If you have more than one Basecamp project, you use the Minibar to pick the project you’d like to use.
Several of our clients have incorporated a Minibar like this as a “module switcher” in their application. The Minibar makes it easy for users to visit different “modules” of their software without being a large, overbearing part of the Navigation System. Since I first saw this at the 37signals site, I’ve noticed it in a number of other places, too. For example, the NY Times uses a Minibar for the “social” part of their site.
The Minibar provides access to a whole other level of functionality, separate from the reading of the NY Times. You can see who is following you, what stories you’ve recommended (to your followers), and also the button to “Recommend” the story you’re currently reading. The NY Times offers a way to hide the Minibar entirely with the close “x” on the right.
Like the NY Times, Amazon uses a Minibar for its sellers, providing access to an extra layer of functionality in the product for Amazon Associates (sellers):
The Minibar on Amazon is presented almost as if it’s a toolbar in the browser. They use a combinations of menus and links to offer features only available to their sellers.
Finally, Facebook has created a Minibar at the top and the bottom of their page. The Minibar at the top:
Their Minibar has replaced all top navigation. It includes the logo, three icon/menus that also update with a badge when there is new information (such as a Friend Request). The search box appears in the same space, as do links for Home and Profile. Finally, there is a menu for Account / Administrative screens.
At the bottom, there’s a cut off Minibar used just for chat:
When closed, it shows how many people are online. When open, you can see who exactly is available to chat, broken down by your groups.
The Minibars that I’ve seen share several important attributes:
- They are small – sometimes no more than 20 pixels high.
- It’s usually visually separated from the rest of the page (NY Times through a shadow, 37signals by using high contrast black), or made to look more like a browser toolbar than a part of the page.
- They can contain menus or links in the form of text or icons.
- Including status information (such as “unread count”) adds to their usefulness.
- They can expand to show more robust functionality right in place (such as the Facebook chat).
- It may include a control to hide or remove the Minibar (as we saw on the NY Times site).
- The Minibar doesn’t need to span the whole screen (as we saw in the Facebook example).
When is a good time to use a Minibar? There are lots of occasions, but here are a few good examples:
- You need a navigation system that is tucked out of the way and less visible to the user.
- You need a “module switcher”.
- You have a secondary set of features that not all users will take advantage of, that you want to offer.
Have you used a Minibar in your application? Care to share a screen shot?
|Category: Navigation, Navigation Pattern||1 comment »|