Improved navigation in the Contentful web app

April 23, 2015


No editor likes a CMS which is uncomfortable to work with. An excellent CMS consists not only of a solid tech foundation – it also comes with an interface which doesn’t get in the way of content creators (or, better yet, a pleasant and enjoyable interface). As here at Contentful we care about both aspects, editors' contentment is what we strive for.

Motivation for redesign

Recently we've reconsidered the approach to navigation in the Contentful web app, where content editors spend most of the time. Currently opening every item – a content type, an entry, an asset – produces a new separate tab within the app. While, of course, that's all good for multitasking, we've learned that many users lose their way, get confused with too many tabs open, and can't figure out where an individual tab stands in the overall workflow. Some commented that they would have two sets of tabs now, one from the browser and another from Contentful. Also, in some cases the app would crash because all these tabs would occupy too much memory. Alas!

Less tabs is no tabs

To help editors (and everybody else) navigate through the app, we said goodbye to tabs. No more tabs. On top of that we added breadcrumbs – a line which indicates where the user is: for instance, Blog → Entries → Better navigation in Contentful web app (industry experts like calling this pattern breadcrumbs, apparently inspired with a fairytale about cannibalistic witch by Brothers Grimm).

Every label in breadcrumbs is clickable, naturally, enabling moving between parts of the app faster, while also improving a user's understanding of current location within the app. This approach to navigation is a well-established pattern and it’s been on the web long enough to prove its effectiveness, so we expect this change to make the user experience more comfortable.

We hope that having only one tab available will bring order and reduce confusion. It probably should also help editors focus and concentrate on a specific task. However, hyper-busy multi-taskers can continue doing things the old way – just use multiple browser tabs instead. They're just as good.

The top bar

Another interface element which needed to be reworked is the navigation bar at the top. We moved the space selector to the left, making it more visible and accessible. The app sections are now reorganized and properly labeled with all the same goal: to simplify the editorial process for both newcomers and long-time users.

More to be done

As good as navigation gets, there's more to improve every day. We are planning some other changes in the very foreseeable future. In particular, the navigation will be enhanced further. First, we’ll add predictive redirects which are supposed to intelligently guess what the user is about to do next and display the relevant view: say, after uploading an image, it’s very natural to continue editing an entry. Whenever appropriate, the app will do it automatically so that the user doesn’t have to find and click that link.

Another idea we’re developing is helping editors understand relationships between entries. Often times published materials don’t stand on their own: an article can point to a previously published article, or it can be a part of a recurring series. We want to visualize these relationships so that content creators can get a better understanding of their content and its structure – a map of sorts, if you will. We’d love to hear from you, too, if that’s something you would like to see.

Talk to us, we listen carefully

We're telling you this because we would love to hear your opinion, and, ideally, engage you in fruitful conversation. We advocate and believe in user testing and feedback-driven product development, so do let us know if you're struggling with something in the app or have an idea how to make the experience better. Personal stories matter a lot more than cold numbers and accurate statistics.

If you would like to contribute to the product by participating in user testing, that’s fantastic. You’ll get (hopefully) an agreeable experience and a little gift, along with the pleasure of looking at work in progress and meeting the people behind Contentful. Please get in touch either via our contact form or our dedicated user testing form – whatever strikes your fancy.

About the author
Don't miss the latest
Get updates in your inbox
A monthly newsletter to help you build better digital experiences with Contentful.
add-circle arrow-right remove style-two-pin-marker subtract-circle