Balsamiq Community Discussion

New Feature: "Panels" UI

On WIN8 the shortcut CTRL+; won’t work for me, which is time-consuming :frowning:

Out of curiosity, where do you position the UI Library in 2.2 (top, left, or right?)

If we were to show both panels at the same time, would it be ok if they were both on the right, side by side (Inspector panel on the left to be closer to the canvas and UI Library on the right)?

We’re looking into fixing it. In the meantime, we added ALT+ENTER as an alternative shortcut, try it out!

1 Like

you are unbelievable. Great product, great team, great company :smile:

3 Likes

On 2.2 the library was up top.

I would be OK with anything that left them both open at the same time (could be tight on laptop i guess). I suppose my thinking on this is skewed by using similar programs for years (remember Visio? stencils on the left, dynamic properties in the toolbar). The Property Inspector really does lend itself to a top toolbar. Each inspector element is small and most are uniform in size. The UI Library really works well expanded out on the side as you have it.

In the end, if you are going to swap panels in a sidebar, swapping between the UI Library and Project Mockups on the left with a persistent inspector on the right would be less disruptive to usage/workflow.
Also, under the headline of not overthinking it, having the library across the top as it was in 2.2 with the inspector on the right, in a proper sidebar, solves the problem everyone had - even when “docked” the inspector got in the way.

Alright everyone. You spoke, we listened!

We changed how panels work, you can test it in 999.944 and later. Now the UI Library is on the top, and both UI Library and Property Inspector can be visible at the same time.

We also made the UI Library a bit smaller and we made it stretch all the way across the app, so that you can see more controls at a time.

It definitely feels a lot more “like Balsamiq Mockups” :smile: - let us know what you think!

Head to http://balsamiq.com/download/next/ to get the new build.

3 Likes

Bad idea… now I have to start my work computer again to test the new layout… ;-(

I like it a lot! Now just swap library and inspector and Bob’s your uncle… :wink:

BOOM!

Looks great and feels like a better Balsamiq! :beer:

3 Likes

I like the new properties panel but have one thought. I would like the possibility to undock it to a separate window, like the developer tools in Chrome.
That way I could arrange the properties on a separate screen while have the workspace on another.

Would it be possible for the Mockups panel on the left to be resizable? The thumbnails are great, but sometimes I find that I want them larger or smaller than they are presented by default.

Another use case is that, when the mockups are presented as a list, I’m unable to read the full name of mockups whose names are longer than the panel is wide. Resizing the panel to read the full name would be helpful. (An alternative is to have the full name appear upon mouseover.)

I see that you added the UI Library back to the top, and made it slightly smaller. It would be nice to be able to resize the height of that panel as needed, just as with the Mockups panel.

Another possibility here is making the panels disappear by resizing them to “0” width or height. It could be easier than finding the appropriate button up on the top of the screen.

Thanks for all the updates, v3 is looking great!

It definitely feels a lot more "like Balsamiq Mockups"
I hate to be the one to disagree here but, for me having the UI library on the top makes it feel LESS like Balsamiq Mockups. In B2, I always chose to put the UI library on the right, as that was more intuitive / familiar to me. (I even mentioned this in a blog post I wrote a few months ago, entitled [How I use Balsamiq Mockups][1]).

I know that hiding / toggling between properties and the UI library on the right was causing some initial difficulty for people, and the properties panel was not always initially discoverable. But I’m not sure that this is the best solution. Or, at least, let’s have the option to position the UI library on the right, if we want?

By the way, I think a better solution to the “discover-ability” of the properties panel may have been to use tabs instead of just icons above the right panel area. @Jenni_Merrifield did a good mockup of that and one person I tested with also independently suggested this. Also, the “i” icon, though used elsewhere to mean properties, is too ambiguous, since it is also widely used to mean “information” and “help”.

1 Like

I like the usability of this change … BUT (here I go again, right?) … personally, I often copy and paste the x,y position values of a control from one mockup to another, throughout a set. This is now going to take a lot of extra clicks.

Why do I copy and paste the position of controls? After several iterations with the client, my mockups evolve until I have a clickable, low-fidelity prototype that I want to test.

I understand that Balsamiq isn’t a rich interaction prototyping tool. But, in order to test my designs with real users, I like to have my linear click-through prototype nice and smooth – not “perfect” just smooth (i.e. not jumpy) in presentation mode. I think there is a subtle difference here.

So I like to have the controls in the same place on each page. But, during the course of iterating, the controls have often moved out of alignment with other pages. And that (apologies for the very long-winded explanation) is why I spend time pasting positions from one mockup to the next.

Mike! Try the new presentation mode, it’s not jumpy any more, regardless of where your controls are on different mockups! Problem solved! (unless our new code is buggy, which is possible of course).

@Peldi Do you mean I no longer have to paste a giant, borderless rectangle into the background of all of my mockups to keep them from being jumpy in presentation mode? If so, cool!!! I just tested this and it seems to work :smile:

Individual controls like checkboxes do seem to move around slightly from one mockup to the other due to my many iterations but I think I just have to learn to live with this and stop being so much of a perfectionist… it will also save me needless effort!

1 Like

Hi

Not sure if this has been mentioned yet or not but I much prefer having the UI library down the left hand side of the screen.

Am I missing something and I’m already able to do this, or can this be added/changed?

Thanks

Andy

1 Like

@Peldi One thing that has always bugged me in B2, and which I now see an opportunity to improve in B3 because of the layout of the properties panel, is that the bg colour and fg colour have no labels. They just have tooltips. I never remember which is which. I regularly make the mistake of choosing the wrong one. I have never managed to memorise this correctly. I actually just made this mistake today.

I think if you just put “BG” beneath one and “FG” beneath the other it would solve the problem for me. I don’t want to have to wait for a tooltip. I think you have the real estate to do this now?

Edit: FG is incorrect. I meant border colour. A “BG” label would be enough for me…

Hey Andy, this is not possible. We’re going to try the fixed positions for now and see how it feels. I often just hide the library completely and use Quick Add, especially now that there are thumbnail previews of the controls. Maybe give that a try?

Hi

First of all, great work on the new Balsamiq version! I was actually looking for another mockup program, as I really needed the project feature - but now I’m staying :wink:

In balsamiq version 2.2 there’s a possibility to choose between e.g. Left, Right, and Bottom, regarding the position of the file browser panel. See image below. I would like the same feature to be available in Balsamiq 3 - and for the other panels aswell. Especially the position of the new inspector panels annoys me. I want it to be positioned on the left side, instead of right, since I only use quick add and the new elements appear on the left side of the screen.

Thanks,

Hi Martin, so glad it’s working well for you. We’re pretty familiar with that feature in 2.2. :wink:

I’ll add your notes to our growing internal discussion, but as of now, we’re not going to have that in Balsamiq 3. Thanks!