De-cluttering the interface - a GIF'ed suggestion

[steveangstrom]

Issue Overview

The editor is very visually busy, cramped, cluttered and the positions of sibling interface elements are not optimal. The editor interface elements are styled obtrusively and dominate the content.

Expected Behavior

The interface elements should only appear when absolutely needed and should be as unobtrusive as possible when in normal writing mode. The interface should be clean and simple to aid writing and comprehension of the content.

Current Behavior

Currently the "Meta" controls (such as the arrows and bin) show on casual interaction (hover).
Currently the "Meta" controls are divorced from their functional siblings: move, delete and inspect are related and ought to be grouped.
Currently the editor-visual-editor__block is visually dominant with borders, dropshadows, etc. Having everything turned up to 11 this way is a cognitive demand on the user - a bombardment of controls over content.

Possible Solution

I suggest that the block shuffling interface on hover is too near the surface, and can be sunk to the interactivity level of the click. Hover is a "discover" action while click is commonly understood to be the "select" action and then next action is to act upon that selection.

Here is a GIF showing

• actions on click, not hover
• grouped similar controls
• less intrusive styling example

[karmatosed]

I ponder how much we can hide without causing users issues. It's a big ponder right? I would suggest we need to test and whilst this is a great exploration, I would be keen to see in testing what the boundaries are. We plan on focusing on that.

There are some existing tickets for the arrows and interface, that I think this falls under.

#2279 for example is a great place to start looking at this.

As such, I think labelling this as a question, leaving discussion open makes sense.

[steveangstrom]

I would say this post is more a design and UI suggestion than a question. I suggest the tag "design" is appropriate.

[karmatosed]

I think question works as gets discussion happening. I would also want to look at the testing and feedback from any tickets that come from #2279. Before jumping into this.

As a rule of thumb the 'design' label, ideally is something we've chosen to work on as a design. I'm also trying to get us to focus that a little with 'design feedback' and 'needs design' as design is such a wide term.

[mtias]

There have been several improvements at not showing extra UI when editing or hovering. Closing this but feel free to open new issues if there are further suggestions.