Controls on a CMS dashboard
Using a Content Management System can either be easy or frustrating. This also depends on the look and layout of the controls. Staying true to stereotype in this case is useful and allows you to focus on WHAT you want to do rather than being distracted by debating HOW to do it (or in our case – how to click it).
When using websites it’s quite important that the graphic elements are chosen to hint and not confuse users. There has been written a lot about site navigation, but it usually deals with site navigation visible to the visitor. Orientation on the administration side of the site is also important, even if far fewer people access it and it is assumed they already have some training.
If you click on a button that is gray, flat and has gray lettering, you might hesitate if it’s inactive or not. When you see something red, you expect it having a warning function of some sort (e.g. “Warning, are you sure you want to delete this?”) and green usually means positive information (e.g. “Yes, you successfully uploaded the file”).
If there is a continuous area coinciding with the background, no one would expect being able to input text into it. Just for kicks – how many people do you know that are able to edit or rewrite the subject of a received email message in Outlook?
Anyway, let’s look at the most common elements…
The button and the icon
From buttons and icons we expect them to perform actions, such as saving, deleting, highlighting or copying…
It probably has a plastic or similar effect to give an impression it’s clickable. It should also match the color of its function. If the “Save” button is red, you might have an uneasy feeling every time you click on it, thinking it might do something different – something dangerous or even forbidden.
You might find a button which function is currently inactive. This is maybe because it doesn’t have a significant meaning on that page – e.g. "Show subpages" when the page has no subpages. It may also be inactive because you don’t have rights to perform the specific action. Or the page itself is not in the correct state - for example, you can’t publish the page until its content is approved. In this case it is appropriate that the button for this action was still in its place where it’s supposed to be, but its appearance suggests it is not active at the moment. If the button completely disappears, the person using the system will become confused and probably stop and look for it. This causes more uncertainty than clearly saying, "normally it does this, but right now it’s not possible to do it…"
When using tabs, we’re able to switch between visible content and other content currently invisible – but basically you stay on the same page in the same document or dialog box. From the tab’s design it should be apparent which one is currently selected, e.g. by framing the active content which will help you in finding the “child” section (page or window). Other tabs should be visibly inactive and “cut off” by the frame that belongs only to the active part of the content.
As expected when you see an underlined text you’ll definitely associate it with a link. After clicking it, it will relocate you to another page or website. Rarely, it may move you to another location within the same page (anchor).
It really depends on the design of the CMS but sometimes links aren’t underlined but they can be emphasized differently (e.g. highlighted or the text would be in a different color than the rest). Though, the design should be unified across the whole system. Still, if the design differs from common usage, this may be a problem and the users might get confused if “this is a link” or not.
Empty text fields (or textareas) give you the option to enter text into them.
If there is something already entered in a text field but it’s faded out, this means the text will disappear when we click into it. We can start typing our own text afterwards.
If the input text is in a darker contrasting color (usually black), this means this is a valid value that you can edit.
Sometimes you might be pleasantly surprised that when you start typing, the system will show you a hint of possible words or phrases you can use for your search, page URL or any other relevant items. This means the system has a “whisper” feature.
From a dropdown menu – a textbox that has an arrow pointing down (select box), you expect an expanded selection of options you can choose from. Of course, as expected, you won’t be able to input your own text into a dropdown menu.
Consolidating the interface
It’s confusing when the system has a same kind of image (icon) for multiple different actions. Even the opposite case is wrong, when the same action on various pages has a different interface element (e.g. blue button in one place and a text link on the other).
Also, you might be annoyed when an interface element is located differently across various pages in a different part of the screen. You’ll be either spending time looking for it or you’ll get the impression that you’re not permitted to use that function at all (since you think it’s missing). So, when it’s not at the same place, you don’t need to assume it could be elsewhere.
Having a border around whole elements (either by a line or a colored background) tells us how they are related together. It can help identify the context between content and it’s much more important than you’d think. But, a wrongly led “line” along the content can cause confusion if it’s placed incorrectly. For example, when you press the Save button you’d expect to save everything that’s somehow framed together by a border. But when you save more or less, you see it as a mistake because you only wanted the specific part to be saved.
A properly selected color, size, type and location of interface elements helps you intuitively assume their function and behavior and thus will make your work much, much easier. Therefore any atypical use of inappropriate behavior is flat-out wrong… and downright criminal! In practice this causes confusion – just as if an unnamed European country would decide that a red traffic light would mean “go”. Imagine the mess!