Magnolia 5 Navigation: All Action Is Here

Designing a navigation is a challenge. More often than not, you end up with cumbersome context menus and bulky toolbars instead of a smooth and intuitive solution. The more complex a product is, the more demanding planning the navigation gets.

Magnolia 5’s navigation differs a lot from what you know from 4.5. “This is mainly due to apps... and the action bar”, UX designer Andreas says. We already hinted at this in a post two weeks ago. Today, we'd like to show you what the Action bar is all about, and how it works on iPad as well as on your desktop.

Until now, you had two options to call actions in Magnolia CMS: right-clicking the item would lead to a context menu with all possible actions; the toolbar at the bottom of the screen would give you the most common or important actions to choose from. For Magnolia 5, there's only one space where you can call actions on an item: the Action bar. The Action bar consists of different sections that contain groups of actions. These groups can be open or closed, depending on the height of the browser window and on the user's needs. The bar itself can be collapsed as well and then only displays its icons. The bottom part of the Action bar contains a preview of what you're working on – more on that exciting feature later in this article.



For iPad, the Action bar has a different look and feel: here, the actions are represented by touch-targeted squares, containing the actions. Only the group’s most important actions are visible in the closed state. However, you can open the group and show its other actions by simply tapping or swiping on the main action. Another notable fact about the iPad Action bar is how it was implemented: our developers simply changed the CSS and some JS; the HTML of the tablet and desktop action bars is the same.




Why this new navigation?

1. Invisible toolbar
The Action bar exemplifies an important principle of usability: if you work with an item, the actions you can call on it should be immediately obvious. Our previous toolbar failed in this respect: tests and trainings showed that editors didn’t really notice it. Its function – to give access to the most important actions – was hardly used. All it did was take up space on the screen.

2. Scalability
An important goal of the new navigation was scalability. Module and app developers can extend the action bar with their own commands. Groups and sections can be reconfigured to match the needs of a different setup. The action bar can grow alongside the evolution of the product, as we will add more features to Magnolia 5 over time.

3. Wide screens
The Action bar is part of an effort to design a wide rather than a high interface, to accommodate to the trend of screens getting wider. The Action bar saves you space on the vertical axis. Consider that Magnolia CMS runs in a browser, where you often have a lot of elements at the top of the screen – having even more horizontal elements for the Magnolia navigation would have overloaded a lot of people's screens.

You might find yourself thinking “Sounds good, but won’t the distance all the way to the right-hand side be too long?” We agree that this might throw some users off at first. However, we think that the Action bar's advantages simply outweigh the distance issue. That’s especially true when users learn new apps. “But we actually do have plans to bring back the list of common actions, we’ll just let the new navigation settle in a bit, first”, Andreas explains.

Due to its position on the screen, the Action bar is also the ideal place for the thumbnail Preview action: while browsing through lists and trees, an image of the currently item selected lets you get a quick preview. This works for pictures and videos, but also for web pages.

We are excited to show you more details of our new UI at the Magnolia conference in September. It's not too late to sign up!