Monday, March 18, 2013

Magnolia 5's Editing Flow


One of the essential things of our new user experience and something that has been on Andreas’ mind a lot these weeks is the editing flow. We want to ensure that an editor can edit and preview content and assets swiftly, with minimal rupture in the editing process. That's why designing a flawless editing flow is of utmost importance.

Editing view and preview


In Magnolia 5, every item has an editing view and a preview, which open in the same tab. Below, you can see the example of a contact. Note that this is but a mock-up of the design. You can compare it to the (work-in-progress) of Magnolia 5's user interface in our image gallery.


On the left, the preview displays every detail of the contact, all the address and contact information it contains and where it’s currently being used. This is also where we’ll show a history of changes in a later release. By contrast, the editing view on the right focuses on all aspects of the item that you can actually edit.

To switch from preview to editing view, click on "edit item" in the action bar. To return to the preview, either save your changes by pressing the “save” button or hit "cancel" to discard them. Additionally, both views can be toggled between tabbed and full-screen view.

Same same, but different


While different, both views also share some facets of their visual appearance to avoid disorientating the user during the switch. We do this by defining visual landmarks or cues you immediately recognize. They can be found in similar positions in both views - in the example above, they are marked with orange rectangles. A good example for such a visual cue is the thumbnail image prominently located just below the title bar.

Example: previewing and editing assets


Let’s have a closer look at another example. Here’s the editing view of an image asset managed by the new DAM coming with Magnolia 5:


The title of the header looks like a dialog header. As a matter of fact, the entire form resembles our new dialogs. That makes it easier for users to identify key elements of forms placed in dialogs and on tabs, such as the “cancel” and “save” buttons. Below the header is the thumbnail of the image that you’re editing, one of the visual cues we’ve mentioned. By the way, the “edit image” button next to the thumbnail will open our cool new image editor - we’ll tell you more about this at another point in time.

Now here’s the preview of the same image asset:


You notice the similarities immediately. While there’s an additional tab named “Uses” listing all instances where this asset is being used, the rest of the view is structured similarly to the editing view. One major difference is the action bar on the right-hand side, which contains all actions you execute on the asset.

Multiple edit sessions at once


You might have noticed that one key feature of our new editing flow is that it allows you to have multiple edit sessions open at the same time. The pen and eye icons in the tab instantly visualize what view or state a tab is in. This makes seamless switching and copy-pasting between tabs significantly easier. No longer will you have to keep several windows open when editing a multitude of content - the tabs and their icons will keep it all in one place.

What you can expect later on...


This is just the first take at our realigned editing flow. With the changes we’ll deliver for the Magnolia 5 GA release, we’ll make sure that all aspects of a content item can be viewed and edited. But there’s more to this than might be apparent at the moment. Obviously, a switch between views is still a somewhat heavy operation, so that’s something we’re going to tackle in the future. Direct in-line editing is on our roadmap as well. Our goal is to make editing ever more seamless, faster and enjoyable in Magnolia. The new editing flow is a first, solid base we can continue to build on.

If you’re curious about what awaits you in the next six months, check out the Magnolia 5 roadmap. Additionally, in the months leading up to Magnolia 5, we’d like to continue sharing what we’re currently working on UX-wise. There is an enormous amount of things to consider, discuss and build for the UX team right now, since our new user experience is what will shape Magnolia 5 most substantially. Want to follow us on the journey there? Subscribe to the RSS feed of this blog and follow us on Twitter.

No comments:

Post a Comment