<- Back to all posts

How we redesigned multi-selection in Ditto

Jordin Gardner, Jolena Ma
|
August 4, 2021

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.

Identifying the problems

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.

The old way of multi-selecting

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:

  1. The multi-select toggle wasn't easily discoverable. This meant we continued to receive support emails asking if we had a multi-select feature, and still had to watch painfully as users continued to click and edit each of 20 items individually to the same change.
  2. The idea of a multi-select "mode" was often unintuitive. Most people were used to more conventional patterns for bulk selection, like those found in Finder on MacOS or File Explorer on Windows. Most users eventually learned how to use the toggle, but even then, they found the number of clicks required to turn the mode on or off each time frustrating.
  3. Lastly, multi-select mode didn't allow users to select more than one component at one time. What if users wanted to select an entire block or frame? To select 100 consecutive text items, they'd be forced to click 100 times!

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.

Pinning down a solution

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:

  • People could quickly grasp how multi-selection works: as a design pattern users would recognize from other tools, keyboard shortcuts would be easier for them to pick up and discover.
  • We could eliminate inefficient extra clicks: users would no longer have to click the toggle each time they wanted to enter and exit multi-select "mode" — they could do it all from their keyboard.

We decided to go full steam ahead on adding keyboard shortcuts to Ditto.

Design considerations

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:

  1. Select individual items using cmd/ctrl. This directly replaces the existing multi-select functionality, allowing users to click and individually add text to their selection.
  2. Selecting a range of items using shift. This addresses one of the biggest drawbacks of the old method of multi-select: users couldn't select many consecutive items at once. With shift and click, the process of selecting entire frames or blocks is reduced from tens or hundreds of clicks to just a few!
  3. Clearing the entire selection using esc. Instead of having to scroll to the top and click the toggle to leave multi-select mode, users can now clear their selection with one press.

Because the corresponding functionality of cmd/ctrl-select and esc already existed in Ditto, they were relatively straightforward to implement. `Shift`-select, on the other hand, opened up a whole new range of possibilities for users. It ended up requiring more thought, especially around what should be included in a shift selection, given that Ditto's project view is highly customizable and allows you to create Blocks, hide text, and more. Ultimately, we decided to go with a philosophy of "only select what users can see." For example, if a user selects text items above and below a collapsed hidden section while holding down shift, we don't include any of the hidden text items in that drawer. If a user switches pages, we'll reset their selection so they can start anew.

Technical challenges

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!

How it works

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 (Mac OS) or Control (Windows)
  • Shift
  • Escape

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.

What's next?

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!