Sitecore is all about the customer experience, delivering the right experience to the right person at the right time. While nobody will disagree that the customer experience is king, we still need to remember the experience of the people who are using Sitecore every day to bring that amazing experience to the customer.
Related: How to enhance Sitecore’s Helix feature layer.
I’ve seen countless clients come through our doors with an existing Sitecore implementation who complain the platform is too difficult to use and too complicated. After reviewing their implementations, it is very easy to see why—the content management experience has been implemented poorly. Delivering a great experience to your customers is key, but I think it’s only one piece of the puzzle. If your implementation makes it hard for content authors to do their job, it’s not surprising that your client satisfaction will take a turn for the worse.
In addition, a poor implementation will lead to a great deal more communication overhead in having to explain how to do things. When you bring a great experience to those using Sitecore, they will look forward to engaging with the platform. And when someone looks forward to doing their job, they can start looking forward and thinking out of the box, instead of getting stuck in the frustrating day to day.
To avoid the headache of a poor Sitecore user experience, here are five things you can do now to improve on your content management experience.
Custom Login Screen
If you have ever used Sitecore, you’re familiar with the red screen below. It’s the first thing you see when you attempt to login. The login screen is the doorstep to the platform and the beginning of the experience.
Instead of using the default background as seen above, I like to use the client’s brand colors and create a custom background for them like the ones below. Small details like this can really make the client feel like the platform is “theirs,” and provide a more branded experience, just like the client wants to deliver to its customers. The best part is that this can be done with just one config file! Download the file here and remember to make your image 2560 x 1600.
Tabbed Rendering Selector
When selecting a component to add to a page using the experience editor, by default you receive the ‘Select a Rendering’ dialogue, which lists all the possible components you can add to a specific place on a page. For implementations that have a large amount of components you can add, it can be a little time consuming to scroll through and find the exact one you want.
With a little custom code, you can actually alter the appearance of this dialog to instead display the available components organized by tabs, instead of just one long list.
Download the code beside file here, making sure to update the namespace for your project. Also, make sure to download this file and place it in ‘[Web Root] \sitecore\shell\Override,’ while also updating line seven with the namespace for your project.
If you take a look at the before and after screenshots for No. 2 above, you’ll see that by default the images for the components available for a page are blue rectangles. Getting a common domain language between yourself and the client is important, but even then, it can be difficult to know what a component like a Standard Content Panel does. Maybe the client knows it as a billboard or a banner and has never heard the term before.
Sitecore provides the ability for you to change the thumbnails shown for a specific component with no code required. Make sure standard fields are shown, then simply navigate to the rendering inside the Sitecore Content Editor and scroll down to the thumbnail field and set a thumbnail for what the component looks like when it is used. Combining a logical grouping of components with the tabbed rendering selector with helpful thumbnails makes using the experience editor to compose your pages even easier.
Custom Experience Buttons
For some of the more complex components you create in Sitecore, it can be difficult to provide a direct and intuitive editing process for the client. Take a basic video component that spans the width of the screen. Let’s say the video auto-plays when the user hits the page, and the client has the option to set various colors that overlay on top of the video while it plays.
If the client wants to change the value of one of these display properties, they are stuck having to click more => edit component properties. While two clicks may not be a big deal, that dialogue exposes properties of the component, such as the placeholder key and data source path that your average content author does not need to see.
Sitecore’s own Adam Conn has created a NuGet package you can install in order to expose rendering parameters, such as the one I described using a custom experience button. Read his post here. Using this you can add some flare to your rendering toolbar with a button that takes the user directly to the field they want to edit, narrowing the scope of what they see.
Hiding with Standard Fields
Standard fields are more admin-advanced controls that content authors normally don’t need to worry about.
Those who might be more seasoned with Sitecore are probably familiar with standard fields. I like to think of these fields as more administrative-advanced controls that nine out of 10 times don’t need to be touched by your average content author. In fact, Sitecore has its very own checkbox to hide these fields from view (see below).
During the course of development, you might find the need to define fields that are more administrative that don’t need to be seen by the client. Out-of-the-box Sitecore does not have a way for you to hide your own custom fields along with theirs, so your client is stuck seeing things they don’t need to care about, creating noise and confusion.
One way you can solve for this is to extend Sitecore’s template for a template field. The template field template (say that three times fast) is where Sitecore defines what makes up a template field. It’s located at ‘/sitecore/templates/System/Templates/Template field’. We added a checkbox on that field for hiding or showing with standard fields. Using this checkbox and Sitecore’s awesome pipelines, we will be able to hide whatever fields we want, along with the Standard fields.
Once you’ve added that checkbox, you should now see it on the fields of your templates. The last part is to tell Sitecore to show fields with that checkbox checked when the user checks the Standard field checkbox.
To do that, we need to hook into the get-content-editor-fields pipeline. During the course of that pipeline, Sitecore has to determine what fields it will show, which is where we will hook in. Simply download the config file and C# code and adjust namespaces.
These are just some of the ways you can begin to extend Sitecore to bring an even better experience to your clients. Want to see more? Check out my session Empowering Your Users: Maximizing The Content Management Experience at this year’s Sitecore Symposium!