When it comes to user interfaces, consistency is extremely important. It helps create a fluid experience, one where people don’t have to stop and think before every action.

How does our web UI fare in this regard? Let’s have a look:

New Image form

The Cancel button is on the left and has red colour, the Continue button is on the right and the text is bold because this is the primary action. Both buttons are rectangular.

New User form

The Cancel button is on the right, Save User is on the left, it is not bold and the buttons are pill-shaped.

New Hardware Profile form

No Cancel button here, but Check Matches is red even though the action is not destructive.

If you were wondering why some pages use rectangular buttons and others have pills, you’re not alone. In fact, we went along and unified the concept by putting both kinds on the same page:

Hardware Profile details page

When we look at how we list stuff, we see a similar story:

List deployments

List users

List catalogs

Well, at least all tables have a consistent look!

List environments

Er, moving on.

Luckily, Jaromír Coufal, our new designer and user-experience person, has been looking into Conductor with fresh eyes and trying to see how things could be improved. He went through all the pages, noted the inconsistencies and devised a set of guidelines our interface should follow:

1. All forms have a Cancel button
2. The destructive action (cancel, delete) is on the far right and is red
3. If there is a primary action most users are expected to follow, the button is placed on the left and highlighted
4. All buttons have the same rectangular shape (with slightly rounded corners)
5. There are no dark-coloured tables with green buttons

And then, being the jolly good chap he is, Jaromír went on and actually fixed the forms:

Fixed New Image form

Fixed New User form

(well, almost. We promise to make the Cancel button red!)

Fixed New Hardware Profile form

And the tables:

Fixed list deployments page

Fixed list users page

Fixed list catalogs page

Even the dark/green one:

Fixed list environments page

The changes have been merged into our Aeolus Conductor repository which you can try out using Crag’s dev-tools script.

There’s still a lot more user interface work to be done but we think this is the move in the right direction. We’re now focusing on having a unified set of form elements (input boxes, buttons, validation messages, etc.) that will be easy to use in all of our forms. This will make it easier for the developers to create consistent look and feel across the UI.