Animation with a vertical Toolbar?

Question

We have a web mapping application (Flex), that our clients can use from anywhere between 10min to 5hrs a day.

It is simulating a desktop application (think similar to Photoshop) and users select from a wide range of tools from one horizontal toolbar.

Usability testing shows that the large number of tools can make it hard to pick out the tool they need. Therefore we have been discussing and mocking up some more intelligent toolbar behaviour.

• One vertical 'toolbar' which lets you choose a toolset.
• This populates the parallel sidebar with the tools within that toolset.
• These tools are actually in a priority order based on which ones we know they use the most (these ones being at the top)

The bit that I am struggling with is showing what toolset is highlighted.
From the above mockup, I envisioned that when you selected a toolset from the toolbar:

• It would fade out and fade in at the top (in the circle)
• This would leave a gap in the toolbar, so the icons below the gap would move up.

Animation is a tricky one - as it needs to be subtle and quick, and not gimicky and slow down user workflows.

Before this mockup, we were looking at just highlighting the selected icon and having the text at the top change with no icon next to the text - such as with Wordpress:

However, I feel that if we can get it right, some subtle animation with the previous mockup would enhance the UX of using our application?

Q. For my scenario, would making use of animation be a good choice for the toolbar? Has anyone seen similar examples on the web that are a good example to mimic?

NB: Dont pay too much attention to the iconset. Some have lighter backgrounds in the mockup which looks confusing, but ignore this.

Answer 1

I think an accordion works as I assume its enabled by the arrow either on user click or hover so it doesn't take up too much resolution? But as you've got concerns, I would simply have two sets of icons one for the selected state and one almost looking disabled and stack them on a fixed vertical bar where the icons do not move order when selected. I suppose there is nothing wrong with offering a configuration setting to override their order if the user want's the 'Save' (represented by the cloud in my mockup) near the top.

The subsequent action of clicking on the icon generates a layer with the available actions on. Similar to the Adobe Acrobat toolbar you see when viewing a PDF in the browser.

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 2

If you're going to move the selected icon to the top, then yes, using an animation would be a good way to indicate the change.

However I don't think moving the icon is a very good idea - it would mean that the position of icons in the toolbar keeps changing, reducing the memorability of the toolbar. I would have to keep moving my mouse cursor to the toolbar and scanning for the position of the icon I want, rather than being able to just remember the general area it's in. This would reduce intuitiveness.

Wordpress has a good approach because the navigation is static, allowing you to remember where frequently used controls are placed. I don't see any downsides with their approach other than the fact that sub-items associated with each tool would be displayed in a list potentially starting higher up on the screen.

This is something you should test. Create a simple mockup in HTML that allows a user to use the toolbar using the animations you determine (use jQuery or something so you don't have to spend too much time on it). Then grab someone in the hallway and ask them to interact with the app and watch what they do.

Answer 3

One way you can do it while having labels and not sacrificing space is by using the accordion pattern. I hadn't thought of that when I answered the question but now it strikes me as a particularly appropriate solution to your problem

In response to Rahul's comment, I put together some mockups to answer my own Q to see if an accordion was a good alternative:

Unless I am missing something, but it is sacrificing space when compared to my original mockup, and therefore although I am not ruling out this as a viable answer, I believe in its current design, it is not a suitable answer.

With our clients having potentially less than average screen resolutions, we need to ensure that we make best use of space in the sidebar. It has the potential to have lots of items in the actual sidebar for toolsets like edit and select.