There have been a lot of requests to have a component that provides a toolbar with icons. However after several years this has not been implemented so users have to add it manually. It is not convenient and doesn’t work the way I expect; so I’d like to report my experience and issues in the hopes that either someone can suggest a better way to do it, or a new feature or bug fix could be issued to address the problems.
Originally I had the toolbar on every mockup. It was fairly easy to copy/paste but as the application grew it became unwieldy, especially when I wanted to add new items to the toolbar as it meant I had to update every screen. So I created a symbol, tested it worked and then proceeded to apply it to all my screens. It seemed I had solved my maintenance problem until some time later when I went to add a new item; but the inheritance messed up and now I have to revert every screen to default and apply changes manually again (to almost 50 screens )
This is a snippet of the symbol I am using. There are 3 elements that I customise per page:
- The x coordinate of the blue selection rectangle
- The width of the blue selection rectangle
- The page title
I have a symbol for each of the 4 menu bar selections. The toolbar is a series of Icon + Label components. The intention is that if I add a new toolbar item then all I need to do is go in and move the blue selection rectangle. This isn’t a great experience and ideally i’d want the app to manage the selection for me, but it seemed the best solution available and one that has been recommended in the forums.
However… today I went to add a new toolbar item and this is the result:
What you should be seeing is the App Settings toolbar item was moved to the right, and a new toolbar item was added in it’s position. What you get instead is that the two rightmost buttons didn’t move, so the new item overlaps the existing App Settings one. What this means for me as a user is that I now need to revert all 50 pages to default, manually move the blue selection in the toolbar and set the width, and reapply the page title. All the while knowing that if I have to add a new button in future then I’ll probably have to do this all over again.
So two pieces of feedback:
- A toolbar with icons is a common UI element and important in my mockups to demonstrate how the UI will look and flow. Such a component is part of Balsamiq Mockup itself; without it you can’t even adequately mockup your own product.
- The way symbol overrides work is pretty poor. I had tested adding a new item to the toolbar and had satisfied myself that the way I was using it would allow it to work. However something has caused this to change. It’s not the first time where I’ve had this problem with symbols; you change some aspect of a symbol and expect that only the overridden item would be affected, only to learn that the association to the symbol is essentially broken at that point and if you ever make a change to the symbol then you pretty much need to start again with every instance of it that had any change. Sometimes it works the way you want but most times it doesn’t. Every programmer knows how inheritance should work; you override a specific property or method; this is not how it works in Balsamiq and it creates a lot of work for users.
So before I spend an hour or two fixing all my screens again, can anyone suggest how I can implement the toolbar better so that when I do add a new button in future, I don’t have to do this all over again?
PS Some seemingly viable alternative solutions aren’t possible because of limitations with other components. Such as:
- You can’t use buttons to simulate the toolbar because you can’t alter the icon position
- You can’t use icon + label because you can’t change the background colour to show selection