How amazing a website looks and feels from the public facing side is a big deal. We think about it a lot ourselves. When you envision a website in your mind, you naturally think of how the frontend works and looks.

Now think about the Backend. What comes to mind? If your past experience is much like mine when it comes to seeing all sorts of WordPress sites, it’s sometimes cluttered and unnavigable. Where do I start the process of creating a new publication? How can I add a byline? How do I make this link to what I want? Is the 'Featured Image' really a 'Featured Image'? What is a 'Featured Image'? What goes where?! Gah!

If my rant was a little too familiar—fear not. Some folks actually take the time to map out a logical way to visualize, create and edit content in WordPress. I do fear, however, that maybe not enough do and it shows if you’ve seen the aftermath of developer battles wrought on the backends of WordPress sites. Many military operations take place on the front end, leaving the flanks of the back end open to attack!

So, let’s start a quality dialog on what makes a great backend for WordPress. Ready, set, and go.

Five Years of WordPress Sites and Counting

Whoa! Hold on. I guess I should start out with my background with WordPress. It’s a crazy cute Content Management System that focuses on ease of use and creating a viable platform for web publishing (primarily blogging, but not so much the case as of late).

I’ve worked with hundreds of WordPress sites over the last five years and while my focus has spread into more frontend-leaning technologies and Drupal recently, I still work mostly with WordPress.

Of those hundreds of sites, I’ve built around 50 as the sole developer, and some with other developers. The rest were touched primarily in maintenance or support roles. I’ve learned a lot in my time working with all these sites, and I think that at least gives me some authority on what not to do. The things I’ve seen…

Impact on Content Curators

The most important people around the web are the ones who make web content. When it comes to content creator workflow, time equals money, and in the case of websites with a constant flow of new content, the speed and simplicity of their workflow is paramount.

Using buckets or fields for content is a straightforward way to enable consistent results. Also, you’re also reducing training burden, complex formatting rules for content entry, and cognitive load.

Reducing the cognitive load leaves more room for creating and editing rather than figuring out how to use the site. If you’ve ever tried to learn a new version of Microsoft Word or Excel after a major update, you know exactly what a high cognitive load feels like.

Impact on Website Maintenance

Backend layout semantics can also have a significant effect on maintenance costs. When documentation is scarce, and a new developer or administrator is brought on to maintain or enhance the site, hunting for options and how they relate to one another takes valuable time and can lead to confusions and ultimately misconfiguration.

Nothing is worse than not being able to find where you edit a page without digging into the code to discover where something is linked up. In the example below, the way to edit this page is in a seemingly unrelated part of the backend compared to the frontend. It looked as if I’d be editing a category, but that wasn’t the case—I had to go digging into the code to find where to edit the target content. Frustrating for me and frustrating for content creators.

Planning a User-Friendly CMS Backend as a Complete Thought

The best policy when planning how the backend works is… do what feels right?

I know, I know. What a dumb thing to prescribe. What I’m trying to say is options for the blog section of a site should be filed under the Posts section for your blog posts or perhaps a theme options page that clearly categorizes blog-related options and features. Extending the WordPress experience is preferable to stacking on another layer.

As with shopping for a new car, you’re expecting controls to be where you’d suspect they should be in the interior. It might drive great, but if the A/C, Heating, and Vent controls are under the passenger seat, your expectations for an easy to use ride are not being met.

For developers—as the car designer and manufacturer in this example—it’s their responsibility to make an enjoyable and user-friendly ride.

Semantic Organization

The hallmark of any smart visual design, UX design or development is semantic organization – or categorical and top to bottom semantics to be more precise. This goes here, and that goes there because it makes sense, right? Make it easy to use and understand.

Categorical organization in the backend should be easily understood right when you login to WordPress. Here’s where I go to create a new blog post. There’s the place to add another staff member. Easy peasy!

Top to bottom organization should be a logical flow from top to bottom when editing any post or page. Page title for WordPress. Check! Second the custom heading, then the banner image. Maybe after that some introductory copy. Perhaps there’s a section for teaser content used through the site below that. Afterward, you should see the main body content. Other options like SEO customizations? I think those might go great up top for this client, but maybe the next client needs those down below. Either way you look at it, it’s a meaningful client-oriented design that makes sense to those crafting and entering the content.

Iconography

To tie into the concept of easily finding relevant content controls: relaying a quick message can be as simple as representing section or content type with an icon cue. It’s not a secret at all that icons are powerful communicators. Better yet, WordPress makes it easy to implement these for Custom Post Types (Insights, Reports, Projects, Blog Posts, etc) or any major menu section with their dashicons.

The icons above help guide users in the right direction with visual cues. Paired up with a concise label, it’s easy to find exactly what you’re looking for.

In the case of a complex site architecture, iconography can make an even bigger difference.

Naming Conventions

As outlined by our own John Macaluso, we like to stay organized and aid developers and content creators by leveraging tools like Advanced Custom Fields to make creating and editing content, as well as software development, more straightforward.

Names of any sort, code, scripting or template files should be sorted logically and labeled to aid finding what you need. Take this list of custom field groups for content created in Advanced Custom Fields for example.

When it comes to updating or adding visual rows of content on our site, they’re organized by row to allow us to focus on one template file and one set of files instead of getting lost in fields or files we don’t need.

This translates to content entry in the same regard. New rows of content are added and organized as the author wants to present them on the frontend. They’re easy to find, and the names of each row make sense as to what they do.

Documentation

When all else has been done to create a user-friendly journey through the CMS backend, there is one more tool that can make or break an experience: documentation.

While it should be standard practice to document how to use a piece of software, even a simple reference guide can make a tremendous difference.

However, the trick is getting people to read directions. To make content entry easier for creators who are not tech savvy, don’t read documentation, don’t follow the rules, or who are coming back and just need a quick refresh, inline directions or tips that assist content entry should be included.

3rd Party Software Minefield

WordPress plugins can aid in developing a great site with little work, but they can really trash up a backend. A couple of good examples of confusing backend layout would be two off-the-shelf WordPress themes I recently had the pleasure of working with. Both are built to work with a popular WordPress Ecommerce plugin. Options for common elements of the public facing website can be strewn across multiple parts of the backend. Required plugins clutter up the site with way too many menu options and panels.

Unfortunately, not everyone believes in less being more. It’s common to see this kind of menumania in off-the-shelf super themes and bloated plugins. If the authors had been watching Good Eats with Alton Brown, they’d know they should have better ‘multi-taskers’ in the kitchen.

You have a voice and we should make it easier to be heard

I hope this increases the awareness for how important a user-friendly CMS backend architecture is to WordPress users. If a website were to be held up by legs as on a tripod, one leg would be content, another presentation, and the last the content entry workflow. Each is important to holding up the message a website is projecting.

Putting in the time for UX up front will shave off countless hours of development later on.

Click To Tweet

Don’t let the CMS backend be a passing thought or taken for granted. It should be built with the tender loving care that any part of a website might be and should enable content creators to visualize their presentation as naturally as if they were working with any time-tested medium. Putting in the time up front will shave off countless hours of admins struggling with a senseless out-of-the-box backend.

About The Author

Quinton is a veteran WordPress developer who has been developing websites since 2000. He works full-stack, combining expertise in front- and back-end implementations to develop lean, integrated websites and CMS tools. Prior to joining Constructive, Quinton worked as a developer with several firms, and as a technology support and training professional, experience he applies as one of Constructive’s client training and support leads.

This article originally appeared on Constructive Thinking.