All the Users

In this post, Stevie Mayhew, CTO at Little Giant and long-time SilverStripe open source contributor, shares his thoughts on giving CMS users the best experience possible. 

As web professionals we spend considerable time with our collective skills to ensure that the work we produce is world class for our target users. We aim to give them experiences that are easy to use, well reasoned, exciting and engaging.

What we have to remember is that not all users are engaging with these parts of the website or application. There’s a deeper, darker layer where administrators lie…

Administrative interfaces are easy to overlook, especially in an environment like SilverStripe which makes everything pretty good by default. It’s important to ensure that we consider these users and make their experience just as simple, intuitive and world class as the rest of the application.

Administration Experience

Here are a few ways to make sure that you are giving your administrative users the best tools for their job.

Simplify

The amount of moving parts in a machine is a factor in its mechanical efficiency.

This is also true of your website and your administration interface. We want to allow administrators to work as efficiently and fluidly as possible. It’s tempting to simply give all of your users top level access and let them have at it, but this explosion of interfaces, views and buttons can easily lead to confusion. Keep things as simple as possible for each administrative role.

In SilverStripe, this can be as simple as setting up groups to only allow access to certain parts of the administration interface, or delving right down to complicated permission setting within your application.

Explain

If you can’t explain it to a six year old, you don’t understand it yourself.

Spending time clearly explaining your interface makes it easier to navigate. The easier it is to navigate your interface, the less often you will have to step in to fix mistakes due to misunderstandings.

If your user is entering a part of the administration interface they haven’t seen before they are entering new territory. Always give users the tools and frameworks to understand where they are and what they need to do.

Use tools like setRightTitle and setDescription on forms fields. Litter your interface with notes using LiteralField. Throw up alerts and validation errors with meaningful messages when something goes wrong. Ensure they can be successful without your assistance.

Divide

It is not our differences that divide us. It is our inability to recognize, accept, and celebrate those differences.

Keeping information segmented in its rightful place can make it easier to know what to do in a certain situation. If a page has a lot of images, then an “Images” tab can make a lot of sense. If you have a lot of information pages (e.g. T&Cs, Privacy Policies) then make these easy to edit by grouping them in the menu of the CMS.

Treat your administration information architecture with the same care that you spend on your end users’ application architecture.

Test and Improve

Never give up your right to be wrong, and be sure to give others that right too.

Make sure that you test your assumptions about how easy something is to do in the administrative interface. Ensure that it’s easy for everybody, not just someone who is used to the workflow. Focus on continuously improving the experience. Your administration section needs updates and maintenance just like every other part of your website.

Often it’s as simple as talking to your administrative users to find and eliminate key pain points. A happy administrator is a better administrator.

The Quick Wins for Developers

There are a few easy ways to ensure a better CMS experience for those users.

Give Hints

Use setRightTitle and setDescription on FormFields to let the user know what they should expect to do with a field.

$imageBanner = UploadField::create(
    'BannerImage',
    'Banner Image'
)->setRightTitle('Banner image should be <strong>1140px</strong> wide and <strong>545px</strong> high and should be less than 1MB in size.');

Another favourite example of mine is to ensure that people know they should put “http://“ into their links.

TextField::create(
    'ExternalLink',
    'External Link'
)->setRightTitle('Please include <strong>http://</strong> or <strong>https://</strong> in your link');

This should of course be enforced by an onBeforeWrite function as well. Empowering people to do something that doesn’t need correction is always a good idea too.

Ensure that things work well by default

Make sure that you are setting sensible defaults on UploadFields. Put files into folders that make sense.

$bannerFolder = new Folder();
$bannerFolderDir = 'Uploads/Banners/';
$bannerFolder->find_or_make($bannerFolderDir);
$imageBanner->setFolderName($bannerFolderDir);
$imageBanner->getValidator()->setAllowedMaxFileSize(1 * 1024 * 1024);

Split common functionality

Use tools like catalog-manager, singlepageadmin and grouped-cms-menu to lay out your administration experience.

Useful modules

Use grouped-cms-menu to logically order your administration menus

Use catalog-manager to pull catalog sections out of the site tree and into their own administration interface. This is an easy way to divide your administration and provide access only to those where it’s needed.

Use singlepageadmin to pull single pages (like T&Cs and Privacy Policy) into their own menu grouping. This allows easy access to key bits of information and keeps them out the way otherwise.

Use cms-theme to make your administration interface suit the theme of the website and incorporate your client’s brand colours and logo. People are more comfortable with things that are familiar to them.

Use gridfield-betterbuttons to make the experience of editing items in SilverStripe a little bit nicer.

Use display-logic to allow complex interactions in the CMS. Works well when you have an option (internal/external link anybody?)

Image: "US Navy Cryptanalytic Bombe" by brewbooks is licensed under CC BY-SA