Toolbars: An Interface Designer’s opinion

Sholom Sandalow, Monday, July 31, 2006 @ 2:45 pm

As a designer, it is very important to me that the software I use provides me access to the functions I need without interfering with the creative process.  Since I use a 15” monitor at work, screen space is always at a premium, which makes it even more critical that the tools in the applications I use are in there when I need them, and gone when I don’t.

Toolbars, Pallets, Panels, whatever they’re called, they are the entities—stationary or floating, separated or attached, minimized or maximized--that give me the access to application functions and object properties that I need to do my job.  So I spent some time in the apps I most frequently use at work-- Microsoft office, Photoshop CS, Illustrator CS, GoLive CS, Flash Mx2004—moving, attaching, snapping, connecting, splitting, minimizing, scaling, customizing, the hell out of these things, to try and get a good idea of how effective each is at making my life as a designer as stress free as possible.  Here’s what I’ve found…

Microsoft Word
The good
The application does a good job of knowing what I need when I need it.  For instance, the formatting toolbar, which appears above the document window by default, contains all the necessary tools I need about 80% of the time.  And the picture toolbar opens when I’ve selected a picture, disappearing when it is deselected.  The object specific toolbars, such as Table, and Picture provide an easy way to edit specific objects quickly without running through menus and submenus repeatedly.

Toolbar icons are self-explanatory. I almost never need to think very long before I understand which button I need to press to perform a specific action. 

The arrows to the right of toolbars with extra functionality present less often used, but still important features in an easy to get to manner.

The customize dialog box allows me to completely reconfigure my toolbars by adding and removing tools.  It even lets me create new toolbars to support my workflow.

The not so good
Each individual toolbar is its own mini window, and the screen can get cluttered if I need many features for a specific task.  The lack of ability to quickly collapse or snap toolbars together is a major limiting factor in the usability of the application.

There are no tool presets—which are saved workspace layouts, so toolbars that have been opened or shifted for one purpose will have to be re-shifted or closed manually, one at a time, to support another task.

Since toolbars are mini windows, I would think to look for them in the ‘Window’ menu.  However they are located in the ‘View’ menu, alongside options for viewing the current document such as rulers and guides.  I’ve been using word for over a decade, and I still trip up on that one.

The verdict
Nice tool set, conceptuality works well, but the screen can get cluttered, and finding some tools is counterintuitive.

Total Score: 5

Photoshop CS
The good
The contextual toolbar docked at the top—added to the interface in version 6.0—makes fine tuning the your selected tool quick and easy.  The palette well can be used to station any number of toolbars in it, so you can move about freely without shoving windows around to make space available.
Individual toolbars, called palettes in Photoshop, can be detached and inserted into any of the toolbar mini windows.  This effortless customizability is a real plus. 

Saving and opening toolbar presets, called Workspaces in Photoshop is also a breeze.  Rather than constantly shifting palettes around, you can save separate workspaces for individual tasks, so, for example, If I’m color correcting, I can save and use a ‘Color Correcting’ workspace, which contains the histogram, color palette, channels and layers opened in separate mini-windows for one click access.  Hen when I need my original workspace I can call it back with one click from the ‘Window’ drop down menu.

The not so good
The palette well does not allow docked pallets to be opened, so access to any of their tools requires an extra click…not a big usability loss, but when you’re involved in a repetitive task, it adds up.
Although mini-windows snap to each other, they cannot be connected; so quickly nudging your entire toolset to grab an errant object on the canvas is not possible.

Mini-windows can and frequently do get hidden behind other mini-windows.  I’ve wasted way too much time looking for the Character palette, which the ‘Window’ menu item says is opened, but I can’t find it, because it’s hiding behind another palette.

The ‘Tools’ palette for some reason refuses to get with the program and become a dockable, attachable, closeable mini-window just like its siblings.  I’m not sure why this is, perhaps Adobe’s user research suggests it works there, but I would rather the enhanced control and customization of the ‘Tools’ palette.

The Verdict
Big strides every release, but there’s still a ways to go.

Total Score: 6.5

Illustrator CS
Insofar as the display and behavior of toolbars are concerned, there are few significant differences between Illustrator and Photoshop, so most of the advantages and disadvantages of the latter apply to the former. 

The good
One small difference between the two apps is the ability to separate tools from the ‘Tools’ palette in illustrator.  This nice little feature enables easier access to all the sub-tools in the palette.

The not so good
However there are two significant features missing from the app.  Neither the Palette well, nor the ability to save workspaces appear in Illustrator.  What the reason is for this, who knows, but at least as of CS 1 Illustrator lags behind Photoshop in this category.   

The verdict
Why the difference between Illustrator and Photoshop?  There’s too much of a lag between the two apps to be acceptable.

Total Score: 4

GoLive CS 2
Although an Adobe product, GoLive’s toolbar look and feel departs quite substantially from that of Photoshop and Illustrator.

The good
There is a tremendous amount of flexibility, and customization capability in this interface.  Almost everything can be moved, removed, attached, docked, resized or closed.

I like the idea that every palette can detach to become its own window, including the tabs that reside in the main site window by default. 

The ‘Tools’ palette can be resized (but only because the palette is now contextual to the editing mode you’re in—itself a useful feature to deal with the complexity inherent in an application of this capacity). 

The toolbar at the top of the interface displays different tool sets for view modes.  For instance, when in site view mode, the toolbar will show site-specific tools.  Opening an html file will cause the toolbar to display a new set of tools related to document editing.

The major departure from Photoshop and Illustrator is that floating mini-windows can be attached by stacking one on top of the other. Thus allowing all attached palettes to be manipulated at once.  Each individual palette can also be minimized using a small min-max triangle at the left of the palette, an elegant solution to the problem of screen real estate that maintains palette grouping, allows quick access to functions, and drastically increases the available space.

The bad
The sheer number of things you can do in Adobe GoLive CS2 makes it difficult to find the function you need at the time you need it.  The application has a very high learning curve for precisely this reason. 
Although you can take apart the site window palette by palette, you cannot attach those palettes to the toolbars.  The interface doesn’t make the distinction between the two types of palettes very clear.

Stacking toolbars is not a very intuitive action in GoLive.  There isn’t enough of a visual queue to let you know that they can be stacked.  You sort of have to discover it by accident.

The verdict
Lots of features, not enough flow.  I still don’t know where to find most tools, and I’ve been working with the application for a year now.

Total Score: 4.5

Flash MX 2004
When working in 4 dimensions, it is critical to be able to view your canvas, as well as have unfettered access to you timeline and key framing functions, so animation workspaces need to be even more sensitive to the screen real estate issue. 

The Good
Flash does a very good job of utilizing the space your monitor provides it with.
The position of the timeline is extensively customizable.  It can be placed alongside the top, left or right of the canvas, and it can be removed as well, becoming a floating mini-window along with the other toolbars.  This configurability keeps me from getting lost in the timeline no matter what type of project I’m working on.

Another useful feature of the interface is that most toolbars can be stacked, minimizing the screen space occupied by tools not in use at the moment.

It is also possible to save workspaces as in Photoshop, making it simple and quick to move between workflows

The not so good
It would be nice to be able to dock the timeline underneath the canvas, but the UI allows docking on only 3 sides-strange, since the timeline in adobe’s other animation application, After Effects, defaults to underneath the canvas.

The verdict
Overall, the Flash toolbars do a great job of giving me what I need when I need it, and getting out of the way otherwise.

Total Score: 7.5   

user experience design

Comments

• Leave a comment
• Comment feed for this post
• TrackBack URL

None so far.

Leave a comment