Multi Selection Processing Status UI/UX

Question

UI Case

UI allows a multi-select option. There is no limit to multi-selection. Users can select from one up-to item in the range of millions.

Processing flow

When the User triggers an action based on the number of items to be acted, there will be a delay in the server. We have a standard rule from our backend. If the number of items is less than 300, all transactions will be done synchronous to the DB and the response will be given to the client. If it is more than that, we will queue the transactions and inform the User that the actions are queued. We receive the success of items one by one as a message when the queue is processed. Based on the message, we will update the UI, if the UI is in view. It will be smooth if the user is in the same view. Users will be able to see the items that are getting processed.

I am thinking of having a status widget where Users will be able to see the success status of their bulk actions. As our backend serves a very large user base, all operations are queued and transactions are committed. Users can trigger bulk actions and keep on working on the same or other parts of UI. There are no restrictions as of now. I want to present a better Ux with respect to items that are already under processing.

Example Consider the Outlook-like UI. You will have several folders and you can multi-select 10000 emails in a folder and bulk delete it. After triggering the action, you can move to another folder and keep on working. In this case, I want to give a better Ux. A status widget is one such solution. Other solutions are welcomed.

As of now, we inform the user that it is scheduled for action and will update the UI one by one after processing. Users won't be able to find which items are underprocessing and whether it is completed or not.

Answer 1

I thought your question was really interesting—there's a few considerations that might affect how you approach this solution, for example how high the stakes are (if this involves people's finances / medical information, versus a housework to-do list) and how long the wait time would be (something that's going to take a few second, minutes, hours or days). The main focus I would think about is how to communicate the system status to the user, so they know what is going to happen and what is already happening now at each point in time.

Making some assumptions, I put together this wireframe. At the top right we have activity log (couldn't think of a better icon at the time :'D ), notifications and profile. Below we have a data table. When the user multi-selects, an omnibar appears to confirm what was selected and the available action(s). This omnibar was chosen because even if I go to a different page, it still stays within eyesight / floats above the content.

With 35 items selected, we can assume that the action is executed instantaneously. If relevant to the row, then a status might appear for each item. This likely wouldn't be the case if the action executed was delete or export, but maybe for a situation where ownership is transferred, etc. Based on how high the stakes of the action as well, perhaps you'd want to let the user have the option of undoing this as well.

Handling over 300 selections would depend on the variance in timing, again if it was just a few seconds longer versus if the user should expect to wait a few hours or days. I wasn't too sure what you meant by the last two sentences, and if we can let the user know a certain % or total is completed, or if it's only on the page's UI directly, but you can get the general idea of the intention below. Basically it would be great to communicate in some way what the progress is and how much longer they have to wait, and what will happen after that (if any).

This is the design rationale behind some of the decisions. Other ideas include having an activity log, where the user can see progress or review past actions. This ties in to helping the user recover from errors, maybe restoring a previous version etc if the stakes are high.

I hope some of those ideas help! A few other designers and I had discussed this in more detail in a youtube video (though I believe I can't paste it here)—Our channel is Pencil & Paper Labs if you are curious. Take care!!