The Importance of User Experience within the Back-end

By Zesty

The back-end is often overlooked in the development process – not so much in functionality but more in ease of use and intuitiveness.

But it is really important that the back-end is seen as being every bit as important as the front.

This is best explained if you look at the back-end as an application and the client as the end-user… The client needs to be able to update, amend, add or remove elements with the click of a button. The backend users may be experts in their own field but this field is highly unlikely to be web development – otherwise, why have they come to you?! Therefore, with this in mind the goal of any developer should be to develop dynamic sites that gives their client full control and flexibility over content… but not so much control the user can break the design layout of the site.

At the beginning of my career my first experience with a CMS was Joomla. That was many moons ago. The whole experience was an absolute nightmare and there will be many who will testify to that. I found Joomla difficult and laborious to navigate. It was almost like a like a university course was required to do the simplest things! Fast forward a couple of years and I started to work with WordPress. Wow! My thoughts were the complete opposite. I quickly realised that this was the way to do it. WordPress is elegant, simple, minimalistic and extremely easy to use. To this day this principle of ease of use is what I try to achieve when building functionality in WordPress websites. The objective – build the site so anyone can use it.

When extending WordPress for additional functionality it is important to keep these founding principles in place. Here are some of my thoughts and suggestions on how to achieve a good user experience within the backend. (This piece is obviously written from a WordPress perspective, but the theme is universal across all content management backend systems.)

KISS (Keep It Simple Stupid)

A common design term that I think can be easily applied to the development of the back-end of any website. Keep the back-end tidy, don’t show fields that are not being used. If there is no need for a content area, don’t show it. The same goes for image fields, and anything else that distracts from the main goal of the template you want to use. Try to eliminate anything that could cause confusion for the client. It is great to have lots of functionality, but try to stick to the functionality that will be used for a certain page, post or custom post type…

Control

Give the client maximum control over what is necessary.

If they want to upload files, create separate upload fields and ensure that the client has control over the data that is uploaded, I like the CMS to control the rest. For example, where does it show on the page? Does it need icons? etc.

The client should be able to have control over all content and some of the design elements like the choice of template to use.

Intuitiveness

Always try to make sure everything can be found in the most logical location. This sounds very obvious but I have seen this done incorrectly many times. Remember you are building a site with the end user in mind. Take a step back and imagine from the client’s perspective. If you were to log-in to this website for the very first time and wanted to upload something to a certain page you would ask yourself: Where can I find it? Where is this located? What template should I use? In WordPress, this can be achieved by using Custom Post Types for most elements. For example the client has requested a ‘Who We Are’ page with the following properties Image, Person’s name Job title Biography. What we would do is create a menu item in the Back-End called ‘Who We Are’. In this Custom Post Type we would add the functionality to add the image, name, job title and biography and nothing else.

This way there can be no confusion, no extra work for the end user and everything will be displayed the way intended according to the signed off design…

Manual and Training

Creating a manual and delivering training for the client is common practice, however a really good CMS should need minimal explanation and instruction – remember it should be intuitive! By using field labels and instructions above every field, in every post type and pages will provide much better help than a manual, digitally or printed. In my experience users will put the manual in a drawer or store it somewhere in a random folder on their computer and forget about it as soon as they have made themselves familiar with the CMS.

It is important to make sure that everything is clear and every field is described so that anyone who logs-in can start working without too much effort. You must guide the client through the CMS maze with ease and comfort…

Fallbacks

Fallbacks should always be integrated in the CMS. So if the client forgets to upload the main image, the page doesn’t look bad. Let images be cropped to the correct sizes rather than CSS resizing so they are not stretched or skewed. Cut off long titles in the breadcrumbs, clients often resort to very long titles in their posts, this can mess up a page when it shows up in the breadcrumbs, this can be prevented with an relatively easy CSS fixes.

Maximise the number of elements they can add to the top navigation, or use flex boxes and justify the space, so a main menu never goes over two lines. Finally make sure to have a style for any item the client can upload to a page or post, so tables, columns and images always look good and as intended according to the signed off design.

Hope this helps but if you have any questions just drop us an email or call!

Image by Sam Cantazaro on Flickr Creative Commons.