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:
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.
The Cancel button is on the right, Save User is on the left, it is not bold and the buttons are pill-shaped.
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:
When we look at how we list stuff, we see a similar story:
Well, at least all tables have a consistent look!
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:
- All forms have a Cancel button
- The destructive action (cancel, delete) is on the far right and is red
- If there is a primary action most users are expected to follow, the button is placed on the left and highlighted
- All buttons have the same rectangular shape (with slightly rounded corners)
- 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:
(well, almost. We promise to make the Cancel button red!)
And the tables:
Even the dark/green one:
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.