Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Changed: reviewed and updated all sections; mockups still outdated
Wiki Markup
{uxstatus:review}
Uxstatus
reviewreview
Mockups out-of-date, possibly description as well

Story

I can preview a page at any time, whether I'm currently editing it or visiting it in AdminCentral. The preview shows the page precisely as being eventually rendered after publication and is fully functional. It provides me with an overview of the current page status and allows me to also view different versions and variants of the same page, if available. It even provides me with actions: I can activate or deactivate the page as an editor, I may be able to directly accept and reject changes as reviewer. If I'm an editor, I can change to page editing from the preview as well.

Best of all, the page preview offers me to shrink all interface elements to a tiny cube - great for presentations and final reviews.

Description of desired behavior

Differences in interface

The page preview uses the same interface elements and layout used by Visual Page Editing as described in the conceptual overview. The Toolbox is showing actions and the page status.

The main differences are:

  • The Edit options rack is replaced by the Status rack to emphasize that this layer mainly answers informational needs.
  • There's button to change to page editing instead of one for previewing the page.

Notifications of system messages look and work the same as in Visual Page Editing.

The visual appearance of the Toolbox shall be visually less dominant compared to its appearance in page editing, where it also references the colors of the edit bars. In the page preview layer, colors used for editing must not be used for main interface elements.

The Action and the Status rack

The Status rack mainly hosts a Status unit capable of presenting the current page status and selectors for previewing different versions and variants of a page. The Action rack mainly shows page-level actions not related to editing. Good candidates for such actions are the activation and deactivation of a page for users with publishing rights.

Minimized Toolbox

The Toolbox can be shrunk to a minimal size to support previewing a page with only very few interface elements visible. The only commands available in this minimized state are a button to exit the preview and one to show the entire Toolbox again.

Mockups

...

{uxstatus}

h2. Story

I can preview a page at any time, whether I'm currently editing it or only opening e.g. in AdminCentral. The preview shows the page precisely as being eventually rendered after publication and is fully functional. 

It also provides me with an overview of the current page status and common actions to e.g. activate and deactivate the page. If I'm an editor, I can change to page editing from the preview as well.

Best of all, the page preview offers me to shrink all interface elements to a tiny cube - great for presentations and final reviews.

h2. Description of desired behavior

The page preview uses the *same interface elements and layout used by Visual Page Editing* as described in [the conceptual overview|Visual Page Editing conceptual overview]. [The Actions Sidebar|Working with page content and the page itself#Actions Sidebar] is used to show actions and the page status by default. However, the visual appearance of the sidebar shall be visually less dominant compared to its appearance in page editing, where it also references the colors of the edit bars. In the page preview layer, colors used to mark editable elements must not be used for main interface elements.

{mockup:Preview page|2}

By default, the [Actions Rack|The Actions Rack] used by the sidebar contains two units. The List of Actions unit mainly shows page-level actions not related to editing. Good candidates for such actions are the activation and deactivation of a page for users with publishing rights. The Status unit mainly displays the current publications status of the page.

*Notifications of system messages look and work the same* as in Visual Page Editing.

h3. Collapsing the Actions Sidebar

[As in page editing|Working with page content and the page itself#Collapsing the Actions Sidebar], the sidebar can the collapsed to only use minimal screen estate.

{mockup}