2

Material Design spec for the List Component states:

"Repeating actions

Avoid displaying a repeated supplemental action in tiles, such as a share action in every tile.

Toggles, such as stars or pins, are exceptions because they provide unique information about each individual tile."

If you have multiple supplementary actions (like copy, delete, print, preview) which are the same of each item in the list, what is the best way to allow users to access them?

What I've done at the moment is included only 1 additional supplementary action on the list item and made the user open the list item to access these additional actions from the Toolbar component on that page. 1 extra fits on mobile:

enter image description here Source: Material Design Spec on List Component

Options for Showing Multiple Supplementary Actions on a List

I'm considering the following options to allow users to access more of the supplementary actions from the list view:

Option A: Add next most common supplementary action(s) to the right hand side of the list. I am going to hide these on smaller than phablet so that the list item will still comply with MD specs on mobile devices.

Option B: Add selection control to Toolbar on list so that user can select multiple list items to execute the supplementation actions on - for example delete, copy. This would avoid repeating the same supplementary actions on the list...this is illustrated as a selection pattern in the spec here: enter link description here

I'm leaning towards option B as it will allow users to execute the supplementary actions on multiple items in the list and it is more consistent with the spec as it avoids repeating the same actions in the tiles - however I'm under pressure to just to option A as users had something like this before in our Bootstrap app....

Background

I have a Material Design web application used on desktop and mobile - it is adaptive and responsive but we are trying to keep the codebase the same for all devices as much as possible. Here are example screens (there are different types of content some have more supplementary actions than others):

List view - primary action is to open in edit mode, secondary action is to delete (most common task after editing):enter image description here

Edit - additional actions available here from the Toolbar.enter image description here

1 Answer 1

1

This is not one of Material Design strongest points, to be honest. But the recommended guideline is to use a contextual menu.

Contextual menus dynamically change their available menu items based on the current state of the application.

Menu items that are irrelevant to the current context may be removed.

Menu items which are relevant but need certain conditions to be met may be disabled. For example, the Copy menu option becomes enabled when text is selected.

See example below: enter image description here

and open state below: enter image description here

However, it may be a bit overkill on desktop, resulting in lots of kebab menus that require 2 interactions when you have lots of space to add the icons and make them visible at all times.

Anyways, this is what you should do if you want to comply with Material guidelines. But always remember: these are just guidelines, so feel free to work around these guidelines or do not follow them at all. After all, user testing will tell you the proper path to follow, no matter what Material says (hint: you may find that Material design has serious usability issues on desktop, and sometimes even on mobile)

1
  • Oh I didn't even consider doing that as I thought the spec was pretty explicit in stating that you couldn't do that on lists: "Primary and supplemental actions (such as play, zoom in, delete, and select) may open a subsequent view, such as a card. They do not have a submenu or an action overflow menu."
    – Meli
    Commented Jun 23, 2017 at 4:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.