Edit a page using the structure view

Story

Magnolia lets me edit a page based on its structure. If I edit a page like that, I don't see a preview, but I'm presented with a structure view showing the hierarchy of paragraphs that make up the page. I can select areas or paragraphs and edit them normally by using the edit dialogs. I can also assign names to areas and paragraphs, but if I don't, Magnolia creates a name for me based on the type of the paragraph.

I can, of course, also add new paragraphs, move them around and delete them. I'm used to being able to copy & paste elements and undo and redo my actions; I can do both in this structure view as well. Likewise, I can also edit the page properties and activate and deactivate the page from the editing view.

I can leave editing at any time. If I leave, I can choose to forget all changes I made and revert the page back to how it was before I started editing it.

Editing using the structure view is great for complex pages and it's actually best if I want to only use the keyboard for editing. It's also my preferred mode for quick input of data: I often know how the page will look and I just want to quickly fill in my story; I find editing using the page preview to be too slow and cumbersome for that. I usually have a last glance at the preview before I submit it to our reviewer - that's why I can choose to preview the page at any time while in editing the structure of the page.

Description of desired behavior

Start editing

Page Structure Editing can be built into any list or tree view showing pages. It is launched by selecting an action ("Edit structure of page" in mockups below). This transforms the row such that it looks similar to the green edit bars of Visual Page Editing - the idea is that the two are so reminiscent of each other that the user immediately recognizes that she's starting to edit a page.

At the same time, the actual page structure appears using a smooth slide-in transition. It is visualized using a tree of paragraphs and areas containing them. The resulting image is a combination of a site-level and one page-level tree; it looks as if the user had simply expanded the page to have a look at its inner workings.

Select a paragraph or area

Selecting a paragraph or area is working the same as selecting an element in a tree described on the page describing navigation of trees. It works well for all input methods; Page Structure Editing thus fills the gap for keyboard users, which may find Visual Page Editing unsuitable, too cumbersome or too slow to use.

Deselect a paragraph or area

You may deselect a paragraph by selecting it again or selecting any other element such as another paragraph or page. It depends on the interface into which the structure view is embedded whether deselecting a paragraph automatically selects another element such as the site containing it - this is not defined by this behavior description.

Work with a paragraph or area

Add, edit and move a paragraph

Adding, moving and deleting a paragraph is done by executing the corresponding action in e.g. an Actions view or any other means for offering actions. If you choose to edit a paragraph, the edit dialogs open in an overlay as would be the case in any other place where you could edit a paragraph.

No in-line editing

As of now, we're not defining any in-line editing in Page Structure Editing. Experiments have produced some interesting results if in-line editing is concentrating on core fields only, but an actual implementation will be left for a future version of Magnolia.

Work with the page

Working with a page starts by selecting its associated row. There must be no difference in functionality if a page is being structure edited or not. Elements such as the list of actions or the preview must be exactly the same. An exception is the action to start editing the page structure, which shall remain visible, but get disabled as soon as editing starts.

Work with multiple pages at once

It shall be possible to edit multiple pages using their structure view at once. This allows to e.g. copy and paste paragraphs between them. It may become confusing to have many pages opened for structure editing at once, but there's actually no risk, since you do not have to remember to click on the "Done" button to save changes - see UX:section on discarding changes below.

We'll have to verify if the number of simultaneous edits should be limited in number to avoid too much confusion. It might make sense to keep only two edit interface open at any time and close all others.

No edit options

In contrast to Visual Page Editing, there shall be no edit options available when editing the page structure. Such options must instead be handled by the surrounding interface embedding the structure view.

As an example, an embedding page list view may offer a language selector to view a different language version of the entire tree, which also affects page editing. Or the site setup may actually require to choose a different tree to work on a different language version.

Preview the page

The currently edited page may be previewed by using the "Preview" action in the list of actions provided by the surrounding interface. Please consult the page describing the preview for all the details of how previewing works. Note that the user shall be returned to the exact same place in structure editing upon leaving the preview.

Exit editing

You may leave page editing at any time by clicking or tapping on the "Done" button in the row associated with the page you're editing. The structure view of this page only is closed smoothly using a transition.

Discard all changes

You may discard all changes you've made to a single page by choosing an action ("Discard changes" in the mockups below) available on the "Done" button. This wipes all your changes you've made to the current page (only) since you've started editing it.

Note, however, that changes are always saved automatically - there shall be no explicit save operation required to confirm changes or make them permanent. In particular, it shall not be required to click on "Done" to get anything saved. Clicking on that button closes the editing interface and merely bereaves a user from the possibility to discard his changes later on.

To summarize, you shall still be able to discard changes, if:

• you edit a different page
• you simply preview the page

But you loose the possibility to discard all changes once:

• you click on the "Done" button in editing or the page preview
• you activate or deactivate the page
• your session expires or you log out

Please note that this feature may only be available if a new type of content versioning planned for Magnolia 5 will actually be delivered.

Other remarks

Notifications and messages are actually not part of this description as they are entirely taken care off by the UX:embedding interface.

As has been mentioned in the UX:story already, Page Structure Editing is especially suitable for keyboard-only users. Navigating its structure is basically defined by tree navigation. Keyboard commands for opening and editing items are defined in a corresponding section in the usage summary, additional commands explicitly defined for Page Structure Editing exist as well.

Mockups

Start editing, working with a page

Working with one or several paragraphs