Help us design the "UI Library Position" feature
Hi everyone. The request to move the UI Library somewhere else comes up again and again. I personally never show the UI Library, relying instead on the much faster Quick Add feature. We realize that Quick Add is an "advanced user" feature, and that everyone hates scrolling horizontally, so we started thinking of what the "UI Library Postion" preference would look like.
I have made a mockup of a possible implementation and would like your feedback on it:
The position would default to "Top", and obviously be remembered on your computer until you change it.
Although the mockup above has the P.I. docked, the "Dock Property Inspector" toggle would default to off (and be disabled if you choose to put the UI Library on top).
Also, the "Dock" option only has effect when the UI Library is visible: if you hide it, the P.I. will float again (of course).
In general I'm not a fan of giving the users these many options to think about, but I realize that we each work with different monitors and in different ways...plus all these options are hidden in a menu you'll likely only open once or twice. The most common operation (hiding or showing the UI Library) is still at the top level, unchanged, with its nice keyboard shortcut.
So what do you guys think?
This is not top priority, but it will also be likely fairly easy to implement, so I'd like to get it done sometimes soon.
I've put the BMML for the mockup above here if you'd like to play around with it: http://dl.getdropbox.com/u/41723/ui_l...
I have made a mockup of a possible implementation and would like your feedback on it:
The position would default to "Top", and obviously be remembered on your computer until you change it.
Although the mockup above has the P.I. docked, the "Dock Property Inspector" toggle would default to off (and be disabled if you choose to put the UI Library on top).
Also, the "Dock" option only has effect when the UI Library is visible: if you hide it, the P.I. will float again (of course).
In general I'm not a fan of giving the users these many options to think about, but I realize that we each work with different monitors and in different ways...plus all these options are hidden in a menu you'll likely only open once or twice. The most common operation (hiding or showing the UI Library) is still at the top level, unchanged, with its nice keyboard shortcut.
So what do you guys think?
This is not top priority, but it will also be likely fairly easy to implement, so I'd like to get it done sometimes soon.
I've put the BMML for the mockup above here if you'd like to play around with it: http://dl.getdropbox.com/u/41723/ui_l...
19
people like this idea
I like this idea!
Tell me when this idea gets some attention.
The more people who like this idea, the more it gets noticed.
The more people who like this idea, the more it gets noticed.
The company implemented this idea.
The best points from the company
-
Hi there! I have now implemented the "Dock Inspector" toggle as well. The menu should really say "Dock Property Inspector When It Makes Sense To Do So", but it was too long. What I'm trying to say is that the inspector will still float around if the UI Library is not visible or if it's positioned at the top of the app.
http://www.balsamiq.com/products/mock... to get it.
I'd really like to get your feedback now that the feature is implemented "to spec". If you like it we'll ship it soon!
I’m happy
The company and 1 other person think
this is one of the best points
-
Hi everyone! So I started working on this feature and I'd like to get your feedback / bug reports on what I have so far.
Screenshots (of the Desktop app but the feature is included in every version)



I like that in the new Left or Right positions you can see 18 controls instead of the 8 of the Top position.
Still missing is the "Dock Property Inspector" toggle, which I'll try to add in the next few days.
Pre-release download link: http://www.balsamiq.com/products/mock...
Let us know what you think after you try it out...I'm curious to hear which position you choose to work with after a couple of days, please report it here! :)
I’m happy to make progress
The company thinks
this is one of the best points
-
Inappropriate?I suggest to think about mouse support in the first step and second about keyboard shortcuts. I myself hate to lean shortcuts to get things running.
Next, there are certain expectations that arise in the past because of successful applications. To select from a scrollable horizontal list is not part of it. Because of this your customers ask again and again. I suggest to follow this demands and your application will end with a better user experience.
Although, your product is still the best in its segment you still have to think about user experience. There are a lot of interesting ideas in it. But, you also violate a lot of user expectations.
The idea to let the horizontal selection be the default is not a good one. If you choose the left side vertical selection for this you follow the market. If you select right side vertical you may be still innovative. You guess it ;-).
Your screenshot is a good suggestion. You may rethink if it is a good idea to try hiding the Property Inspector. This another not fulfilled expectation to me from the early beginning. I still have problems how it behaves. It is easier to use in a fixed place and always seen.
Basically, I suggest to be as flexible as possible. Windows and Mac applications show what this means today.
Maybe this helps a bit. -
Hi rainwebs, thanks for your feedback, but I'm not sure I understand if you like the proposed solution or not. It sounds like selecting "Right" and "Dock" would provide you with what you're looking for?
Re: keeping "top" as default, it's for continuity. But who knows, if everyone seems to choose a different option we might make it the new default in the future. -
Right and docked is ok to me, but left docked I would prefer as default, because I think the most user wil do so, too. -
Have you had a look at the interface of Enterprise Architect? Personally like their interface a lot. Basically, you can have multiple tool dialogs and you can choose where you lay them out. You can stack them on top of each other and control their visibility by a tab. I have seen this format used in a number of other software solutions (Eclipse, Notepad++, forgot others).
Have a look at http://www.sparxsystems.com/products/... for some more information. -
Inappropriate?What about "hiding" the UI library and letting it slide out when the mouse is moved to the right edge of the screen? Would leave more screen estate for the actual workspace, and display the library only when it's needed.
2 people think
this is one of the best points
-
Hi Tobias, that's a good enhancement, which could be added later via a "pin" icon toggle somewhere on the library itself. In other words, I think it doesn't change the current proposed design...would you agree? -
Yes, I agree, the feature I proposed would still be based on the layout you show above. However, you could take it even one step further and remove the library from the screen completely (when not needed), and bring up a nearly full-screen rapid-element-selection-pallette (love the sound of that.. ;) ) whilst holding e.g. the tab-key. Like in this mockup: http://img32.imageshack.us/img32/8635... . Hold Tab, use mouse wheel to select category, click desired item to select, done. Brings the number of necessary mouse clicks and the mouse travel down to minimum. I'm just letting my ideas fly now, but I think that'd add some usability comfort and efficiency to mockups. -
Nice idea, but I wouldn't expect such a behavior. And that's indeed what I ment with my first reply. So I suggest to add the "pin" in any case to get it back to something a user knows or would expected.
We have to keep in mind that everything that can't be understood or recognized in a try-and-error manner will lower the acceptance. Acceptance is more important than the number of features you offer in the long run. -
Inappropriate?Yes, please, what you have there is fantastic. Anything to get away from that horizontal scroller. I don't use Mockups often enough to remember the names of everything I can type in Quick Add. The dock or pin feature would be great too, but just a vertical-scrolling palette would remove probably my greatest source of irritation in Mockups.
-
Hi Troy, glad you like the new design. Regarding Quick Add, I suggest taking a leap of faith and just trying it out! I hope you'll be surprised at how often it can guess what you're trying to add correctly! :) -
I'm sorry Peldi, I'm experienced with it and I still don't think it is useful. I have to use it not to loose time to scroll through the list. But, that's no real solution. The categories that were added later help a bit. But, I still have to think about where the component can be find in which categories. The construct is not efficient, sorry. Maybe for you because you know the keywords to use and have an overview of the components set. I still search for a suitable component, because my context (ICEfaces) has no 1:1 connection to your set.
I suggest that you add some favorite management to your screenshot above so that I can build my own list of components I select from. This would really help. -
Inappropriate?I love it!
One thing: I'm not so sure about having the Quick Add in the same line as the main menu items. The hierarchy does not correspond; and users are not really used to be able to input text at the same level of the File menu item.
Also, I think that the default position of the UI Library and PI should be left (UI Lib. top, and PI bottom). That is because of the logical order in which the user (or myself, LOL) uses the elements:
1. Choose the UI element
2. Edit it
I've downloaded your mockup and adjusted it to my suggestion. I love everything on your mockup! Just re arranged the position of some elements.
I also added a Hide tab (or pin, as I can see you though of!); just because it would be nice to have more space to work on.
Also! I changed my font to Garfield. It is a little big (I'm still trying to find another comic type to use, since I'm just too proud to accept that Comic Sans looks actually good on this. You're a genious for that!) so my mockup looks a little cluttered.
Hope this helps! I'm following you in Twitter. I'm @lalomi
I’m excited!
-
sometimes I like to not have the iphone controls showing can we hide those maybe? -
Selection of categories to work with is also a good idea. Some checkboxes in the settings to manage this? -
Inappropriate?Oh! I' ve also added a search box on the UI library. It took my a while discovering the fabulous Quick Add tool, mostly because it is labeled as search. However, I do think that it could be useful to have a search box in case one does not want to browse all the categories of the lib; BUT displaying the results on the UI lib. area
I'm shutting up now :P -
Inappropriate?I like the idea of a smaller toolbox done just the way you show in your original post. I generally prefer to have the main work area of whatever tool I'm using be on the upper left. The toolbox and properties panel docked on the right suits me just fine. If I had to choose one thing, it would be an option that lets me make the icons about the same size as the toolbar icons and stuff them all i n a single panel.
-
Good idea. More intuitive, less clutter. I still have problems to recognize where a component image starts or ends. -
Inappropriate?I like the idea of a contextual Inspector that either magnetically docks to the side of the main area or can float free. I would suggest also providing at least two standard kinds of list views (thumbnail grid, text list); for those of us who like to keep things grouped, I'd love to see the ability to create and navigate elements by folders / subfolders etc -- if we import new items for instance -- so that would also require a column or tree view as well.
Quick Add is nice, but I also like the idea of an Adobe InDesign / Illustrator-like library-palette of favorite objects that I can just drag and drop from, too.
2 people think
this is one of the best points
-
Inappropriate?Thank you for addressing this issue. I can't wait to see a solution!
Couple things I find as problematic:
The bar takes up too much space
The 3 column layout is too difficult to scan
Maybe one thing that could help is to make the "thumbnails" of the components smaller. I just need to pick out the one that I need, it doesn't need to be real size.
Here is an mock-up. Is there any way it can be a floating window on top of the parent window. Like Photoshop?
-
Thanks Sue, I think we'll only know if the library is too big once we implement it...3 columns are about the same width as the property inspector is today. Try moving it to the top-right to see. -
Inappropriate?Peldi, the editing icons should not be part of the property editor (see your screenshot). The property editor (if you follow the first ideas from the IDE guys in the 1990ties) lists all attributes you can influence for the currently selected component. Improved implementations offer tabs that group according to importants to the current selected context (most important attributes or most changed are shown in the first tab).
-
Inappropriate?I feel that the way it is right now is good, but if the goal is to provide ease of use and speed, it could be added such menus and make them visible and enabled based on preference settings.
I vouch this idea, despite of the ins and outs, you are sure to provide more benefits for non expert users as well.
Cheers,
Ernani
I’m vouching for this.
-
Inappropriate?Here is my mockup, generally based on the functionality available in Enterprise Architect by Sparx Systems

UI design rules
1 A User may add multiple Pallete Collections, anything from 1 to, say 6
2 A User may choose to move individual Palletes between Pallete Collections by dragging the Tab
3 When User chooses to display another pallete (View Menu) add to the first Pallete. User can drag to the Collection they want it
4 ALL Pallete has a Search dialog OR create a new Search Pallete (Add as an option in the View Menu)
5 If Properties is not docked then use current behaviour including floating over Palletes
6 Hide Pallete Collections if a User double clicks on the Vertical Splitter Bar, Double click to open again OR add a new button on the splitter bar to save on Double-Click
Note: Mockup is for 800x600 screen
I’m thankful
-
Whoa gavin, on first look your mockup looks VERY complicated. Not just to implement, but to use as well. Mockups is not a "pro" tool like eclipse and other IDEs, its beauty is in its simplicity. :)
I'll take a deeper look at your bullet-points, thanks for taking the time to mock up your proposal! -
Inappropriate?Personnally I'm in the favor of letting user not many choices... however this is one of the things the user should be able to modify if he wants.
Your first proposal is a good one, Peldi. It'd definitely be an improvment.
What about also a new "tab" called "most commonly used?". I mean, in ALL projects we have to use:
- Dialog/window
- label
- images
- rectangles. -
Yup, we're thinking of adding a "favorites" and a "most used" tabs to the UI Library. -
That's be all I need, really, along with your first proposal above. -
Thanks for the feedback Peldi. I have just gotten this software installed and am learning how to use it. Mocking up the Balsamiq interface was really good practice.
I know this is more complicated but I find it very simple to use. I like that I can have a number of Palletes visible at one time but I do take your point about complexity.
If you want something simpler you could look at how Visio has implemented Stencils. The User can stack a number of Stencils on top of each other, choose which ones are visible, search effectively becomes another Stencil. All nicely docked on the left or right, wherever the User chooses. -
Inappropriate?I think that a single panel is fine. There really aren't that many different types of items (yet!). I would just make them smaller so there is less scrolling. Actually, I think I'm just going to get more used to using the quick search box. I would stay away from lots and lots of user choices unless they are really easy to implement. I've seen too many good apps killed with lots of features added to satisfy smaller and smaller groups of users.
-
Inappropriate?I am neutral between the first proposal and the second (LaLomi's).
Re the third screen shot (Gavin Jolly's) I have used Enterprise Architect in the past, and the first thing I usually did was close a bunch of the windows in order to increase my working space. Likewise, with Eclipse and other IDEs, I like to customize the workspace to reduce the number of windows and just keep the few that remain all grouped on one side of the other. So I agree with the commentators who say you shouldn't give the users too much choice - just a bit more than we have at present!
Re the suggestion to have "fly-out" or "pop-out" panels, which appear when you move the mouse to the edge of the screen, if I get a vote, then it's against them! I find it distracting and annoying when things pop out at me as I move my mouse around my screen (which I'm generally doing for some other purpose than looking for a menu). Please, let the menus stay still and/or wait until I explicitly invoke them. -
Inappropriate?Hi everyone! So I started working on this feature and I'd like to get your feedback / bug reports on what I have so far.
Screenshots (of the Desktop app but the feature is included in every version)



I like that in the new Left or Right positions you can see 18 controls instead of the 8 of the Top position.
Still missing is the "Dock Property Inspector" toggle, which I'll try to add in the next few days.
Pre-release download link: http://www.balsamiq.com/products/mock...
Let us know what you think after you try it out...I'm curious to hear which position you choose to work with after a couple of days, please report it here! :)
I’m happy to make progress
The company thinks
this is one of the best points
-
I just noticed that the screenshots make it look like the UI Library takes up too much space relative to the wireframe area, but know that I had squished the app's window really small in order to take the screenshots. Try it on your own monitor, with the app maximized. -
Another note: the UI Library (when it's on the left or the right) needs to be 3 column wide in order to accommodate the Property Inspector (when it's docked). Try dragging it over the library to see for yourself. -
Inappropriate?Hi there! I have now implemented the "Dock Inspector" toggle as well. The menu should really say "Dock Property Inspector When It Makes Sense To Do So", but it was too long. What I'm trying to say is that the inspector will still float around if the UI Library is not visible or if it's positioned at the top of the app.
http://www.balsamiq.com/products/mock... to get it.
I'd really like to get your feedback now that the feature is implemented "to spec". If you like it we'll ship it soon!
I’m happy
The company and 1 other person think
this is one of the best points
-
I like it!!! This is really helpful for use on a 16:9 monitor (more vertical mockup space). I also like the dock inspector option, as it always kinda bothered me when it was on top of stuff, always found myself moving it around.
Thanks! -
Inappropriate?Hi Peldi,
I like it if only for the avoidance of horizontal scrolling, and the approach you suggest seems really nice to me. While there are many interesting approaches discussed, I started using your product because I liked the simplicity in the UI, and personally dislike a lot of palettes, options, and access methods. I do have two suggestions:
1. don't use a scrolling drop down for the categories when docked left or right and there is vertical room on the screen; having to scroll to get a category is an extra step not necessary when they are laid out horizontally.
2. consider an option (ugh) to let the position of the floating properties palette appear right next to whatever object was just placed wherever it was just placed. I'm always reaching for it and would love it if I knew it would always be right next to the object. It seems a bit more HUD to me.
Thanks as always for involving your customers so intimately in the dev process!
Ben
I’m glad.
-
Hi Ben, point #1, you're TOTALLY right, I'll make the pulldown menu longer so that there's no scrollbar on it.
As for #2, I have experimented with the HUD positioning of the floating palette for a whole month back when Mockups started, maybe a dozen iterations. The algorithm that's there now is the one that was the least annoying, at least IMHO. There are so many edge cases, when the selectiong is very large, when it's all the way to the right (or bottom, or both)...it's a pain. If you can think of a better solution, I'm all ears!
Thanks so much for your feedback! -
Hi Peldi, yes, I've been through that "what do we do with edge cases" process before, and I understand why you settled on the current behavior - much less of a dev hassle and less apt to go wrong. I'm wondering if there is some action that the user could take to "call" the properties over to the current object? For example, as silly as this sounds, 'shaking' an object by wiggling it makes the palette fly over near that object. My desire stems from my use of that giant Apple monitor and reaching for the palette eats up an hour a week :). Right click menu item would be too cumbersome for this I think, and maybe a gesture just isn't doable cross platform, but I thought I would plant that seed to see if you can come up with something. (Maybe if you have a microphone one could whistle and corral the thing :))
thanks,
Ben -
Inappropriate?I like idea of the flexibility, as the position I would choose may depend on the UI I was creating.
Generally I use the Quick Add (love it), but sometimes I just need to browse the catalogue. So I thought 18 on the screen would be better.
I have tried it on the right with this preview, with it normally hidden and using cmd-L to display.
BUT the 3 columns are much harder to scan.
Extra note: As a Mac Book Pro user, I have several times attempted a two fingered left/right swipe, to horizontally scroll in the current Top docked position - which doesn't work (an Air limitation?). This would be my natural instinct. -
Hi Paul, I'm not sure I understand if you like the right-size option or not. What do you suggest we can do in order to fix the scannability issue?
As for the swipe issue, it is indeed an Air limitation, I am confident we will get past it in the future as Air matures and we switch to a more recent version of it. Hang in there! :( -
Inappropriate?i love it, especially the "dock the property panel" feature: i keep losing it usually!
I was naturally looking for an accordeon-type UI to distribute the objects according to their category, but the dropdown list is fine.
I’m happy to be able to reflect on my best piece of software
-
Inappropriate?My two little cents, if I may, :-)
1. It seems that when you dock the property inspector together with the component palette, changing selection on the canvas will cause almost one 3rd of the screen to flash. Either the property inspector goes away or it changes its content. Previously, it was pretty smart and had this fade way and stuff. The component palette was always in place, if visible, so there was less distraction. This is my first impression looking at the new implementation. From all the tools I know that implement the same pattern (Eclipse, IDEA, Outlook, etc. ) none have this behavior. I don't say is not OK, I'm just bringing this up.
2. Another feeling is that the tabs will be confusing down there, under the component gallery. I mean the sense of containment is lost. Again, thinking of existing patterns, with a column on the side and editors in the center, tabs are right above the editors. Quite naturally, I guess.
Anyways, it's just a first impression so I may very well be wrong.
I’m unsure
-
Hi Cristian, thanks for the feedback. Re: #1, I agree that the inspector changing size all the time is jarring. The thing is, what to do about it? I looked at Eclipse, and what they do is either leave a bunch of space empty (when the panel content doesn't make sense) or populate the panel with the content and add a scrollbar to it (yuck!). So while it might not be so jarring, I don't like it so much either. What do you suggest? I could add some tweens and some timers so that things aren't quite so jumpy, but I'm not sure if it would help...I sure don't want to slow people down just to add an animation...anyways, any insight you all have would be good here.
Re #2, I see what you mean. You're right, the UI Library should extend all the way to the bottom, the Tab Bar should "stay with the content". I'll change that right away. -
Inappropriate?Re: #1
You're so right about both the scrollbar and the empty space. I personally find the relatively empty property inspector to be a bit more preferable to the jumpy component palette. But such a decision as for usability testing with users that use the application more often.
I'm sure you'll make the right decision in the end!
I’m confident
-
Inappropriate?Hm... I guess, I stay with the UI library position on top.
But... if I have it left or right for some reason, I'd like to have the property window on top of the UI Library. Now, it just disappears behind the library.
I’m undecided
-
Hi Andi, if you dock the inspector and select left or right placement, the inspector is above the ui library (it pushed it down), is that not what you're describing? -
yes, if I dock the inspector. But if I don't dock:
- the inspector is in front of the UI library on top
- the inspector is behind the UI library left or right -
Ha! got it. that's a bug, the floating inspector should always stay within the mockup area...or at least that's how it worked before...what do you think? -
Define working area... :-)
I think, it should stay above the UI library. -
working area = area where you can draw your mockup = area with the graph paper background.
You'd like to be able to move the floating inspector anywhere on the app, even above the UI Library? That's what I'm seeing right now (all directions). How were you able to make it go behind the UI Library on left or right? Do you have steps? -
Inappropriate?Hi there, quick note: the next build has 2 of the improvements you suggested in it: http://skitch.com/balsamiq/njtj4/libr...
-
Off topic: from time to time, you post images on skitch.com, why not here? -
When I have to annotate a screenshot, I do it in Skitch. Uploading it to their site instead of saving the file then uploading it here saves me a number of clicks. -
Inappropriate?Peldi,
I have looked at the new version and I like it.
- The UI Library docking options are good and I am happy with the behaviour
- The Properties docking option is nice. Perhaps this could have the option to dock at the Top or the Bottom of the Library
- The Borders for the UI Library and Properties are not distinctive enough (for my tastes).
- The Title Bar for the UI Library does not look nice.
The drop-down control borders look odd against the Title Bar borders, and I think the it should be left-aligned in the Title Bar.
Cheers,
Gavin
I’m excited
-
Thanks Gavin, these are good points. Re: docking at the bottom, I tried it and the inspector was always VERY far from the work...all the way to the bottom-left or bottom-right was a long way to travel. -
Inappropriate?Looking better, added a couple notes to your screenshot below. Definitely headed in the right direction, I just feel there is need for some minor tweaking, slight padding in top properties bar and aligning some sections for better visual rhythm.
Thanks for working with users so closely, very excited about the new layout!
I’m excited
-
Just noticed how the aligned filter and centered property options doesn't quite work out the same when the UI Library is on the right hand side... Not sure of a solution, but sounds difficult to make it feel nice when it could be on either side. -
Inappropriate?Hi all, a quick update. After a couple of days of using the new feature we have decided that we're not very happy with how the docked property inspector makes the library "jump around" as it resizes all the time.
We are going to experiment with a new design which basically overlays the inspector over the library instead of pushing it down, we'll see how it goes (we'll report back as soon as we have something worth testing) -
Inappropriate?Hi all! So we changed how the docked behavior works, check it out! http://www.balsamiq.com/products/mock...
We also got rid of the combo-box for filtering and replaced it with buttons, GarageBand-style.
Let us know what you think. We're releasing this today, but we're always open to improvements, you know us! ;)
I’m happy and thankful
-
Looks great - however found a small quirk you guys missed:
If you click and hold on library scroll bar, and keep holding while moving mouse up/down, if your cursor moves away from libarary area while still scrolling (mouse still down), the propery dialog will pop back up.
Seems like an easy fix, just add a mousedown check or flag etc - just though I'd point it out :) -
Looks great - however found a small quirk you guys missed:
If you click and hold on library scroll bar, and keep holding while moving mouse up/down, if your cursor moves away from libarary area while still scrolling (mouse still down), the propery dialog will pop back up.
Seems like an easy fix, just add a mousedown check or flag etc - just though I'd point it out :) -
Good one Jrseney, we'll get to it! -
Inappropriate?Very nice!
But the property window still hides behind the UI library if property window is undocked and the UI library is left or right.
Property window stays on top of the UI library if the library is on top.
I’m still using the old layout
-
This comment was removed on 12/09/09.
see the change log -
The UI library filter concept is very nice! -
Ok, correction to my post above. Property window behaves correctly on Mac and Windows Desktop.
The above problem of the property window hiding behind the library is only in the web application (see http://www.balsamiq.com/products/mock...)
Loading Profile...











