Bulk editing feature for web application🤔

The bulk operation has become an indispensable feature for web and mobile application. We now can’t afford to waste any time on repeating the same action over and over again. To make bulk editing easier, most web applications are providing frequently-used features with quick access to single-action interaction. Popular bulk-edit features including delete, duplicate, recategorize (eg. move to another folder), change status (eg. add/remove the star, read/unread), block/filter, etc…

A screenshot of Gmail, you can definitely check yours to experience the overall user flow

As mentioned above, most of the features are designed with really simple interaction. The tasks are normally very easy to finish and only take one (or sometimes two) simple tap or click. Typically, this kind of interaction is built without following steps, the task will be accomplished with the press on the mouse (or tap on your phone). However, sometimes users will be asked to do a set of following actions, like when they move an email to another folder or even a confirmation step for delete/block/duplicate/etc.

These are well-known for users, so there isn’t much of a learning curve for them to get used to those simple bulk-editing features.

However, when it comes to actually edit customized values, there isn’t any widely known way. This situation depends, most web applications have their own editable attributes. A more customizable bulk editing was a feature that is in high demand for task board application, CRM, and a lot more management systems. Although there isn’t a systematic design guideline for this kind of bulk editing, designers have still come up with a bunch of solutions to provide an easier-to-use workflow.

There are two common approaches for bulk edit customized values (to clearly identify this feature, let’s just call it bulk-editing).

1. Inline editing on the data table

This is often used in data table designs. When the data are designed in the form of a table, it’s easier and clearer for the users to edit directly over the table, where they can see all the columns and compare the editing value with other value.

Shopify has provided the add-on app bulk editor using this edit flow. It created a table from selected products and allows users to bulk edit within the table.

screenshots from Shopify help center, showing how to bulk edit using their bulk editor feature

Another example is GoDaddy's online store, they also allow users to do inline bulk-editing within the table.

credit to GoDaddy help center

However, most of the inline-editing approaches are only grouping selected items and creating a table for users to compare data while editing. It’s not actually allowing users to update information in one transaction. As a table, it is clear, but not easy to use.

2. Override selected attribute only

Designers will encounter a whole bunch of issues to design the bulk editing flow. Is it necessary to display the old information to the user? How should the app show the old info? To save the new info, is it better to completely rewrite and override the old one? Or edit the old info? Apple once has this bulk editing feature for iTunes back to 2010-ish (they may still have it but hidden now).

credit to this question raised by Liam Johnson on ux.StackExchange.com

When editing the information, users are asked to check the checkbox first. This is for the system to understand which fields are the one to save, and which are not. However, although the checkbox is pretty obvious for some of us. It could be confusing for others. As designers, it’s necessary to understand that people are different. Our job is to make the design as simple as possible for everyone.

The iTunes design is revealing a new solution for us. Instead of asking users to manually check the fields, how about saving the changes only? But considering that users normally don’t follow the given assignment. In most cases, users will play with every field and change as many values as possible. This solution only makes sense if the web application is auto-saving. Otherwise, it is hard to identify whether the field has been changed or not.

From there, there are another solution invited to designers:

Edit one field at a time, add the desired field using the add icon, save the changes by clicking the save button, like this👇

In this case, users won’t be overwhelmed with all the possible attributes and information. And they can still access to almost every need they have.

Please shoot me with any questions or possible solutions to solve the puzzle!🤗