Constructive Group Created with Sketch.

What’s It Take to Create a User-Friendly CMS?

How good a nonprofit website looks and feels from the public facing side (aka: “the frontend”) is important. It’s something we, of course, think about a lot at Constructive. And when you envision a website in your mind, you may naturally think of how the frontend works and looks. Now think about the backend. What comes to mind?Is it a frustrating, time-consuming mess or as easy as a walk in the park?

Well, when it comes to the landscape of WordPress sites, not all CMS’s are created equal, and depending on how thoughtful a web design agency is, this could mean lots of headaches for you and your staff. Sometimes (too often!) nonprofit website CMS’s are cluttered and unnavigable, leaving site admins with more questions than answers. 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!!

But it doesn’t have to be this way! In fact, it shouldn’t. Some agencies (ahem!) actually take the time to map out a logical way to visualize, create and edit content in WordPress. However, maybe not enough of them—at least if we are judging the level of frustration with nonprofits when they ask us about redesigning their websites. And the worst part is that if you’re a nonprofit looking to redesign your website, you very well may not learn how well your CMS is designed until it’s too late.

Fear not, we’re here to fix this by starting a dialog on what makes a great backend for WordPress.

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. In addition 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 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 one would be editing a category, but that wasn’t the case—we had to go digging into code to find where to edit the target content. Frustrating for site managers 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? Well, sort of. What we’re trying to say is that 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 we 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 type of 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. Afterwards, you should see the main body content. Other options like SEO customizations? We 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 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

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 labelled 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 own 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 actually 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 we recently had the “pleasure” of evaluating. 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 are important to holding up the message a website is projecting.

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.

If you have some questions about how we can do this for you, just give us a shout by getting in touch here!

Copied to clipboard http://...