Hi there fellow Umbracians!

My name is Kim Andersen and I'm from Denmark, working for Kraftvaerk in Aarhus as a frontend developer.

In this post I'll be talking a bit about the back-office inside of Umbraco. Not about how to extend it or redesign it, but I'll be talking about how to give the editors and the webmasters a good experience. After all, they are the ones that are using Umbraco every single day.

So you won't see a single line of code in this post, and maybe you won't even learn anything new. Still, I think that you should read along :)

In my time working with Umbraco, I've seen a lot of implementations. A lot of good ones, but also a whole lot of bad ones.

A typical implementation focuses 100% on the frontend of the website. The stuff that the end-users are seeing. Of course they are also the ones to please, as they are our clients' customers.

Unfortunately, there's a lot of developers and consultants, that forgets the editors and the webmasters that are using Umbraco every day. The editors should have a good experience as well, otherwise they'll end up being frustrated and in the end they'll maybe talk bad about Umbraco. Either way, they will never ever recommend Umbraco to anyone again. And that's a shame if the reason is that they've had some bad experiences inside of the back-office, right?

Actually, it doesn't take much effort to give the editors a good experience working with Umbraco. I'll say it's a combination of icons, descriptions and consistency. It's all about helping the editors as much as possible, and making sure that they can maintain and use their new CMS as easy as possible.

Icons and thumbnails

So, icons and thumbnails really helps the editors a lot - a whole lot! Those small icons can give the editors a nice and quick overview over their content, without thinking of every single page and document type.

In a lot of those implementations that I have seen through the years, the most used icon must be that damn folder icon - The default icon for new document types in Umbraco. The folder icon doesn't help the editors a lot, especially not if it's the icon on most of the document types. So if we have a site with several different document types, and all of them are using the folder icon, no one, not even the folks that have implemented it, can get an overview over the content.

Try to have a look at the following screenshot:

See what I'm talking about?

I know that you might think that it sucks to spend time selecting and creating icons and thumbnails for every single document type, but there are actually a lot of free icons out there. For example you can install the "FamFamFam icons"-package that gives you hundreds of free icons. That's a good starting point. The next step could be to find an icon or two and maybe combine those to a single icon, that symbolizes what content we're talking about on each single page type.

Descriptions

Descriptions on each property field and on each document type can also make a huge difference for the editors (and also for yourself when the customer suddenly needs help, new features etc. a year after the site was implemented).

Again you might thing that it's a waste of time describing every field on all document types, but if you are just making it a natural part of creating a property, then it doesn't take you many seconds to describe a property. Since I began doing this, there's not a single property in any of the solutions that I've implemented that doesn't have a description. Not even a basic title field on a sub page.

Consistency

This part can be a challenge for even a very skilled and experienced Umbraco developer. When I say consistency, I mean the way that the different document types are built and structured. If it's possible, then try using the same property names and tab names on different document types, if the functionality is sort of the same.

Create similar properties under the same tabs across document types, and sort them in the same order from document type to document type. That way the editors can easier find the fields they are looking for, instead of having to search around the different tabs for a property that's called one thing on one document type, but another thing on another document type.

Packages

I also want to mention a couple of packages for helping the editors even more.

First off, I want to mention the "Document Type Fieldsets"-package by Tom Fulton. This package gives you the ability to group the properties under the different tabs, giving the editors a better overview of the properties under one single tab.

Another package I want to mention is the "Attackmonkey Tab Hider"-package by Tim Payne. This package can help you personalize the back-office for each user by hiding selected tabs from specific users. A very great package as well.

How about Belle?

As you have probably heard, the back office will be redesigned in project Belle. This will of course affect some of the things that I've talked about in this post, but the overall thoughts will still be the same; Help the editors, and make it as easy as possible for them to find the right nodes, navigate the back-office, maintaining their content etc.

Conclusion and your thoughts

In the end it's a benefit for all of us whenever a new great Umbraco solution is implemented, but on the other hand it can also be a problem for all of us whenever a bad Umbraco solution is implemented.

I hope that you liked the post, and I would love to discuss the stuff that I've talked about, in the comments, so please give me your view on the topic. Do you think it's a waste of time? Are you already doing this stuff? Have I forgotten some important parts? Or do you have any other comments/questions, then please don't hesitate commenting below.

Merry Christmas Everyone.

 

Some extra ressources:

Here's acouple of extra ressources mentioned in the comments:

• Categories folder-icon
• Icon Picker package - (have more than one icon for each document type)
• DocTypeMixins package