Sorry for the delay, I lost track of this when the list went down.
Summary:
-----------------
I asked for examples of websites using a left-navigation system which
could collapse in, creating more horizontal space, and any studies
relating to the usability of this idea. My initial post was a bit vague,
and I received some responses pertaining to drop-down menus and tree
structures, which I've included below. The general consensus seems to be
that there isn't an example of this system being used in a very usable
way. In most cases, hiding the left-navigation is simple -- making it
obvious to the user how to expand it again isn't.
Two types of methods existed in the sites I saw:
1) Displace the "Expand Nav" link into a horizontal bar. This
necessarily means you're moving the link to expand the navigation into a
different context, making it difficult to find. MSDN is probably the
best example of this style. My opinion is that this is the better
method, if steps are taken to ensure the "expand" link is visible.
MSDN's site uses a very thin band with a small clickable region. I'd
recommend using a 100% width band with the entire band clickable.
Best example:
http://snipurl.com/3t07
(Points to MSDN)
2) Keep the "Expand All" link in the same space as the expanded
navigation set, collapsing the horizontal space as much as possible.
Unfortunately, making this effective involves changing the
type-orientation, making it harder to read. It also minimizes the
effectiveness by keeping some of the left area reserved. In all examples
I saw of this, it was very easy to miss the "expand" link.
Best example:
http://safari.oreilly.com
-----------------
Link Rollup:
-----------------
http://snipurl.com/3t07
(Points to MSDN)
http://safari.oreilly.comhttp://devedge.netscape.com/
(uses browser chrome)
Acrobat6.0 (appslication)
http://4books.hypermart.net/first_break.htmhttp://www.cherokeelink.com/dev/mapZoom.html
www.saga.co.uk
-----------------
Original Post:
-----------------
Hi,
I'm researching the use of collapsible sidebars in web applications. I'm
not sure if there is an 'official' term for this control, but it
basically comprises a persistent-navigation set in a sidebar which can
be expanded and collapsed by the user. Every example I've seen so far
doesn't seem very intuitive - the controls to expand the sidebar are, by
necessity, very small in the 'collapsed' state.
I would like to collect both examples of websites currently using these
controls and any studies regarding their usability, and will of course
summarize my findings to the list.
I'm specifically looking for examples relating to web-applications, as
it seems many of the usability problems with these controls can be
addressed by having a persistent menu (View -> Sidebar) and toolbar,
which isn't generally an option for web-apps.
-----------------
Addendum:
-----------------
First off, thanks for all the responses which have already come in. This
seems to be a topic of interest to many people :)
However, I wasn't completely clear in my original request. I'm looking
for data / examples relating to collapsing/expanding an entire left
sidebar to allow for greater horizontal space - for example, the History
/ Bookmarks / Media sidebar in windows. A good example of this is MSDN's
site (thanks to Michael Holzer for the example):
http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml
/dhtml_node_entry.asp
If the above URL breaks in your email client, try:
http://snipurl.com/3t07
As you can see, the left sidebar has an "x" above the scrollable region.
Clicking this collapses the sidebar and shows a small "show toc" link
above the content. There are a number of reasons this particular example
is unusable (terminology, size, etc), but this is the type of thing I'll
looking for.
-----------------
Responses:
-----------------
Michael Holzer:
Here is a link to the Microsoft dev site that uses the collapsible
sidebar. Once turned off the "Show TOC" button turns it back on. This
would be a good example of not very intuitive.
http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml
/dhtml_node_entry.asp
Mike
David-
Another example is using the side bar in Netscape 7.0+ with the dev edge
site: http://devedge.netscape.com/
This gives you a side bar navigation but actually uses the browser as
opposed to web based code. Does this make sense?
Mike
:::
Hi David Gee,
Collapsing the left side menu is very popular in the web interface now a
days. You can see this being used in many applications, especially in
the enterprise web applications. The justifican of this interaction is
definitely to allow user more horizontal space, without introducing
horizontal scroll.
The most common example of this kind of interaction is "hotmail" and the
web "brousers" themself. Hotmail is using it since long time, but they
have recently modified it to make it more intutive -- they use the icons
"<<" and ">>" to collapse and expand the same. It is nicely done. Check
out yourself. Web Browsers do this all the time -- the buttons "search",
"Favourite" and "media" are toggle buttons to open and collapse similar
interactions.
Hope this will help your search.
Pradyot Rai
Product Development
eBusiness, Fannie Mae
Another good set of examples are - Acrobat6.0 (apps.) and
safari.oreilly.com (web interface)
Pradyot Rai
:::
David,
I see this in many software applications, so I am sure there must be
information out there on any usability done on it. The latest version of
Office uses a version of it for Help in nearly all of the applications.
There is also, of course, the use of the sidebar in IE for Search,
History, and so on. The only place I have seen it used well on the Web
is on MSDN, the developer site for Microsoft.
Mary Deaton
:::
Hi David,
Please find an interesting menu by visiting the following link :-
http://4books.hypermart.net/first_break.htm
Regards
Sanu George
-----------------
Responses (Tree Expand/Collapse or Stacked Panels):
-----------------
David,
I will be usability testing in the next 2 days and one of the things we
will test is users' ability to expand / collapse the left menu (which in
our case will be 2nd and 3rd level navigation). Our new site also uses
+ / - signs before the menu links (a standard imposed on us) and I am
not convinced that users understand + / - concept in a web context (as
opposed to GUI).
I will let you know it goes.
cheers
Tania Lang
Peak Usability
Brisbane, Australia
:::
David-
wish I could provide some usability results, but I'm on the same
question myself right now. I'm overhauling a site and have implemented
controls that sound similar to what you're describing here. It's still
in development mode, but perhaps it might be a good example (?)
http://www.cherokeelink.com/dev/mapZoom.html
Let me know what you find.
Regards,
-Jed
:::
David
We used them on www.saga.co.uk for awhile and encountered a number of
usability problems.
1. Some of the links were expandable, others weren't, but users couldn't
tell in advance which would be which. The designers had included a tiny
arrowhead in the graphic that faced right if the link simply brought up
a new frame and down if the link brough up a collapsible subtree of
other links.
2. The sense of surprise was nothing compared to the irritation
experienced when a user hit a link that brought up a new frame. Users
seem to resent the site invoking a new piece of layoput when they didn't
want that, I suspect it is because the site borrows the users' time to
do it.
3. The ultimate length of the leftnav was unpredictable, depending on
how many subtrees a link had open. As a result, using this as part of a
length-controlled design (as it was) was skewed.
4. Worst of all, many items that existed as sub-links never got seen or
hit. So some of our products that were "hidden" under a general heading
simply couldn't be seen. We had a link called "General Insurance" and
when we gave tasks to users to find a product that was "hidden" in a
collapsible sub-tree underneath that general link-heading, many users
simply couldn't find the product that way and resorted to looking in
different places.
David Unsworth
Head of Consultancy
Saga Services Ltd
Folkestone, UK
-----------------
David Gee
Information Designer
Freemarkets, Inc.
--------------------------------------------------------------
Tip of the Day: Postings must be in plain text
CHI-WEB: www.sigchi.org/web POSTINGS: mailto:[log in to unmask]
MODERATORS: mailto:[log in to unmask]
SUBSCRIPTION CHANGES & FAQ: www.sigchi.org/web/faq.html
--------------------------------------------------------------