Design
 Completed

Description

Community Feedback

[UX][Proposal] Improvements for WYSIWYG macros http://xwiki.markmail.org/thread/ally2wvtzfezebks
[users] Making it user-friendly to edit pages with macros for new users (was Re: Need some Help & Explanations) http://xwiki.markmail.org/thread/rnhe6tl3x7snquz7

Issues

  • the include macro rendering is confusing because the user might think he can in-line edit the content
  • trying to delete some words in the welcome message results in deleting the macro
  • we need to make clear that the home page content is just using an include macro to display the content located in another place

Solution

  • Have all macros collapsed by default
  • Improve visual representation of macros inside the editor (blue background color always)
  • Add 'collapse all'/'extend all' functionality inside the toolbar
  • Make macros actions (edit, delete, expand/collapse, +custom) more visible

JIRAs

XWIKI-7948 Usability improvements when using macros inside the WYSIWYG editor
XWIKI-7949 Have all macros collapsed by default
XWIKI-7950 Improve visual representation of macros by differentiating them from normal content
XWIKI-7951 Have a contextual toolbar containing macro's actions
Issue type Issue stateXWIKI-7954 Have custom actions for certain macros/gadgets

Current

Default: Macro Expanded
current.png

Macro Collapsed
currentCollapsed.png

Proposal

1. Macros collapsed by default

Default: Macros Collapsed
collapsedByDefault.png
The collapse/expanded functionality could be also added in the toolbar in order to be more discoverable

Expand Macros on demand
expandedOnDemand.png
Even in the expanded form, keep the macro header and have a special background color for the content in order to show it's a macro

2. Macro Parameters

macrosNoParams.png
The macro's header contains at least the macro's name

macrosParams.png
We could also display some important macro params in the header (sorted maybe by relevance or dependent if there is enough place to display this information).
Adding params value to the header offers a better scanning and identification of the macros.

3. Macro Actions

Every macro should have 'edit', 'delete' actions + expand/collapse.
Some macros could add extended functionality like 'go to page' (include), etc.

Version 1
macrosActionsV1.png
on hover - inside the macro's header

Version 2
macroActionsV2.png
on click - as popover

4. Inline Macros

inlineMacros.png

inclineMacrosActions.png

Var 1: Showing headers (expanded state)

Var IM1 - with headers.png

Var 2: Hiding headers (expanded state)

Var IM2 - without headers.png

x. Idea: Nested macros

nestedMacrosCollapsed.png

Specially useful for macros like: {columns}, etc.

nestedMacrosExpanded.png


 

Tags:
Created by evalica on 2013/11/12 13:30
    

Get Connected