Limit Mouse Movement

Photo by Ricky Kharawala on Unsplash

In the US, addiction to pain killers is an epidemic. Most people know these powerful prescriptions are dangerous, but like all medication, it’s a balance of risk and benefit. And when you’re in serious pain, it’s worth rolling the dice.

The same logic follows for products — if you address a big enough pain, users will put up with a lot. This is why sometimes an early, crappy version works well enough to power growth — but that’s a precarious position for a product to be. Markets don’t stand still and given a choice, people don’t just want software to solve their problem, they want that experience to feel natural and easy.

One of the things that makes something feel fast on a screen is a clear hierarchy — importance articulated through size, weight, and color. Grouping related items and actions together. Done thoughtfully, we can limit the thinking a user has to do — avoiding the hunting and pecking required to move from one action to another. Designers have known these things for a long time, but that doesn’t mean every product takes advantage of this awareness. In products as in life, knowing is not doing.

In our effort to make something effortless, a useful principle is Fitts’s Law. It was first coined in a 1954 paper by a design-savvy psychologist. There’s a bit of math to his ‘law’, and sadly I’m no mathematician, but good news, you don’t need much precision to get value from an approximate understanding of the concept, so here it is.

“The time required to rapidly move to a target area is a function of the ratio between the distance to the target and the width of the target.” — Fitts’s Law

When designing interfaces, I apply this concept by understanding that bigger buttons are easier to hit and working to minimize the mouse travel between elements used together.

Let’s bring this idea to life! Since I’ve been writing a bit, we’ll look at link handling in three products: Apple Notes, Medium, and Substack. As writing tools, they each have their own editors and handle adding links in unique ways. Let’s take a look at their different approaches to linking.

Apple Notes:

Here is the editor — just a blank canvas.

You highlight your text to add a link, but then what? Nothing lets you know what to do next. There isn’t even a button on the toolbar for links. So, you dive into the “Aa” formatting menu, maybe linking is there, but alas — nothing.

Ok, there has to be a way, so you keep looking and eventually find the link option way up in the Edit menu. Imagine your mouse pointer moving up from the middle of your screen to the far upper left of your monitor — I’ll wait.

Ok, we’ve found ‘Add Link…” and once selected, a blocking modal emerges from the top of the editor. So move your mouse back to center stage, paste in your link, click ‘ok’, and voila!

Not easy, and lots of moving around, but hey, you made it! You just won’t want to do it too much.

Substack

Ok, same task. Adding our favorite link.

Good news, it’s much more obvious here. Even before I highlight my text, I can see the little chain icon — it’s right there with all the other tools I’ll need. So I highlight my text as before, head up to the menu, and select the link icon.

Once I click that link icon up pops a cute little menu. But now, it’s now inside the editor instead of where I clicked on the toolbar, and if I’m writing deep in the article, it’s a fair bit of cursor travel back to where I’m writing, but hey, easy enough. Most blogs are short and at least it’s next to where I want the link! But maybe we can do better?

Medium

Ok, so again I highlight the text where I want to add my link.

Whoa! Magic. The menu of options is right where I clicked! I even see my familiar chain link icon and so I confidently click it.

Magically, the toolbar menu is transformed in place into an input field for my link. I didn’t have to go anywhere! Near zero mouse movement. This is some special stuff. I paste, hit enter, and just like that, I have my link. Pretty slick indeed.

—-

Linking is a simple example, but if you use these three products for any length of time, you’ll feel repetitive moments like these. They accumulate into a design that feels fast and comfortable or one where you have to jiggle the key just right and pump the gas pedal to start the finicky engine. Both will work, but one is a joy to use. Products are an accumulation of decisions.

I’m fairly sure every designer knows about Fitts’s law, so what gives? Shouldn’t we see more of what Medium does and less of Apple Notes? Why don’t we? If you build products, it’s worth thinking about, but in the meantime, limit mouse movement.

Like articles on building product? Subscribe to receive by email.