Bulk Editing Design for Web Applications
Examples about bulk editing in different use cases
Bulk editing is a powerful tool which is very popular in “complicated product” world. It’s designed to help users finish their tasks quickly and reduce muscle work. In web and mobile applications design, bulk editing is used to support a variety of actions, such as editing, labeling, changing states, moving, or deleting.
So… let’s start from understanding users’ needs about bulk editing.
In Designing from both sides of the screen, author Ellen Isaacs talks about how to analyze user behavior to determine whether a feature needs to be built and how prominent it should be in UI, when there are lots of interactions and features on the screen.
When bulk editing is a required feature from users, it means they want to use bulk editing as a convenient tool to batch process tasks. Take a simple example, in Gmail, there are 7 options for bulk editing, Mark as read, Mark as important, Mark as not important, Add to Tasks, Add star, Filter messages like these and Mute. Mark as read and Mark as important are the top two actions that can help users clear up “unread noise” in inbox, or mark important emails to remind themselves about important information.
In Inbox, bulk editing changed to the following interface (Inbox e.g.), and there’s no longer a “Mark as read”, instead there’s a “Mark done” option. Once a user bulk marks emails as done, they will go to the “Done” folder automatically .
It confused me a lot in the beginning, but once you get used to the flow, it’s fine to mark emails “done” instead of “read”, but I’m not the only one who prefers “Mark as read” to “Done” (See interesting feature request from Steve Jester), maybe I just want to reduce noise instead of choose to delete them, and also, “read” is not equal to “done” to me. Inbox has really fostered a habit in me to better organize things, while I still might prefer the simple and crude way of managing emails that I was using all along.
And this example goes to show that analyzing user needs is the most important step to design bulk editing feature on the page.
Ellen Isaacs also mentioned about “Design the UI first”,
“Some people think of the user interface as the surface characteristics of the application… but the UI refers to everything affecting the user’s experience, which has implications all the way through the system….”
Very interesting point, right?
If we ask Google about bulk editing UI, there is a bunch of different design examples in result. Material design data-table is one of the good examples, it’s simple, and it supports searching, sorting, multi-selecting and bulk editing in an elegant way. You can also find Angular material or Material for Bootstrap to support current framework.
But could Material data-table solve all the problems and bring the best experience in all cases? The following examples may be helpful for you to get an idea.
1.When bulk action is IMPORTANT
Exposing checkboxes all the time can encourage users to use bulk editing; on top of that, you can add a hover-on tooltip on checkbox to draw more attention from your users. Once they click on any of the checkboxes, bulk action bar or bulk editing buttons pop up to let users know what they can do with the things they selected.
In the following example (e.g 01), checkboxes could still be checked after user executed any bulk actions (of course, except delete), so user can continue with next bulk action, it’s very powerful for interfaces that want to encourage users to use bulk editing to get jobs done faster.
Also, if users usually execute one bulk edit in one time, the interaction could automatically uncheck all objects after executing any bulk actions to avoid extra clicks to deselect all. (see e.g. 005 from Inbox)
Bulk action buttons or bars always appear at a stable and obvious position, with the same interactive pattern across all pages. The more easily user can learn how to use it, the more frequently they’ll use the feature, and the faster and easier they can get their jobs done.
2.When bulk action is not used all the time, and there is a need for room for other important UI in same position
When there are many features that need to show up on the page, and bulk editing is not a principal feature, it could be hidden from the main interface. The user however can still find this action by interacting with the page.
In this use case, there’s no need to expose checkboxes all the time, and need some actions to trigger the checkboxes (such as hover on the hidden checkbox position or click a button to show all the checkboxes). It’s more like asking users to switch to bulk editing mode to execute bulk actions, and they need a way to “get back to the normal state” as well.
Example 1: Hide checkboxes behind “Show checkboxes” switch, users can use bulk editing only after they turn on the button. To get back to normal view, they need to click the button again or manually uncheck all.
Example 2: Inbox requires users to hover on label icons to trigger checkboxes, and once any of the boxes are checked, it exposes all checkboxes and turns header into bulk action bar. To deselect all, users need to hit the back icon to go back to normal view (or manually uncheck all boxes). Also, once users execute any bulk action, it will deselect all and go back to normal mode automatically.
3.When bulk editing is NOT important and may cause risk
When bulk editing is super complex with plenty of actions, and may lead to unwanted consequences that influence more than one users, some products choose to hide it deeply and make it hard to use, to make sure users fully understand what they are doing. (user who has patience and knowledge to process these complicated flows must be experienced, and in desperate need of doing it)
JIRA uses an interesting way to allow users to do bulk editing on their latest version of product. There’s no checkbox on the ticket itself, but users can use the shift key plus left-mouse click to multi-select tickets (and only in backlog mode), then right-mouse click to trigger a menu with bulk editing options, and users will be sent to a page which contains 3 steps and tons of options to specify what they want to edit.
Overall, based on different use cases and user needs, we can design bulk editing in different ways to balance multiple features on page, and help users to meet their core goals quickly and easily.
