2008-10-07

Easier Access to Sidebars

Alex Faaborg suggested to me a few weeks ago that there should be an easier way to open and close Snowl's stream view sidebar, like a button that toggles it open and closed.

That got me thinking that the same is true for other sidebars, as the View > Sidebar menu seems like a relatively obscure and cumbersome way to access them. My inclination was to place a permanent interface on the left-hand side of the browser window, right where sidebars appear, that would be contextual, discoverable, and easily accessible.

Tabs seemed to fit these requirements and are consistent with Firefox's "one sidebar open at a time" behavior, so, with some helpful input from Dan Mills on how similar interfaces in other applications have behaved, I cooked up an experimental extension that implements a column of vertical tabs representing sidebars down the left-hand side of the browser window.

Dragging a tab to the right opens the corresponding sidebar, while dragging it back to the left closes it. Dragging also lets you set the sidebar width. Or open a sidebar to its previous width by simply clicking its tab (clicking again toggles it closed).

The extension supports both built-in sidebars (Bookmarks, History) and those provided by extensions, as long as the extensions use the standard machinery for defining their sidebars. And it extends that machinery with support for tab icons: just set the image attribute on your tag to the URL of the icon.

It uses the new -moz-transform CSS property to orient text vertically on the tabs (and a bit of the new drag-drop API to start the drag operation) so it only works on recent nightlies. And it's a prototype, so there's still some wonkiness in its appearance and behavior.

Check it out in the AMO sandbox, and let me know what you think. (Also note the All-in-One Sidebar, another take on the same concept.)

6 comments:

Blair McBride said...

Definitely a step in the right direction in terms of usability and discoverablilty. Although I can't help but wonder if the readability of the text would benefit from being rotated counter-clockwise instead of clockwise, since its on the left side of the screen. The rotated text would flow better with the rest of the text on the screen then. Its probably more common to rotate clockwise, but such extreme rotations are never easy to read/recognise - so every small improvement that lessens cognitive friction is a big gain.

Sheppy said...

This is pretty cool. I do have a couple of suggestions, which probably aren't surprising ones: Put close buttons on each sidebar's tab, and maybe make the tabs a little narrower horizontally. I'd like the tabs to be as inobtrusive as possible. I don't normally like sidebars, but if they can be made popout like this and be really inobtrusive while not popped out, I could get into that.

Dan said...

blair,

There's an argument to be made for keeping them the way they are now: Think of stacked, labeled, manila folders arranged on the left edge so you could pull them in to look at their content. The labels would be rotated clockwise from normal text.

Of course, the trick is to make them actually look and feel like folders. That's one reason why they can be dragged open.

James said...

I was going to say "don't forget about F9" but it seems that's a SeaMonkey feature only.

AndyEd said...

Blair, you are correct. The data on readability for 90deg rotated text is very bad.

While less aesthetic from a visual grid perspective, stacked horizontal letters are much more readable.

Brian said...

I like it, but the state of sidebars is not maintained when switching between them. Though it is not the fault of the extension, it does imply that things remain unchanged as the sidebar stays open between switching. I think the loss of state in general when switching between sidebars is a fundamental flaw of the current Firefox implementation.