In most website development, the end user (site visitor) is king. Most of our design efforts are focused on user experience. Even with a CMS as fully featured as Sitecore, many times we favor of the public user and neglect the CMS user, even though he or she will spend the most time using the site. Sure, there are fewer of them and once the site is implemented they don’t really have a choice but to use the delivered system, but if the content editors and site maintainers hate your solution, you have failed.

 

Guiding principles for CMS usability

CMS usability is slightly different from front-end usability, because content entry is a different activity than consuming the website. We’ll focus on four usability goals. All of the techniques and advice below help to reach these goals.

  1. Decisions: Reduce the number of decisions that the user has to make
  2. Errors: Prevent content-based errors
  3. Focus: Allow the user to focus on content, and not be distracted by the CMS
  4. Time: Reduce the amount of time it takes for the user to find something

Organize template fields into logical sections

One thing I see too often is when a developer will put all of a template’s fields into a single section, and not control the order of the fields. This is one of the easiest ways to improve CMS usability, and it is frequently overlooked. Set the order of your fields, and set the order of your sections.

Because the sort order is a standard Sitecore field, it is hidden by default. You will need to show Standard Fields from the View tab.

Sitecore Standard Fields

Then you will be able to manually control the sort order of your sections and fields.

Sitecore sort sections and fields

I recommend that you manually edit this field, instead of just relying on the order in the content tree, because the sort order applies globally. This means you must consider the section orders when a data template inherits from multiple base templates. You can even order your template sections in between standard Sitecore sections.

 

Choose the best field type

Always use the proper field type for the data. If the field is a person’s last name, use a single-line textbox, for a US State, then give them a drop-down, etc.

Sitecore contains a large number of different field types, but even if you can’t find a good one out-of-the-box, you can always create your own custom field type.

Input field validation

Sometimes an error in the website is caused by content or user-entered data in the CMS. Usually values that the developer did not anticipate. Sometimes the user is trying something that the system was not designed for, trying to achieve some new behavior, but usually it is simply mistyped data, or fields that are accidentally overlooked and left blank. Most of these errors can be prevented with some simple input validation in the CMS.

After you have created a template field, you can add field validation by selecting the field in the Sitecore content tree. Simple input validation uses a regular expression to ensure valid input. Don’t forget to add an appropriate validation message so that the user knows what they need to fix!

Sitecore input validation

 

You don’t need to stop there! If a regular expression is insufficient for your fields, you can use more complex validation rules, or even code your own. Check out chapter 4 of the Client Configuration Cookbook for more details.

Set field help text and tooltip

Without affecting any code or references, you can easily improve the clarity of a field by setting what text the user sees when editing an item.

The Title, Long description and Short description properties supply the text that is used to assist any user doing content entry.

Sitecore description properties

Title, help text, and tooltip can all help direct the user to enter correct and appropriate values.

Sitecore title, help text, and tooltip

 

Custom item icons

Visual cues are extremely effective. When selecting icons for your content items and templates, think carefully about selecting icons that are both attractive and meaningful at a glance. This may require you to supply your own custom icons.

Supplying custom icons for the Sitecore CMS is fairly simple.

  1. Place the proper icon sizes in the proper folder structure. You should always supply 16px and 32px versions:
    • MyIcons16x16iconname.png
    • MyIcons32x32iconname.png
  2. Zip up the entire folder, and place the .zip file in the proper theme location:
    • ~/sitecore/shell/Themes/Standard/MyIcons.zip
  3. It takes some more work and coding to get these to show up in the icon chooser, but for now you can just type the path to the icon you want, and Sitecore will extract it and cache it for you.

Sitecore icon set

Sitecore icon usage

 

Let them manage application settings in the CMS

Most websites have some configurable aspects. A common way to handle this is to place these values in the web.config file. This is normally fine, but you should keep in mind that the user cannot (and should not) modify these values.

A more flexible approach is to store these values in the CMS. This allows you (or the user) to control these values without the risk of breaking the entire site. You can even apply validation, as we saw earlier.

Sitecore validation

 

Build for the page editor

The page editor is one of the greatest usability tools that Sitecore has to offer, but it is too easy to make the page editor difficult or impossible to use. Here are some tips I have learned that will help you keep the Sitecore Page Editor fully functional for your content editors.

  • jQuery No-conflict Mode

The Sitecore Page Editor uses the “Prototype” javascript framework, which will conflict with jQuery by default. Even if the website behaves perfectly, the page editor will cause JavaScript errors and unexpected behavior. To avoid this, use jQuery in no-conflict mode, and avoid use of the $ in your client code.

  • Placeholder Settings

Placeholder settings allow you to define which layouts can be placed within each site layout placeholder. When using the page editor, this makes it very clear which widgets or controls the user can add to each placeholder. That way, the user doesn’t need to search through a tree of layouts just to find one that may not be appropriate for that location on the page.

  • Custom Experience Buttons

Not all fields of an item may be visible on the page. In order to edit these fields, the user would normally need to open the Sitecore Content Editor. Custom Experience Buttons allow the user to pop open a new window briefly to edit any fields that they wouldn’t be able to otherwise.

Set up accurate user roles

User roles are primarily used to restrict access for security. We frequently overlook the fact that user roles can increase usability as well. One great way that user roles can increase usability, is by hiding items that the user doesn’t have access to, instead of just locking or disabling them. By hiding inaccessible actions and content, the amount of noise in the CMS is reduced, making it easier for the user to tell what they can or should do next.

Use item workflows

Workflows can be used to enforce business rules about how content is created, reviewed, approved and published. Workflows are highly customizable and extensible, allowing you to automate more of the content creation process. For example, when a new item has been created, and is ready for review, an email can be automatically sent to a reviewer. That reviewer can then open up the Sitecore Workbox to review the item(s) and approve the changes. When approved, the item(s) could then be automatically published. You can even code a custom action that occurs at the same time.

The CMS that you choose may certainly set some of the processes and paradigms for website management, but you shouldn’t rely on them for the user experience. Instead, leverage the CMS’s strengths and flexibility. Your content editors should not feel overwhelmed or caged-in by the CMS. Instead, they should enjoy maintaining the awesome website you have built for them!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Comments