0

I have a situation where the current UI is set up in a left-hand navigation that contains a tree structure containing folders and their contents. The right-hand side of the application is where the user can work with a file that has been opened from the left-nav. This is similar to the way Eclipse IDE is set up in terms of folder tree on left, workspace on right.

The current ask is to have a "batch" mode in which the user can perform bulk actions on the tree structure. Currently, users can modify a single file at a time by clicking on a small down arrow next to each item, but this is super slow and annoying to power users. Suggested actions are Move, Copy, Delete, and a number of other more complex actions. They have asked that checkboxes next to each and every item in tree not be persistent all the time as this would cause too much visual clutter.

As this is a web application, what would be the best way to go about designing this? Would having a "batch mode" toggle button be best which would trigger checkboxes next to every tree item and then present the user with a dropdown option of what they wish to do with selected be best? Or, would having the user CTRL+click items in the tree to select multiple and then right clicking to perform a "bulk" action on them be best (not sure how I feel about this as we are a web application and I'm not sure this would translate well).

mockup

download bmml source – Wireframes created with Balsamiq Mockups

1

It's bad practice to assume every user is familiar with keyboard commands and contextual menus, because many aren't (I know someone who just found out about CTRL + C/V, and he's college-educated and has been using computers for years). While they can benefit UX by streamlining commands, your interface and functionality should be able to stand on its own.

That being said, your idea of a "batch mode toggle button" makes sense in this context. Many software applications that have many rows of data (mail clients, task trackers, etc.) have such a feature.

The following is an example of how most of them work:

Standard Header

No checkboxes are present, to reduce visual clutter as you mentioned.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Select Toggle On

Checkboxes would be revealed next to each folder/item in the tree as necessary, with the available options revealed somewhere in the interface.

mockup

download bmml source

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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