Weekly Release: Big UI Library Improvements

We finally had some time to tackle one of the big features that many of you have been asking for, the "UI Library Position" feature.

As usual, it was a true group effort, just look at all the great ideas that were shared on this long GetSatisfaction thread about it! Rainwebs, Gaving Jolly, Tobias Tappel, Troy King, Lalomi, Thomas Schaaf, RedMike, A.J.Kandy, Sue Anderson, DJ EJ, Regis, Alanc, jrseney, Ben Kopf, Paul Muston, applennevaux, Cristian Pascu and Andi, we thank thee! 🙂

We truly are blessed to be part of the user community that has formed around Mockups, you guys are the best, we're so glad to be helping YOU make this app better and better. 🙂

OK so I recorded a little 4-minute screencast of the new features:

In short:

You can now place the UI Library on the right or on the left of your screen (not just on top like before). The position you choose will be remembered across restarts.

You can now dock the Property Inspector (only when the UI Library is on the left or the right).

You can now combine filters for the UI Library controls that are shown in the UI Library.

The filters are remembered across restarts.

We are happy with the changes, and hope you will be too! 🙂

Let us know what you think, especially after using it for a while.

This feature is available on all versions of Mockups.

What else is new?

We improved how some of the geometric shape controls look when you stretch them out. Thanks Andi for bringing this up!

We improved the look of the app's scrollbars a little (they look less flex-like)

We increased the size of the font size combobox pulldown so that you no longer have to scroll. Thank you Tobias for reporting it
Also don't forget that you can use CTRL+= and CTRL+- (or APPLE+= and APPLE+-) to resize the text incrementally without using the mouse at all. Also CTRL+0 to get back to the default size.

You can now disable text throughout the app by using -this notation-, just like *this* will make something bold, [this] will make it a link and _this_ will make it underlined. Thanks to Mark Henderson for requesting it and to Erika Cooper, Andi and applennevaux for convincing me to do it! 🙂

What else is cooking?

Well, we continue to be focused on improving the web app, which I'd say is almost screencast-ready. Please do not email us asking to be in the beta, we are not accepting new members at the moment. Just stay tuned here for when we decide to open it up again or go live with it! 🙂

Aside from the web app and customer support, we are working on 3 exciting and highly-requested features:

These are not easy features, so don't expect them all next week, but know that we're actively working on them. I'm sure we'll need your help in order to make them as good as they can be, so stay tuned here and on Twitter!

Comments (6)

Although, the selection of columns to show should be flexible. User expectation is one column (this should be the default). Even better would be a dynamic behavior that allows to change the width of the library so that the app calculates the possible number of colums on the fly. This would allow to have a look at more components in parallel if the screen is wide enough.

The inspector is still a problem child. Good: it is dockable. Bad: I found only a menu entry to make it dockable. User expectation is to do this through moving the inspector to a border and it docks automatically. I tried this and was able to hide it behind the components library. It looked like I lost the control over it for a moment. So, I tried to hide the library to see it again. But, is wasn’t shown anymore.

I suggest not to hide the inspector any longer (in any context of the app!) and think about a fixed presentation on a dedicated place in the canvas. Have a look at how the IDEs, like Eclipse, do this today. Or have a look at Photoshop how they allow to fix movable helper dialogs.

Pretty worse is that the inspector hides parts of the library and that it is only dockable when the library is in dockable mode. The limitation to left and right border is somewhat behind the times. If both are e.g. shown on the left they should share the space and I should be able to move the inspector on top or on bottom.

I understand that you try to implement a concept to save space (e.g. with th inspector). But, with screens of 1680×1024 or wider this makes no real sense and the user expectation still suffers. I think you should have a look at how IDEs do the presentation. Although, your app is still small in the number of helper dialogs it would allow to extend the presentation in the future following a common accepted presentation model. And I can stop criticizing the best mockup tool on the market today ;-).

I love your product but the property inspector drives me crazy! My typical use is adding controls with the Quick Add then moving them around and editing the text. That doesn’t require much interaction with the property inspector so it becomes very distracting to me when I select a control to move it or change it’s text and the result is a constant show/hide of the inspector.

I was hoping that the docking feature would help so that I could just have it in one position. I like that it doesn’t fade in and out anymore but I don’t want to have to have the library open to have it docked (the three columsn use up way too much space). I just want to be able to toggle it on or off when I need it.

Please, please, please add the ability to toggle the property inspector independently from the library.

I would love a “cheat sheet” on all the interesting keyboard shortcuts, macros, etc. E.g. all inline text modifiers (_text_, *text*, -text-, [text], etc.), hidden shortcuts (lorem, etc.), font sizing (cntl+, cntl-, etc.). All these little tips can save me a lot of time, but it is hard to keep track of them all.

One option is to update the online documentation, though I would prefer a condensed cheat sheet for quick reference. Perhaps make this a wiki so you can rely on your user base to help you keep it up-to-date.