Don't forget the editors when building your website

By Charlotte Naversten

When building a website, the main focus is usually on what the visitor will see and experience when they come to the website. That will, of course, always be the most important thing, but there are also strong reasons to make a great effort in providing a good user experience for the editor.

As anyone who has ever been involved in a website project surely knows, one thing that rarely gets attention during the creation process is the design of the edit mode. While a lot of effort is put into creating a fancy website design and expedient content to fulfill the website purpose, discussions on how to design a user-friendly edit mode are often de-prioritized.

The reasons for this can vary. Sometimes a project sits with a very tight deadline and all resources have to focus on what will be visible for the visitors. In some projects it can be difficult for stakeholders to justify the extra budget needed "just to fix something that isn't visible". Often, people within the team can be lacking knowledge and understanding as to why it's relevant to spend time and money on the edit mode and this is the reason why it can get step-motherly treated.

Why you should focus on creating a user-friendly edit mode

So, why is it even important to care for the edit mode design and the user experience of your editors?

• First of all, it saves time. Working with a logical system that behaves as expected cuts a lot of time that otherwise would have been spent on trial-and-error scenarios, asking colleagues, googling or finding information in editor’s manuals.
• Secondly, it’s about your credibility. Having an editor’s mode that invites making mistakes and puts the accuracy of your content at stake can be a considerable risk. In the best case, it will only cause minor design issues on your website when an error has occurred but in the worst case, numbers or other data might be mixed up or wrong. For many organisations, this will mean a significant business risk.
• The third reason is the happiness of your editors. Imagine spending most of your work days in a system that doesn’t make sense, makes you irritated and invites you to make mistakes. We can all relate to experiences we have had when different apps or digital systems didn’t work in a user-friendly way and remember how frustrated that made us feel.

What these three reasons have in common is that they are — or have the potential to be — cost drivers. Spending extra hours to figure out how different website features work is costly. The same goes for a potential reputational crisis that might come from incorrect content on your website. Frustrated employees may quit and look for opportunities to work with smoother systems and you will need to spend money on new recruitment efforts.

So, even if you look at this from a strictly monetary perspective, it’s a good idea to invest in a user-friendly edit mode because it will save you money to avoid these things.

It doesn’t matter if your website is enormous and you have a whole team of web editors who work on it, or if it is smaller and you only have someone who works part-time on it. The reasons for providing a good user experience for your editors are valid for all websites.

Though, the good news is that once you have this understanding, you can save time and money going forward by letting CMS UX be an ever-present consideration in all your website creation work.

How to create a user-friendly edit mode

So, knowing all this, how can you ensure that your CMS will be an intuitive dream for your editors to work with?

All CMS are different and it’s important to remember that a good edit mode doesn't come built-in any of them so here are some tips on how to succeed:

• Carefully consider which components to use for what purpose. Is it better to have many different page types, or should you instead go for fewer page types and use different blocks in order to create your pages? Which one is best for you depends on your situation. If you have a relatively small group of experienced editors who know how to follow your organisation’s design guidelines then the freedom of crafting pages with blocks might be the right way. However, if you have a larger team that only do sporadic editing/maintenance work, an approach using stricter templates for page types may suit you better.
• Use descriptive naming of components. Rather than giving your components names like CTA block 1, CTA block 2 and Content block, give them names that actually describe what to expect from them, like CTA banner with image and text block or CTA banner with text box block. This will help your editors to find the block they look for quicker.
• Give the components proper names early in the process. Some teams enjoy giving components silly names during the creation process, which might be fun, but there is a risk that the first name sticks even though a new name has been decided. It may create confusion if the naming is not clear and consistent so try to make it right from the beginning.
• Add relevant instructions straight in the CMS. Even though you might provide your editors with an extensive manual, it saves a lot of time if must-have instructions are added straight into the CMS so that the editors can see them when they are actually creating the components.
• Include relevant data and numbers in the instructions. Rather than generically describing a field, add very specific instructions. If an image needs to be a certain size or ratio then add this information. For metadata fields, make sure to add updated information on how long a meta description should be etc. Otherwise, editors might have to leave in the middle of the publishing process to go to another website to check this.
• Structure the different fields within a component with the user in mind. The structure should be logical and make sense even to someone who isn't very familiar with the website. Placing the fields in an order that corresponds to what you visually expect to see on the website is usually a good starting point. If you add a feature to a component later, don't be lazy and add the field where it might be easiest — rather place it where it belongs logically.
• Categorize your components properly. When designing the different components for your website you probably have a content driven purpose for each component. By structuring your components into categories related to these purposes you will make it easier for your editors to choose appropriate components upon publishing. Examples of categories could be Navigation components, CTA components and Visualization components.
• Use thumbnails that actually helps. When choosing between different components it's often standard that the components have a small thumbnail image in the overview list. Make sure to use an image that will give the editor a good perception of which component it is. Even though it is usually a tiny image, it can still be helpful to an editor who is trying to choose between different components.
• Use error messages that makes sense. If the components in your website have fields or settings that are compulsory to fill in, make sure the error message that appears when something is missing or wrong really explains what needs to be done to fulfill the requirements. Be specific. Don't write Add a meta description, rather write Add a meta description of between 150 and 160 characters that summarizes the content.

If you follow this advice, you will have a functional CMS that consumes less working time, counteracts errors and gives your editors a more joyful work life.

Don’t forget that the work isn't finished when your website is launched. Every time a new component is created or updated, it needs to be reviewed with the editor's perspective in mind.

The new role of the editors manual

When the relevant instructions are included straight into the CMS, will you still need an editor’s manual?

Yes, you will still need an editor's manual for your site but rather than focusing on detailed descriptions on how to use the settings for each component, the manual can focus on conceptual things like for which purpose a specific component should be used. The manual is also a great place for providing content style guides with information on messaging, tonality and imagery.

What now?

So what do you do now? No matter whether you are about to start a website re-build project soon, or if your website is in more of a maintenance mode — it's time to put some love into your editors user experience. The sooner you get the basics sorted out, the more time and money you will save going forward.

Don't hesitate to get in touch. We're happy to help you and your website on the journey towards a more user-friendly edit mode.