| Uxstatus | ||||
|---|---|---|---|---|
| ||||
Overview
Critique of the current design
...
The redesign of the current, preview-based editing into the Visual Page Editing of Magnolia 5 aims at providing a solution for all described problems while retaining all qualities of the existing implementation.
The
...
New Interface
The standard interface of Visual Page Editing shows two main sections. Most of the screen is occupied by a preview of the page with the well-known green bars marking the editable paragraphs. A newly introduced toolboxActions Sidebar on the right of the screen presents all actions and options applicable to the currently selected item and additional info on the item or the page as a whole. The toolbox itself. Examples are a comprehensive page status or an overview over available page versions. The sidebar improves the overall visibility of actions and options by providing them with both a clear location on screen and enough space to present their interface. It introduces flexibility and scalability to support current and future in that it introduces a single location to look for actions. It is flexible and can be extended by modules wishing to add complementary functions or data to page editing. The sidebar is similar in appearance and behavior as the Actions Sidebar in AdminCentral.
The new visual page editing is still targeting mouse input , but and has been crafted with touch devices in mind. While you can use this interface with a keyboard, Page Structure Editing has been specifically optimized for keyboard input and thus should be the preferred way to edit a page using keys only.
...
| Mockup | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
|
Concepts
Area editing
Visual page editing in Magnolia 5 keeps the edit bars introduced in earlier versions, but solves the cloud of bars by introducing Area Editing. The areas of a web page as defined by the web designer and introduced in Magnolia with STK templating are an excellent starting point to reduce the number of edit bars visible at any one time.
Please refer to the separate page on Area Editing for an in-depth description of this concept.
The
...
Actions Sidebar
Magnolia 5 adds a toolbox an Actions Sidebar to the page editing interface. It
...
- shows all applicable actions available to the logged-in user and defined on the currently selected paragraph or area,
...
- or on the page
...
- itself. This includes access to the clipboard and undo/redo
...
- .
- is capable of showing additional information on
...
- the currently selected
...
- element or the page itself
...
...
- shows notifications and provides access to the list of system messages
The toolbox replaces the edit bar dedicated to the page, which was shown at the top in preview-based editing in earlier Magnolia versions. The page properties are accessed using a regular page action. Page options like a language selector or information on page links have been extended and moved to the options rack. The button to return to AdminCentral has been replaced with a button in the Toolbox to leave page editing, which is also where the "Preview" button was moved to.
The toolbox also features a two-level control at the top for the selection of a target and a rack. The target may be either a selected paragraph, selected area or the page itself. The targets you may choose depend on which elements are currently selected on the page, if any. If a paragraph is selected, the target can be either this paragraph or the page as a whole. If no element is selected, then the page is the only valid target left. Once you've selected a target, racks become available allowing you to choose either actions or options related to your target.
The target selector solves the problem that showing both paragraph and page actions at the same time results in a long list of actions with similar sounding, but different commands. It also focuses the interface to the content element you're working with.
Note that while this concept may sound complicated, its day-to-day use actually isn't. If you select a paragraph on the page, the target selector is automatically switched to "paragraph". The same holds if you select an area. If you deselect any element or when you enter the page, the target selector is set to "page". The only time you have to manually switch it is when you've selected a paragraph, but would like to switch back to work on page level to e.g. activate the page.
Racks and Units
- contains a small box configurable by the user allowing to quickly identify the Magnolia instance
The sidebar offers a simple toggle control to switch between the page preview and the editing interface. Additional view options allow to customize what's shown and what's not. The top-most element of the sidebar visually takes up a theme used in other interface layers and acts as a place to show notifications. In the future, it will also host additional controls used to navigate layers. It also offers a close button to leave page editing.
The page edit bar still exists and may be extended to contain additional, customized controls - the page status indicator is merely shown as a placeholder for such functionality. Other than that, the bar merely provides quick access to the page properties.
The Units
Since the Actions Sidebar uses an Actions Rack to show the list of actions for the currently selected content element, it is also capable of showing additional information through the means of units. A A rack is basically an enclosure for mounting multiple modules. In Magnolia 5, a rack is a container for a basically arbitrary (but usually small) number of units. Each unit collects a number of UI elements logically and semantically belonging together, such as a language selector or an element representing the translation status of the current page.
The goals of the racks and units concept are:
- to offer a great overview of various aspects of a content element while keeping the interface simple
- to provide a scalable UI solution for adding functionality to pages, areas and paragraphs contributed by modules or future extensions
Actions and Options rack
The default configuration offers at most two racks: one for showing the list of actions applicable to the currently selected content element, one for showing options on the same. In both racks, the ubiquitous toolbar unit is available as well.
Options are preferences affecting the editing of the page, either actively by actually changing which version of the content element is edited or passively by providing the user with additional information on the content element such as by showing its status in regard to activation or translation. Options differ from settings found in the edit dialogs of a page or paragraph in that they do not affect the actual content, but only the editing of such.
More space in a rack
If many actions or options have to be shown and the space for showing them is not available (e.g. on small screens), the rack may virtually split and offer more than one page effectively doubling the space available for units. The rack then shows a page switcher control to allow accessing all pages. Note that the control shows up above the toolbar unit, which remains visible on all pages of all racks.
Uniform and expanding units
A unit may either use a single-state or a two-state interface. If a unit can provide a short overview of its core settings, but needs more space to show all values, it is dubbed an expanding unit and uses the two-state interface offering both a collapsed and an expanded view. In the expanded view, the unit takes over most of the space available in the rack and thus has plenty of space available to show its data. In the collapsed view, only the brief overview fits in. If a unit only needs one interface to show its settings, it is called a uniform unit and uses a single-state interface offering only the collapsed view.
The toolbar unit
The toolbar is a special unit hosting two global functions, namely the clipboard and global undo/redo. In particular undo/redo needs to be available at any time and independent of the currently selected content element. The toolbar thus is available at all times and at the exact same location. It even remains visible if a unit is switched to show its expanded view.
Appearance and functionality of the toolbar rack will be as close as possible to the part of the toolbar offering global functions in AdminCentralPlease refer to the page describing the Actions Rack UI component for additional details.