Problem/Motivation

The UI for filters and bulk operations on listings (content, files, comments, users and more) are inconsistent and not very pretty.

Content:

Comments:

Users:

Proposed resolution

Lets make these pretty & consistent!

  1. You are here: Explore visual design options
  2. Decide on a direction
  3. Implement

User interface changes

Pretty & consistent UI pattern and design for filters and bulk operations on listing pages.

API changes

?

Data model changes

?

Comments

yoroy created an issue. See original summary.

yoroy’s picture

yoroy’s picture

yoroy’s picture

yoroy’s picture

Version: 8.2.x-dev » 8.3.x-dev

Drupal 8.2.0-beta1 was released on August 3, 2016, which means new developments and disruptive changes should now be targeted against the 8.3.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

yoroy’s picture

Version: 8.3.x-dev » 8.4.x-dev

Drupal 8.3.0-alpha1 will be released the week of January 30, 2017, which means new developments and disruptive changes should now be targeted against the 8.4.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

ckrina’s picture

Assigned: Unassigned » ckrina
FileSize
40.32 KB

For now, the closest thing that I've seen in the Seven Style Guide is this for fieldsets. So I'll try to work in that direction during Drupal Dev Days in Seville.

Fildset proposal on Seven Style Guide.

ckrina’s picture

Assigned: ckrina » Unassigned
Issue summary: View changes
FileSize
83.41 KB
85.44 KB
98.76 KB
95.75 KB

It looks like there are several issues regarding a new design for filters and bulk operations. So I'll try to do a quick summary here:

A. This ones are active but working on isolated elements. Perhaps a design decision has been made without taking into account all the elements, so I created an image where we can see all elements playing together.

Only local images are allowed.
Only local images are allowed.

B. This other ones have completely different proposal for this pattern.

Only local images are allowed.

I'd suggest we decide first a design taking into account all the elements on top (main action button, filters, VBO and results list) and the other design solutions. Once we agree we could close the older issues and continue working on the small pieces. We could talk about it during the next the Usability meeting.

xinyuma’s picture

Besides the visual elements, I am actually thinking of the placement of these two functional areas.

For filters, it is logical to place it at the top, since in most of the cases, people first decide what they want to see then see it.

For bulk actions, users normally first select the items then perform the action, maybe it should be place below the content overview?

ckrina’s picture

Assigned: Unassigned » ckrina
FileSize
47.21 KB
107.16 KB
187.06 KB
163.58 KB

In the last UX meeting we agreed that the 2 designs approaches are good and play well together, but some adjustments are still needed (like margins, etc).
Also we needed to know the different situations we need to give a solution to. After looking around an standard profile with Seven I found 3 general situations:
- Pages with filters + operations
- Pages only with operations
- Pages only with filters. Inside this, we have:
- Several filters
- Standalone filters

Another thing discussed during the call was to find the minimum filters needed for each situation and maybe remove some of them. The reason is that we would simplify the UI and if someone wants those filters they can easily add them again because they're views now. So I'll create a list with all this pages and its filters to we can review and decide for each situation if we really need to remove or not any filters.

Next step will be to find a general and unified design solution for this 3 situations. I'll work on that.

And thank you @xinyuma for your feedback. I agree that in long forms having the submit button below has sense, but we don't always have long forms. Right now I'm not sure what's the best solution so I'll do some research.

yoroy’s picture

yoroy’s picture