[META] Design new UX for Panels IPE

User testing notes

Larger issues

Managing content separately from managing layout was confusing. i.e. Users didn’t understand why, when using the Edit mode, clicking the configure gear on a block threw them out of the editing screen that they were on. They also didn't see how to place a block from Place Content, finally deciding they needed to do that in Edit mode.

The tray wasn’t generally scalable. i.e. The large number of blocks available was hard to wade through. Testers wanted a search bar to search for the content to add. The configuration tray ended up taking over the whole page and the user lost context of what was being edited and where it was going.

Users were confused by seeing three columns when they selected a two column layout because of sidebar blocks in the theme.

Smaller fixes

Users expected all available layouts to be visible in the tray at once.

• Configurable categories of layouts

Users also expected the system to more clearly convey if the layout they selected was the one that was currently being used on the page. Instead they got no visual feedback.

• Highlight the selected layout anywhere it appears
• If a layout doesn’t provide configuration just submit the form

No move icon on the blocks meant that users didn’t know they could drag the block

• On hover, surround the entire block with dashed line and change cursor to indicate that the whole block is movable

The arrows and select box confused users further in that regard.

• Remove arrows to just use the Move menu

Minus does not mean remove

• Should be X instead of -

The users did not notice the layout select box in the block configuration before placing content.

• Should be able to drag blocks and skip the initial configuration step

The text field for title should automatically override the title if changed (The override title checkbox was always completely missed.)

• Panels Bug that Override title is unchecked but field still shows
• Would be nice to just override if the text is changed, otherwise use default

The lack of text on the Edit and Save buttons were confusing when placed next to Layouts and Manage Content

• Add text to Edit and Save.
• Only show Save when something can be saved.

Interaction Wireframes

Here is a link to the current wireframes I've been working on:
http://aienea.axshare.com/#p=start_1&hi=1

I'll publish any changes directly to that url.

Any area in the wireframes that currently has an interaction available is highlighted in green.

For me the best way to summarize the problem the mockup addresses is: "The IPE in D7 and D8 doesn't actually in-place edit anything.". We move Panels/Blocks around the page, but the actual editing (and configuration, style application, etc.) has always happened in a modal or tab-flyout.

For the "Create a new list" section of the mockup, anyone want to port SimpleViews to D8? :-)

Fwiw, that part gives me some pause. We're choosing where we want something, picking the something we want, placing it, and then configuring it. This gives us decidedly less control over the user experience, and also has some technical ramifications (like bail out for instance). Being able to do an in-modal (or whatever) wizard gives us a lot more certainty over the user experience, and they can bail at any time without affecting our page.

That being said, a "SimpleViews" like solution would be pretty cool for this.

Eclipse

"Panels Bug that Override title is unchecked but field still shows" has been addressed in #2682993: IPE badly mangles complex block forms :)

So I wanted to add my efforts to this as well. We can debate where we want to go, but I didn't want this to disappear into the ether.

Eclipse

I just wanted to say thanks for all the work with the mockups, I actually kind of like that direction and how most of the operations are in the toolbar.

I think this would help the user's existing mental model for how to work with the site.

My (brief) takeaways from EclipseGC/DyanneNova's mockups are:

1. We need inline add buttons
2. We need to integrate with Toolbar and move away from the current bottom-tray
3. Inline forms, either as inline modals, in the actual Block div (IPE-Mock-12.jpg), or anywhere where you can see the Block and the form at the same time
4. Other modules like Page Manager should be able to easily add onto the UI to provide features like like Contexts
5. More actions need to start from editing, not from the tray

As I've discussed in IRC, one of my goals over the next few weeks is to research better Toolbar and Outside In integrations for Panels IPE, which would include integrating these mockups into my design. Hopefully I'll have something shiny to look at in the coming months.

Awesome, just as an FYI here, we cannot do ANYTHING that touches experimental core code. I'm sure we all know this, but I wanted to explicitly state it.

Eclipse

Agreed, I would wait to commit anything until Outside In's offcanvas.js moves into the core/misc folder.

Re-titling to make it clear that this is about creating a new UX for Panels IPE, as opposed to incremental improvements to the current UX. I'm planning to make some incremental improvement issues in a little bit :-)

Is this being done or is everyone focusing on core instead?