Uber Design Challenge 1: Multi Selection

Design challenge for Uber Design Internship

Extracted Prompt: Problem

Revising OS X to support multi touch without the use of a keyboard but with continued support for a mouse. Start by focusing on design tools like Sketch or Illustrator

Use Cases

• Selecting from lists of items
• Selecting from icons in a folder
• Selecting from objects spread out on a canvas in a design app
• Selecting contiguous and non contiguous objects
• Work with overlapping objects

Constraints

• Intuitive or easy to explain
• Quick and easy to perform
• Customizable to some extent like other OS X gestures
• Only touch pad: No keyboard
• Support for both contiguous and non contiguous objects
• Should work with a regular mouse too, not just the trackpad or the magic mouse

How does multi selection work currently on OS X?

Multi selection works either by clicking on an empty spot and dragging a rectangular selection over the different objects on the canvas or by using shift/command click to select multiple non contiguous elements.

On the trackpad, doing a single click and dragging or a double click and dragging performs the same functions.

How does multi selection work currently on Touch based devices?

• By long pressing and then selecting: Photos on iOS
• By checkboxes on windows tablets
• By pressing one object and holding it and using the other finger to press other objects: Keynote/Garageband on iOS
• Multi Select button: select multiple items after enabling the toggle: Photos on iOS

Solutions Exploration

I started thinking about possible solutions that can solve the design challenge. While doing this I focussed on a few things.

1. Whether it works with all the use cases
2. What advantages it has
3. What disadvantages it might have

Exploration of possible solutions for the multi selection design challenge

Here are the four solutions that I came up with:

1. Long click on one object to enable multi selection

Similar to how it works in touch devices, long clicking one object highlights the other elements allowing you to select others using the rectangular selection or by clicking on them. When you click on an outside area, it completes the selection. Clicking outside again deselects everything.

Advantages

• Extends functionality already on touch devices
• Maintains existing single selection controls as well as rectangular selector
• Allows distant multi selection

Disadvantages

• Clicking outside to complete selection might not be intuitive

2. Change selector to a lasso

Instead of having a rectangular selector, make the selector on dragging a lasso that you need to complete after moving across the objects you want to select.

Advantages

• No additional control needed
• No delay calculation required

Disadvantages

• Users not used to this odd selector shape
• More cognitive load when trying to select widely distributed elements across the canvas

3. Two-Finger Click (right+left click)

If a click is performed by two fingers, it allows selection of multiple elements instead of one and works with the rectangular selector as well.

Advantages

• Two click as a replacement for shift/command key
• Still intuitive since used to pressing one key
• Maintains existing single selection controls as well as rectangular selector
• Allows distant multi selection

Disadvantages

• Might be difficult to make a rectangular selection by dragging after two clicks on a trackpad
• Might conflict with alt-click for certain people

4. Have a multi selection toggle button

Have an in app or on screen toggle button that enables or disables multi selection.

Advantages

• Button as a replacement for shift/command key
• Maintains existing single selection controls as well as rectangular selector
• Allows distant multi selection

Disadvantages

• Placement of button in every app is difficult and globally requires putting an additional control everywhere where it’s easily accessible.

5. Pause between selection

Have a one second pause before ending the rectangular selection so that if you resume dragging from another empty point, you add to the selection.

Advantages

• No additional control needed
• Maintains rectangular selector
• Works as an alternate foe command click on distinct widely spread objects

Disadvantages

• One second pause may be a hindrance when people don’t want to select multiple items but only items within one rectangular selection.

Which solution is better?

The solutions can be categorized as ones that extend existing functionality and ones that change the functionality of existing selection techniques.

The best would probably be ones that extend existing functionality so that they are still intuitive and have less disadvantages.

Thus, the first solution which enables multi selection after a long click would be the best since it extends from the functionality in touch devices and does not conflict with any other functions.

The next best solution would be the two finger click because it still maintains a lot of the functions and is still intuitive because its similar to shift+click.