Balsamiq Community Discussion

Toolbar with Icons

Hi,

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 :angry:)

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

image

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:

image

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

Regards,
Hamilton

I just confirmed that Wireframes to Go doesn’t fix any of these problems.

  • Still no toolbar component
  • Still can’t change icon position on buttons
  • Still can’t set background for icon + label
  • Overridden symbols still break

I’d upgrade if it would fix my problem but TBH I can’t see any new features of value in this ‘major upgrade’. So still living in hope that the community can offer a viable workaround.

Hey @Hamilton,

I’m really sorry for the frustration this has been causing you, but I really appreciate you taking the time to break it down for us. I’ll address the issues separately, and then we can discuss them.

  1. Symbols: What you’re experiencing sounds like a bug. Symbols with overridden properties should still inherit any changes made to properties that are not overridden. There are caveats to this, but it sounds like it’s a common occurance in your situation, and I’d love to figure out what’s going on. If it’s possible, can you send me your project so that I can see what’s going on here?

  2. Toolbars are hard because, while common, they come in all sorts of shapes, sizes, and requirements. That’s why our prebuilt one is very generic - like our graphs. It’s supposed to say “There will be a toolbar here.” If you need more than that, it’s easiest to just build your own (as you have done). Ideally, I think we’d love to have a complex WYSIWYG toolbar with a bunch of options, but it’s hard to cover all scenarios and needs with a fixed control.

  3. I will definitely file the position issue with the button + icon. Being able to put it before or after the text would be helpful.

  4. I think we solve the issue with icon + label if we allow the button control to reposition the icon. With that said, you can add a background color to any control by overlaying a semi-transparent rectangle on top of the icon + label. Change the color of the rectangle, and it will appear as though your icon + label has a colored background.

Let me know if I missed anything, my friend. I’d be happy to discuss any of these points further. Also, if you can send me your project, I can dig into why your symbols’ overridden properties are messing up the inheritance from the master symbol.

Thanks again for the post, Hamilton. I look forward to chatting!

Hi Brendan,

Thanks for the fast and gracious response, much appreciated!

  1. Will do
  2. Understood. However, just adding an array of images to a menu bar or similar would be sufficient for the majority of cases.
  3. Great, this would be a good enhancement and would be a better solution that is currently possible to simulate a toolbar
  4. Being able to set the background colour for an Icon + Label would be better as it would cause the selection to size based on the content rather than being manually sized for each element. I’m aware that you can use a rectangle for the selection - it is what I’m doing for my toolbar - and it’s what I suspect has broken the inheritence

Again, thanks for the reply. The tone and level of detail was perfect - you’re very good at this!

Regards,
Hamilton

Thanks, @Hamilton. :slight_smile:

I have your email! I will run some tests later today and get back to you. I am also going to write up a story for background color on the icon + label control. I don’t know if that is what is breaking inheritance, but I will find out. :slight_smile:

I’ll be in touch via email later today.