I’ve been learning how to work with various CMSs for the past 10 years. Having spent the past 3 years working exclusively on Sitecore, I can relate that it’s one of the most difficult to tame. In fact, the learning curve is so high that most of the new authors I know didn’t like it at first.
Although Sitecore UI looks very promising at the beginning, when you start using it, you quickly see it’s limitations and flaws.
Sitecore UI and the ribbon
Sitecore interface hasn’t really changed since version 8, and today its designs look very outdated. To me, the main issue is the ribbon (probably inspired by the Microsoft office Ribbon, introduced in 2007). It’s is a UX paradigm from the past that takes too much space on the screen and doesn’t really help readability and discovery, specifically in the context of a CMS.
One other point is that the content editor looks cluttered and clunky. It really gives you the feeling to be stuck in the 2000s with small pixelated famfamfam icons.
In content editor mode, you have actions that can be performed in 3 different ways (i.e: Publish, open Media library, switch language) or with a crazy clic-clic-clic sequence. The wording is not every-time in place. Often, It’s painful to get what you want because lots of things are hidden under the ribbon, context menus, or tabs.
Also, there are no visual clues to let the authors know when something is loading or to identify which are the most used actions they need (i.e create, preview, publish, unpublish…). You don’t really know how to start or where to go.
My challenge: build a modern and user-friendly Sitecore UI
With the support of the features already implemented in Sitecore Author Toolbox Extension, my main objective was to refresh the Sitecore UI and give it a clean look that inspires confidence and is easy to understand for the end-user.
Here is the list of 10 things I got in mind when I started this project:
Give Sitecore a fresh look that helps the authors focusing on the most important: content.
Add space and contrast to the UI, content tree in particular
Get rid of the ribbon!
Provide a unique way to search for content and media
Keep and re-emphasis common actions (Create, Preview, Save, Publish, Unpublished)
Remove duplicate and all the unnecessary items that clutter the UI
Add a breadcrumb
Build a new user menu under your profile picture
Make the UI retina-display compatible by using smooth fonts and SVG icons
Final touch, make it your own by choosing any accent colour and help people with vision deficiencies (Protanopia, Deuteranopia, Tritanopia, Achromatopsia) as suggested by Adam Najmanowicz, to be checked with the latest Google Chrome
The new Sitecore UI
I’m happy to show you the first screenshot of my work. This new Sitecore interface is still under development but it’s already available in the release 2.2 of my Sitecore Author Toolbox extension as an experimental feature. And yes, you can already give it a spin on your Sitecore instance (8 and above) by installing Sitecore Author Toolbox 2.2 🙂
The new Sitecore UI
Create an item
The new Insert action
Panels
Languages, versions and Quick info will open in Panels
The content tree
Content tree navigation + tabs
The ribbon
You can still show the ribbon
Sitecore Search
Action bar: Preview, Save and Publish
New action bar
Choose your colour
New action bar
New user’s menu
Conclusion
Although it’s available as an experimental feature, I managed to implement most of the 10 ideas I had in mind.
What I’m missing the most now is feedback from users. This feature has been shipped in Sitecore Author Toolbox extension 2.2 but is deactivated by default. (See screenshot down below)
Please activate it in the extension options, and send me your feedback on twitter, it would be highly appreciated! Thanks for reading 😉 Ugo
Option menu, where you can activate Experimental UI