All views in Drupal admin pages require a set of tools that are presented to the user with a consistent visual style and page architecture.

The tools should include

  • actions, (usually, but not always, adding a new item)
  • filtering
  • sorting
  • searching
  • (filtering on a keyword using an autocomplete text field)
  • paging
  • bulk operations.

Since all of these things are tools to manipulate a view, they should be designed as a single toolset so we can improve discoverability, reduce anti-patterns and increase user efficiency.

This issue is a "meta, meta" issue since it references other meta issues. Not sure what the implications of that are but there it is.

The following prototype shows the functionality http://invis.io/R8F4K2BC

And here is a partial overview design of tables with the unified interaction pattern applied and anti-patterns removed

image

Files: 
CommentFileSizeAuthor
#9 main.jpg264.61 KBtkoleary
#3 main.jpg264.08 KBtkoleary

Comments

tkoleary’s picture

Issue summary:View changes

Added links

tkoleary’s picture

Issue summary:View changes

linked links

tkoleary’s picture

Issue summary:View changes

relinked

tkoleary’s picture

Issue summary:View changes

removed duplicate descriptions

tkoleary’s picture

Issue summary:View changes

added 1475204

tkoleary’s picture

Issue summary:View changes

added 1910896

tkoleary’s picture

Issue summary:View changes

added image caption

tkoleary’s picture

Issue summary:View changes

image

tkoleary’s picture

Issue summary:View changes

image

tkoleary’s picture

StatusFileSize
new264.08 KB
tkoleary’s picture

Issue summary:View changes

editied

tkoleary’s picture

Issue summary:View changes

edited image

tkoleary’s picture

Issue summary:View changes
tkoleary’s picture

Issue summary:View changes

added 2005166

tkoleary’s picture

Issue summary:View changes

added 2022297

tim.plunkett’s picture

Issue tags:+VDC

I have to say, swapping the sides of the operations and VBO checkboxes is one of the most disorienting things I've ever seen in a view.
Otherwise, I think it looks great.

heyrocker’s picture

I completely agree with tim. Checkboxes on the left is a standard used through pretty much every web app I could find which has a listing where individual rows can be selected (most notably email apps but also in others.) Swap that an operations back and I've got nothing bad to say.

I was following Bojhan on that. I was under the impression that it had been changed in another issue. I personally prefer them (bulk) on the left as well.

cweagans’s picture

+1 for swapping the operations and checkboxes back. That's really disorienting.

dawehner’s picture

tkoleary’s picture

@dawehner

Linking in the description.

BTW my base for this was work we did at Bad Camp.

tkoleary’s picture

Issue summary:View changes

added 1823608

tkoleary’s picture

Issue summary:View changes

added #1210980: Move pager above the page

tkoleary’s picture

StatusFileSize
new264.61 KB
tkoleary’s picture

Issue summary:View changes

removed #1210980: Move pager above the page (issue linked to itself!)

tkoleary’s picture

@heyrocker @cweagans @dawehner @tim.plunkett

Updated description image with operations swapped to current position.

tkoleary’s picture

One thing to note. The Pinterest style image grid in the grid view in files offers a great advantage to the user in that for images or videos with a variety of aspect ratios no part of the image is cropped, while a consistent look is also maintained.

This effect would require masonry.js. I am *not* suggesting that we add another library dependency to core. The reason I show it is that I think it's important to write the markup in such a way that plugging something like Masonry into the grid view is simple for someone creating an alternate admin theme or a module that leverages core admin views.

Related to #1903746: Replace the views grid table template with one using divs

klonos’s picture

klonos’s picture

Issue summary:View changes

updated image

tkoleary’s picture

@klonos

Right! Missed that. Adding to the designs.

tkoleary’s picture

Tagging with theme component library per Jenlampton

LewisNyman’s picture

Issue tags:+styleguide

We will need to consolidate these designs into the Seven styleguide

tkoleary’s picture

@LewisNyman

We will need to consolidate these designs into the Seven styleguide

Right. I pulled from the existing work to put this together but there are a couple of new patterns as well as the overall layout.

I think what's new is:

  • "Table" header for a grid view
  • List view/grid view toggle
  • Borrowing "removable pill" style from tags as a pattern for filters
  • Using the "small" button style for action links
  • Using masonry.js in media thumbnail grids (possible since views grids now use divs)
  • Operations on hover over image in media thumbnail view
  • Checkbox absolutely positioned in media thumbnails

The last three seem like they should be issues for media module though, and theme agnostic.

What do you think?

LewisNyman’s picture

We haven't had a chance to discuss the future of the Seven style guide beyond this initial implementation but the intention was to have the style guide become a constantly evolving resource of administrative components. After this initial phase the plan is to add more components in order to consolidate patterns found in contrib. I think anything that affects the administrative interface should be placed within the Seven style guide, we don't want these UI patterns to carry into front end themes.

Everything I see here fits really well with this vision, I think it completely belongs under the style guide initiative.

LewisNyman’s picture

Issue summary:View changes

...adding #2020449

LewisNyman’s picture

Issue tags:+Usability, +frontend, +CSS
tkoleary’s picture

Both filters and actions could probably use select 2 and in doing so be much more compact, efficient and usable.