When we first launched the multi-select feature over a year ago, it quickly became an integral part of users' workflows in Ditto. Users were now able to take bulk actions on text: mark a bunch of text as final once it was approved, hide all the text that wasn't being worked on, and more. They could organize new projects and manage large amounts of text much more quickly and easily.
Recently, we launched keyboard shortcuts to make multi-selecting even simpler and faster! In this post, we go behind-the-scenes and share more on how and why we built the feature.
The original method for editing multiple text items centered around the concept of a multi-select "mode." Users could activate it by clicking a toggle in the upper-right corner of the screen. Once the mode was turned on, users could click on an item to add it to their selection. The mode could be disabled by clicking the toggle once more, which also cleared out the selection list.
With the mode's initial release, we accomplished our primary goal: allowing users to batch edit text and significantly speed up their workflows. However, while the function of bulk-editing was useful, we quickly saw that there were a few issues with the experience of actually using multi-select:
Armed with all of this feedback (and more), we set out to redesign multi-select and solve all of the same problems without these drawbacks.
To investigate how we could improve multi-select, we looked at how our users were behaving, especially those that were using Ditto for the first time. We saw a number of users intuitively trying to select multiple text items by holding down the shift, command, or control keys as they clicked.
This behavior was consistent with what we knew about how multi-select behaves in many other modern software tools.
After some additional consideration, we realized that keyboard shortcuts had the potential to solve the major problems our users encountered with the original mode:
We decided to go full steam ahead on adding keyboard shortcuts to Ditto.
We knew keyboard shortcuts would be a significant improvement upon the current UX of multi-select. However, we didn't want to alienate users who had already taken the time to learn and get used to our multi-select "mode."
As a result, we found a middle-ground: we would continue displaying the toggle so existing users weren't caught off-guard. Clicking the toggle, however, would open a modal introducing the new way of multi-selecting using shortcuts.
We decided to build out three keyboard shortcuts:
Once we mapped out what keyboard shortcuts for multi-selection would actually look like, we realized that implementing those changes under-the-hood would be more complex than we first thought. The concept of a multi-select "mode" wasn't just present in our UI; it was baked into the underlying logic of our code. While we could build out keyboard shortcuts on top of our existing multi-select mode code and get the feature out faster, the implementation would be clunky and introduce significant technical debt and rework down the line.
On top of that, determining which actions showed up in the Edit panel for any specific multi-selection was tricky. Each of the three possible actions (attach selection to Ditto component, create a Block, hide from view) has its own separate logic, and can be displayed or not depending on what combination of text item types are in a selection. For example, if a selection has a text item that's in a Block and a text item with a variant value filled in, none of the three actions are available.
After several conversations and attempts to work with the existing code, we decided to bite the bullet and take on a larger refactor. While we'd still show the toggle in the UI (to ease the transition for current users), we'd fully transition the backend logic away from a multi-select "mode" and towards the new paradigm. We also cleaned up the code for displaying actions in the Edit panel and separated the logic for each action to mirror the actual UX.
In the process, we were able to clean up other parts of our code, catch several bugs, and even kick off conversations about other important refactors!
The first thing you need to know: multi-select is no longer a mode that needs to be manually turned on. The state of the toggle will continue to reflect your actions as you work within your project, but you can think of it now as a simple visual cue instead of something that you need to directly interact with.
Second of all, there are three primary keys that drive the new multi-select behavior:
Command/Control
Hold this key while clicking an unselected text item to add it to your selection. Hold it while clicking on an already-selected text item to unselect it.
Shift
Hold this key while clicking on an unselected text item to select a range of text items. Hold it while clicking on an already-selected text item to unselect a range of text items.
Escape
Hitting this key at any time will clear any selections that have been made.
We've got plenty of other quality-of-life improvements on our roadmap, and we can't wait to share those with you as they get released.
Feel free to bookmark the new keyboard shortcuts guide for reference, and let us know what you think of the new multi-select behavior! Is this going to improve your existing Ditto workflow? Do you have any ideas for how we could make things even better? We'd love to hear from you!
