6 Comments

Summary:

Once upon a time, there was a UI (User Interface) element almost every application used.  The drawer, (aka NSDrawer) not quite a window, but more than just a view, living in complete codependence to it’s parental window. It always received mixed reviews, and never really evolved.  […]

Once upon a time, there was a UI (User Interface) element almost every application used.  The drawer, (aka NSDrawer) not quite a window, but more than just a view, living in complete codependence to it’s parental window. It always received mixed reviews, and never really evolved.  An oddity in Mac OS, never quite fitting in.  It is one of the only UI elements that isn’t totally customizable.  For instance, I can make a window look like a spinning triangle, but if I attach a drawer to it, it will look like every other drawer. With Leopard approaching, and more Apple apps not using drawers, it is clearly the beginning of the end for the drawer.  That’s not to say that it’s dead, but it will be soon.  

Let’s start with what’s good about it.  The drawer usually worked well for window content that isn’t frequently used.  FTP apps use them for transfer queues or bookmanks, Omni Outliner uses it for document info, iCal uses it for event info. The advantage it has over simply extending the window, in my opinion, is only when the drawer is placed on the left.  In this case, adding content to the left would shift all of the existing content in the window to the right, and moving your point of focus (because we read left to right), whereas extending a drawer out of the left side of the window does not shift your primary focus in the window.  However, in the case where the drawer is on the bottom or right, had the window just been extended, no content would have had to move.  Some would argue that the drawer automatically opening on the side that has the most space is a nice feature. I am not one of those people. More on that next.

What’s wrong with the drawer? Unfortunately, a lot.  At first, the drawer was a pretty neat looking addition to a window, but as windows changed over the years, and the background lines went away, drawers still looked like the 10.0 theme.  The concept of drawers is good, but the design execution is poor.  Assuming you have a window at the size you like, having a drawer pop out of one of the side usually results in the window being larger than you wanted.  More times than I can remember did an application open a drawer off the edge of my screen.  Even more time than that, did the drawer open on the side I didn’t want, forcing me to close the drawer, drag the window to the opposite side of the screen, and then open it again.  Although it’s true that extending the window instead of just opening a drawer doesn’t fix this problem, but there are more elegant designs that avoid this all together.

There isn’t one cookie cutter use for the drawer. Most apps use them in unique ways, and as such, there are quite a few options out there to eliminate that pesky drawer.  If I have a large window (for instance a mail client) and a drawer which can be opened and closed, will the drawer ever be off the screen? If I have a small screen (like a Macbook) or it’s a large window, then the answer is yes.  There are two solutions that are both better than the drawer in this case. First is to simply create a separate panel, that could even attach to the side of the window if necessary. This is useful if the drawer contained something like tools. The second is to just permanently add the contents of the drawer to the window.  This allows the use to adjust the size of the window to the maximum size preferable, without worry of it’s frame growing.  In this case the latter choice is better, because that drawer was almost always open anyway.  Panels should be used for less frequently used content, toolboxes, or miscellaneous information.  Another great solution seems to be the drawer-less drawer. Essentially, just extending the window and adding the content on demand.  The iChat in Leopard (as demoed by Mr. Jobs) does an amazing job at tabs for chats.  The window elegantly expands left (the chat does not move) and adds a tab bar, very similar to Skype, but much more refined.  This is a great solution for windows that are small.

There are a couple apps out there using drawers that are doing a fantastic job, despite the drawer’s limitations, and making them look fresh.  By far my favorite is OmniWeb’s tabs.  Anyone working on a browser (or any app with tabs) should take note. Omni got tabs right.  Despite how great it looks, I would still rather see those tabs in the window, extended on the right (possibly left, but not sure).  Acquisition has done some great stuff with their drawer, to the point where you forget it’s a drawer.  But, to them I ask, why not just go all the way and incorporate it?  The drawer has to be open every time you search anyway?  Are there really that many people wanting to close it? Cyberduck’s bookmarks are well done.  I use this app all day long, and I am glad they added bookmarks in a drawer. One of the few apps where a drawer exactly fits the needs.

Who got it wrong? iCal for one.  Comon guys. It’s very nice that the window readjusts to fit the drawer, but why bother?  There are a couple solutions that would be better.   You could add it just above the calendar on the left.  You could have a HUD-style window (ala iPhoto).  I think even cooler would be a sort of right-click window that would appear over the event, so your focus would never leave the calendar.  I am sure those brilliant Apple designers can come up with something better, but please get rid of the drawer.

The drawer had it’s moment in the sun, and now, I’d really like to see Apple come up with a new UI element to replace it.  Maybe add in the HUD windows, not that it’s stopping any of us developers from making them, but then at least they would be standardized.  Will drawers go away or change in Leopard? Unless they re-theme the whole UI before the release, no.  Will they update the look? Most likely not.  Will they remove it from pretty much every Apple app? Count on it.  With the introduction of CoreAnimation, plan on seeing more window animate in more imaginative ways, and less drawers in all 3rd party apps.  

  1. I use the left drawer in PathFinder to list the running processes. I think it’s nice to have that in the drawer where I don’t use it much, rather than the left panel which shows the Shelf, disks and bookmarks. The right-side drawer can be used as a preview pane, but i just use column view for that and it works good.

    Share
  2. I think that the floating palette in Microsoft Word is fantastic. It can be moved around and becomes partially transparent when it’s not in use. Apple has used the palette as an alternative to the drawer in iCal, and I like that I can move it around and that it disappears when I’m in another application.

    Share
  3. The Drawer in Acquisition has long been gone. The search pane is now integrated in the window.

    Share
  4. Please forgive me for mentioning it, but I’m an English teacher, and I get fed up with this mistake. It’s so common.

    The apostrophe (‘) means that SOMETHING IS MISSING.

    I’m = I am.
    He’s = He is.

    And it’s = it is.

    “to it’s parental window” = to (it is) parental window.

    Its = “belonging to that thing”

    It’s = “IT IS.”

    I realize that this is not a comment on the content of the Blog. I don’t mean to make you wrong, just to correct a simple mistake in an otherwise well-written article.

    Yours sincerely,

    John Davis

    Share
  5. The drawer is one of the UI elements that looked new and clever when introduced in OSX.

    The whole problem about it though, starts by ignoring its existance. When moving or resizing a window around the screen, there is no hint that if your window is too high/wide, the drawer will not have enough space to show up.

    An easy way to overcome this, is to have the application window automatically resize in order to leave enough space for its drawer. This would look like a bad practice though.

    Let’s take a look at the benefits:

    The drawer contains elements that don’t need to be around all the time (if they do, then add them in the main window instead), and it has a “temporary” feeling which remind the user it can be turned off at any time.

    The drawer is attached to the window. They move together and it’s visible as long as the window is visible (if we don’t need all that, we can use a palette window).

    As I can’t think of a replacement for the drawer element, my suggestion is that it should stay, but used only when needed.
    It could temporarily move the application window, or squeeze it in order to fit in, and when it’s gone the main window can get its previous size and position (unless it’s been moved or resized in the meantime).

    Share
  6. cmon guys, please somebody kill the bloody Skype message drawer I have to close everytime I want to chat with somebody… uaaaa

    Share

Comments have been disabled for this post