:Tangerine: Design Bites: ๐Ÿ“‹ Multiple selection and batch editing


Design Bite posts cover a feature, question or topic for the Folio UX/UI. We encourage you to give constructive feedback on what we present, so we can adapt the system if necessary, to make sure it will work for you in practice. :slight_smile:

#:tangerine::fork_and_knife::tangerine: Todayโ€™s menu: :clipboard:Multiple selection and batch editing

When designing FOLIO we are working on general interactions and elements whose UX design will be present multiple places throughout the platform. Today the design bite is about one of those general interactions - selecting and editing items on a list, while being able to preview an item at the same time.

Multiple select keyboard shortcuts:
MAC: Command + click for multiple selection and shift + click for contiguous multiple selection.
PC: Ctrl + click for multiple selection and shift + click for contiguous multiple selection.

There are :two: ways of entering batch edit mode, when selecting items.

:one: The first way is to select more than one item using a keyboard shortcut. After more than one item has been selected, the list goes into edit mode automatically. In edit mode checkmarks appear by each item. The user can check items on/off and select/deselect all - actions/options are revealed at the top of the list.

Because the checkmarks in edit mode show which files are selected or not, an item can be clicked on and then previewed, the clicked item is clearly highlighted. Being able to preview items can give the user certainty that correct items are checked on/off before executing any actions.

When items are checked off and the user clicks on an action, a dialog is shown asking the user to confirm or reject this action. If confirmed, the action is executed and a toast is shown informing the user what just happened - on the toast the user has the ability to undo the action.

Animated representation of the interaction.

:two: The second way to enter edit mode is to use the โ€˜moreโ€™ icon at the top. Taking the future into consideration, this is how to access batch editing on a touch device.

Animated representation of the interaction.

As we want to make Folio a system that works well in the real world, feel free to leave a comment and share useful things you have learned. Tell us how we can improve. :slight_smile:


I am a huge fan of keyboard shortcuts - the less I have to use the mouse, the happier I am. - Paula Sullenger