5 Top UX Tips for Umbraco 8 CMS

Straight from the horse’s mouth – Umbraco states that “Updating your project with fresh new content should be intuitive, fast, and fun. ​Luckily, that’s the case with Umbraco.”

And they are not lying! However, just because the tools are provided, does not mean Umbraco 8 provides great UX straight out the box. We have seen some very… interesting? CMS builds (and that’s being polite).

So HOW do we create a beautiful, easy to use CMS? Without further ado, we have put together a list of 5 top tips for creating ‘UX in the back-office’. Some of these points are very basic, but getting the basics right is the best place to start, right?

Providing clear and descriptive names is a must. For example - It’s not Home; it’s Home Page. It’s not a News Article; it’s a News Article Page. This helps make it clear that this is a type of content that is also a webpage (and not, for example, a Data Item, like a Team Member or a Category). 

Sometimes a name is not enough, and this is where the Description field comes in. Describe that special functionality, explain why that weird requirement exists. Make a note of what the content editor needs to know, exactly where they need to know it. Combining a description with validation and custom validation messages helps drive home the point!

Umbraco comes with a whole bunch of icons, and In a bunch of classy colours too! This means we can Give Document Types appropriate icons, and group content by colour.

Maybe ‘News Article Categories’ live in a Data folder outside of the main website structure. You can still visually group them by colour, which helps link them, even though they aren’t necessarily in the same area. You might not notice these small touches, but your brain does!

The Umbraco Content Tree can handle hundreds of thousands of nodes, but can the content editor? And more to the point should they have to? The Listview allows us to organise content as a searchable, paginated list within its parent container.

By adding a Listview to the Our Insights page, the list of news articles and blog posts is pulled out of the Content Tree. We can even change the icon containing the Listview tab, modify the list of fields displayed and change their default sorting options!

It is well-known that people don’t like to be overwhelmed by choice. So, let’s not make them think about it!

A Content Editor doesn’t need to create another Search Page, so we don’t need to give them this option. If we give a content editor no other options than what they need, then there’s no room for error! We can do this at any level, for any user.

Arguably, the biggest and most exciting change to recent Umbraco is the introduction of Content Apps. These are plugins that attach to a specific Document Type as a new tab and can display information about that content or extend functionality.

It’s easy to use Umbraco’s styling so that anything we custom create still feels like Umbraco, so it really can be a seamless experience switching between default Umbraco and custom functionality. There are some interesting possibilities with content apps, and as with all most things Umbraco, they are incredibly powerful but easy to create!