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.