Use overlay/modal when adding/editing and then returning to same page

We encourage users to post events happening in the community to the community events group on https://www.drupal.org.
tsvenson's picture

A saw EclipseCG's session at DrupalCon Munich where he demonstrated the great improvement work he has done to Blocks and Layout for D8. I am really looking forward to be able to start experimenting with that.

However, the demo also showed a typical case for where we can greatly improve the usability, and UX feedback for site builders when, as in this demo, adding a new block from the library.

As it works today:

1 - Click the "Add block..." link
2 - The library page replaces the page
3 - Pick a block and you get to a third page
4 - Do some setting and at some stage you are returned to the page in step 1

The problem I have with this is that there is no visual feedback anywhere that I am in a multistep wizard, nor how many steps I have to go through before I am returned to the page I started on (In this case the page I clicked the "Add block..." link on).

This scenario are found in many places when configuring features in Drupal, including the Field UI in Drupal 7.

What makes it even more confusing is that the same form is often used both when adding a new item (block or field for example) as when editing them. That together with the lack of visual feedback about being in a multipage wizard makes it very confusing.

What would greatly improve the site builder UX, including visual feedback, here would be if both the adding of new and editing existing items would open in an overlay/modal on-top of the page it would return to. That way I will have a clear visual feedback that I will be returned to that page when done adding/editing.

If it could also be added a header on these add/edit wizard that says "Adding a new block - step 1 of 3" or similar it would remove the remaining confusion for me as a site builder.

These two changes would actually not require any changes to the adding/editing form components, just that they show in an overlay/modal instead of replacing the page.

This could even be expanded to be used for other things as well. For example when I am working on a content type and adding a media field that needs a new image style. Now I need to go to a completely different place on the site.

From: admin/structure/types/manage/blog_post/fields
To: admin/config/media/image-styles/add

I also need to reload the content type editing interface to get it to show the new style.

If the same overlay/modal approach would be used there the process would instead be:

1 - Select the "Add new style" option for the image style drop-down menu in the CT Field UI.
2 - The add new style opens in a overlay/modal on-top of the CT Field UI page
3 - When done adding the style the overlay/modal closes and also triggers the field setting to automatically make the new style the selected one

Here too, nothing in the adding a new image style edit form needs to be changed, just where it shows up.

This would greatly improve the site builder UX, particularly when it comes to simplify the workflow and as a result allow a more focused work with it.

Usability

Group organizers

Group categories

UX topics

Group notifications

This group offers an RSS feed. Or subscribe to these personalized, sitewide feeds: