Change Workspace Layout / Panel Positions (Navigator, Inspector, etc.)


#1

Guys,

I work on full-size desktop UI designs (most of the time) and currently find it quite frustrating that I am unable to change the navigator, inspector and UI library panels as per previous versions of Balsamiq.

For now, I’m forced to work with a ‘fragmented’ view of the project I’m working on; namely, about 70% of the project on my primary screen and 30% on my secondary - primarily due to the navigator panel being fixed to the left of my (primary) screen.

If I were able to change the panel layout so that all of them are fixed to the right of the window, my frustration would be subsided.

Thank you


Please Fix the UI in Balsamiq 3
Is it possible to use 2 screens in Mockup 3?
Move UI Library
#2

Hi @Ulrich_Schroeder, sorry for the trouble. Currently, the panels can’t be moved to different places, but they can all be hidden. And we’ve done a lot of work to help the app be even more usable without then panels than it was before.

If you hide the Navigator on the left, either using the button in the app toolbar, the View menu, or the keyboard shortcut (CMD+J), you will see a few new buttons appear in the app toolbar. These should make it easier to navigate around to different mockups.

If you hide the UI Library, again either with the button in the app toolbar, the View menu, or the keyboard shortcut (CMD+L), you can use Quick Add. You can either click in the search box, or use / to send focus to it and start typing. We’ll show a small thumbnail of the control to help.

For the right panel, we’ve put some of the things you can do in the right-click context menu, such as aligning and distributing. But you’ll probably want to learn the keyboard shortcuts for those panels to quickly hide and show them as needed. For reference, the Inspector toggles with CMD+;, and the Project Info toggles with CMD+..

You can see all the keyboard shortcuts here: http://help.balsamiq.com/keyboard-shortcuts. Hopefully this helps with your frustration a bit!


#3

Thank you for the reply (uh-oh, here comes the wall of text - haha).

With the utmost lack of malice, I have to mention that I’ve come to learn that hiding as many elements as possible - in the persuit of declutterization/minimalism - is not necessarily always good practice. The more you hide, the more effort the user is left with in order to achieve certain goals…especially primary ones.

As with any product, your users will not be exactly the same and will have needs even less so corresponding. I, for instance, like to have as many panels open (Photoshop) as possible - all on my secondary monitor - so that I needn’t navigate to something while I’m working, thus saving a few clicks and ultimately, time. So I can understand that my aforementioned methods may be seen as preferences.

However, I feel that hiding major panels in the UI of software that is intended to be fast and usable is not a viable solution. The way the options for panel-placement worked in Balsamiq 2 was perfect. You could hide them or have them all on one side of the screen (or the other), which allowed me to extend the window across my two monitors, resulting in whatever design I’m working on to have all my primary monitor’s real estate, while the same goes for the panels and my secondary monitor.

Please implement the panel layout options as they were before (while retaining the option of hiding them, as you’ve mentioned in your reply). I find it easier to continue using Balsamiq 2.2.24 for now.

Thank you again for your efforts and a very good product.


#4

(UPDATE) Ben,

I just tried what you suggested in Balsamiq 3 (hiding all the panels).

While fiddling around I noticed that if I have more than thirty-nine mockups in my ‘.bpmr’ file and view them in the ‘Select Mockup’ drop-down list, the rest disappear off-screen and the list does not scroll…which leaves me the only option of closing the drop-down and using ‘CTRL’+‘Page Down’ to get to them.

Apart from the initial ‘added click’ caused by the hidden panels, I am now faced with a further three to four clicks/keyboard commands, depending on the number of mockups my document contains.

If the ‘old’ manner of a right-dockable mockups/files panel is anything to go by, I would have my list of mockups at-a-glance and be able to scroll to those at the bottom of the list, substituting several clicks with one or two turns of my mouse wheel.

Just saying.

ಠ‿ಠ


#5

Fantastic points, @Ulrich_Schroeder. And I really appreciate your thoughtful and kind reply. :smile:

I read back through my reply and realized that I failed to mention that we don’t consider this locked and done forever. We wanted to ship! So we made a decision and went with that in order to get everything else out the door. We have a few things that we have to tackle before we can revisit this, but we are still considering the best way to get this to work. Thanks again for sharing your thoughts!


#6

No problem.

“Minimum Viable Product” an’ all that jazz, eh? Perhaps we as end-users may have benefited from a practice more along the lines of, “Average Viable Product”.

Such jokes, much kid.

I thank you once more.


#7

:slight_smile: Thanks for understanding.

Last point I’ll make here. You referenced Photoshop, and the option you have with the panels there. I totally understand that, but we really don’t want to model our UI after Photoshop, or similarly advanced authoring tools. Part of the key to our success with Balsamiq is that we are trying really hard to keep it simple enough that anyone can jump in and create a mockup.

We have looked more to tools such as Keynote, Pages, and even Powerpoint for design inspiration, particularly around layout. You can’t move around the panels there—they are in the same location every time. It makes for a more consistent, predictable experience.

While I mentioned that we’re not totally closed to this, we are also going to resist adding too many options. :wink: In general, we are more opinionated with our software than many companies, and work hard to pick sensible defaults so that your focus is more on quickly throwing together some wireframes. The quicker you can do that, the less attached you will be to them, the more you will iterate, and the more freely you will throw away your old ideas.

Anyway, just wanted to get a bit more of our philosophy out in the open as part of the conversation. :slight_smile: Thanks again!


#9

Ben (oh no…another wall of text…[facepalm]),

I can appreciate that Balsamiq would like to avoid its UI becoming comparable to a Chinese supermarket. I also do not care too much for Balsamiq’s UI to be modelled after an advanced tool like Photoshop – there’s a giant chasm between those two tools in terms of intent/purpose. I was merely using my use-case of Photoshop’s panels to refer to the subject of being able to see some of those panels (which resemble some of the panels that can be found in Balsamiq) without them impeding on the work at hand (wich is not the case with Balsamiq 3 if you choose to ‘Show’ them instead of hiding them).

I am also much less interested in Balsamiq “adding too many options” or defaults – I would only like to see some of the panel-positioning options that were present in pre- 3 versions of the software*, retained in version 3. That’s all.

Furthermore, I think that trying to emulate the experience of tools like PowerPoint and Keynote is off-target with what most users (mostly designers & UX professionals I’d guess) will be looking for in Balsamiq. Those tools are exclusively meant for composing material for presentational purposes. And while Balsamiq is meant to carry across ideas for software and iron out UI/UX issues easily & rapidly, I am convinced that there are a lot of users/agencies/teams who are using it in more complex contexts and, consequently, deliverables.

For instance, apart from initial concepts, the company I work for uses Balsamiq to create & capture every use-case of every screen in any given project, be it a website, web-app, mobile app, etc.

The software serves this purpose extremely well, due to its ease-of-use, generic element library and among many other points, the way its symbols work.

It has allowed us to do the following with ease:

  • Initially refine our ideas and concepts via BA/UX/research processes,
    discussions and sketches
  • Compose initial layouts in Balsamiq (obviously, in grey-scale, free of excessive use of color and styling)
  • Present them to the client
  • Apply any feedback from the client or test-subjects with ease (due to heavy use of symbols)
  • Get sign-off on those initial layouts
  • Create all instances/use-cases of all screens, helping us create a sort of ‘UI Manual’ for the dev team (still in grey-scale and Balsamiq’s native ‘rough’ styling)
  • …after all that, we create only a few high-fidelity mockups of unique screens in Photoshop for styling reference (CSS/spacing specs are exported for the dev team)

So, as far as I’m concerned, you’re real competition will be closer to tools/services like UXPin (https://www.uxpin.com/), not slideshow-publishing software. Wireframes created in your software have become the bulk of the collateral of any project our company launches.

Lastly, your tool does pretty much what Bohemian Coding’s Sketch 3 does, sans all the asset-exporting and high-fidelity-output capabilities – and truth be told, people (OS X users) could use Sketch for wireframing very easily and then translate the work into polished designs…AND export all their assets/CSS in many different formats.

What I’m getting at is that for us, Balsamiq is more than a tool for briefly assembling a few ideas and you are selling yourself short if you dismiss small requests like mine (not that you have) because of a philosophy that induces the notion that PowerPoint and Keynote need another cousin.

If you’ve made it to this little line of text at the end, I commend you and thank you for reading. I apologize for the colossal wall of text.


#10

:slight_smile: Great points again @Ulrich_Schroeder. I think I confused things with the PowerPoint/Keynote reference. Our goal is not be a tool like them. Rather, our goal is to be as accessible as they are. Many of our users (product managers, entrepreneurs, etc.) are not full-time designers and don’t have time to invest in learning a new tool. But they have often used something like PowerPoint or Keynote.

In our minds, our biggest competition is a whiteboard and a marker. :slight_smile: As we decide on features, we challenge ourselves to think of doing this with a Sharpie on a piece of paper. Obviously we are expanding beyond that, and our goal is to make it much easier to share and edit your work after an initial design session.

Anyway, this has become a much bigger discussion on our philosophy as opposed to responding to your feature request. We’re thrilled that the tool is flexible enough that it has been able to work well for you in so many different areas of your work. This feature is on our list to consider, and we’ll discuss it further internally. Thanks!


#11

Haha, I suppose I’ve created a monster out of this discussion, @ben.

Thank you for considering the feature.


#12

Don’t apologize, you made some great points and you presented it very well (the terminology I understood, that is)


#13

Glad to see that I am in fact not the only one, @Shankar_Bharathan


#14

our biggest competition is a whiteboard and a marker.

Exactly, and one of the great things about a whiteboard is that the markers and eraser do not cover up the white board. You can put them anywhere.

That’s what I’d like to see with Balsamiq. With the UI Library visible, a full 220 pixels of vertical screen real estate (that’s 20% of a 1080P monitor) are taken up by Balsamiq infrastructure. This includes the window title bar, the menu bar, the info bar (which has the same information as the window title bar and tons of empty space), the toolbar, and the UI Library. If there’s anything I’d like to see you take inspiration from, it would a modern browser, which replaces the menu bar with a hamburger menu, and incorporates tabs into the window title bar. I’m not saying you should follow this exactly, but if you could figure out ways to maximize the canvas without altogether hiding Balsamiq’s controls, I think your product would be improved for everyone, not just advanced users.

As for the idea of detachable panels, I could live with them being still attached to the application window but moveable to the left or right. This would allow me to expand the window horizontally so that my canvas is on the main monitor and all side panels are on a secondary monitor. This is what I do with the UI Library in Balsamiq 2.


#15

I agree with @danthman.

My workspace in Photoshop:

…& my workspace in Balsamiq:

And no, I’m not going to hide all the panels in Balsamiq because I do not want to waste time searching/finding properties, symbols or components when I could just have all of them at my disposal from the get-go.

To not simply allow for users to be able to choose their own workspace layout is…weird. An easy-to-use tool, which is not always as easy-to-use, created by people who want other paople to create easy-to-use tools, is an unnecessary paradox.

It has been mentioned that I shouldn’t compare Balsamiq with Photoshop, though I would say that far from it, I’m rather comparing how in both instances you have the paradigm of a workspace with a canvas and tool/property panels - and how the one fails in meeting the basic requirements of allowing its users to choose the layout of said workspace.

If you like working in a clusterphobic space, that’s just dandy. Just don’t force others to follow suit.


#16

Hey thanks for all your efforts to upgrade the product in B3. It really is appreciated :slight_smile:

I have just tried B3, and unfortunately I am going back to B2.
I was mostly upgrading to B3, hoping there would eb a spell checker ( which is still absent )

But after upgrading, I missed the way I could layout the Panels as follows:

PS: Every developer / BA / designer I know has 2 monitors…

Here’s hoping you bring back the Panel Positioning :wink:

Thanks


#17

I would like to throw in my 2 cents on this post:

How about just making the 3 panels float?

That way we could put them anywhere we want; allow them to hover or dock them where we want, stack them on top of one another. Kind of how Visual Studio does it with their dozens of panels.

Mike P.


#18

Not a bad idea. I can see the benefit of taking advantage of multiple displays.

Let’s revisit this after we ship the native versions of the app.


#19

Please also consider making slightly better use of the top panel, the name of the project takes up space I’d rather be using the pixels for my mockup. Could you combine with the buttons and or remove it entirely? It’s shown above in the window description, at least it is on a Mac so isn’t really needed again.

Thanks
rich


#20

Yep, another good one. We will see what we can do, Rich. Thanks for the idea!