UI Changes ← Return To Blog

Currently I’m rewriting the DeployCMS User Interface (UI). The first and current attempt was hastily put in place to accommodate the first round of beta testing and has significant room for improvement. Here are some highlights from the next release.

Dockable toolbar/window

One of the first changes that we’ve made is the addition of a floating tool window when editing; an early version of this is in the current demo. Previously the page editing toolbar was fixed at the top of the page - without enough time to think about it we just followed the current conventions, but we soon discovered there are some real issues with a fixed toolbar, such as:

Lots of up and down motion
The floating tool window can be positioned next to what you’re editing.
Usually you’ve got more screen width than height
Modern monitors are typically widescreen, 16:9 display ratios are commonplace, but site designs tend to err on the side of caution and stick to 1240 pixels in width or less. The floating tool window allows you to keep the maximum amount of content on the screen whilst editing.
Poor ergonomic design
The most common complaint we got from users of the last release was how easy it was to accidentally trigger the menus above the toolbar when trying to select a tool icon - I have to admit it annoyed me at times too.

So the new UI has a ToolWindow class which supports for both a floating tool window, and a dockable toolbar, which can be docked to any side of the screen.

Preserved state modals

The modal environment has bothered me since the first release of Deploy. There were some really cool features, but mostly I felt that we’d made too many mistakes in the interaction design (not helped by the rush to release). “It feels clunky” is a phrase I’ve heard far too many times from early users. This time around, with almost 12 months of feedback, we’ve made big changes.

The lazy developer side of me (a significant portion) really appreciates the way modals can simplify my coding task. Using modals allows me to only worry about handling one interaction at a time - great!

But it’s a bit of a raw deal for users. I’m going to use a real world example (slightly exaggerated perhaps) to illustrate a key issue with modals.

When adding a product, our user - we’ll call him Joe, after entering several fields of data, comes to a category field and realises that he hasn’t yet added the category he needs to place the product within, so what are his options?

Worst case - Joe cancels the add product process, adds his category, and starts the add product process again.
Worst case (smarter user) - Joe puts the product into another category, finishes adding his product, adds the right category, and updates his product with the new category. This way at least he doesn’t lose any of the data he’s entered.
A solution in somecases - For simple cases we can give Joe the option to add a category or select an existing one; for example if the associated category record only needs a name and perhaps a publish flag which we can auto set.
An all cases solution (that’s a little clunky) - We can add a button to our form that allows Joe to open a new window in which he can add an associated category including lots of details such as an image, description, parent category, etc. On closing the window we update the add product form to include the new category as an option.
A better solution - we give Joe more options. The quick add solution is great if that’s all you need. If not, then Joe needs to be able to add a category in another window and return to the add form afterwards. On top of this, DeployCMS will now allow Joe to leave the Add Product form and do whatever he wants, safe in the knowledge that when he returns to add his product all his data will still be there.

Leading on from this, DeployCMS now uses tabbed modal windows, (a bit like what you see on the XBOX 360 dashboard when you bring up the settings dialog) to allow quick access to related admin tasks.

Quick modals

Quick modals replace the standard modals you currently see when inserting links, or performing a copy & paste. The problem with the current solution is that it halts the work flow, forcing you to wait for a form to show in the center of the screen, before you can then fill it in and click the OK or cancel button.

To solve this, we now have a mode called quick modal. Quick modals appear instantly and in context (e.g. next to the text you’re applying a link to). There’s no OK or Cancel button to click, you just press Return to apply your changes or Escape to cancel them. You can also cancel by clicking anywhere outside the modal itself.

Multiple column forms

Back on the Width Vs. Height issue, since we typically have more width, the new UI now allows developers to build multi-column forms for the admin (fieldsets are optionally assigned to columns). Dual/Triple column forms mean less scrolling which is definately a good thing, though if you do use multiple column forms it’s far better to avoid scroll bars altogether.