From Counter-Strike to keyboard shortcuts

Jeremy Vuillermet
Engineering Lead
FacebookTwitterLinkedin

I come from the world of competitive video gaming (won a world cup on both Counter-Strike 1.6 & Counter-Strike: Global Offensive). In every competition, I always used the keyboard and mouse in combination. In fact, in most competitive games — like Fortnite, League of Legends, and Starcraft — this is the standard.

In video games, you’re using the keyboard and mouse for different things, but they both have their value: The keyboard has a lot of keys so you can trigger a lot of actions, and the mouse is the most precise device. This is true whether you’re pointing at enemies or dragging rectangles in a presentation.

Jeremy Vuillernet Counter-strike champion Pitch

The quick menu, which is also called the command palette, command center, or even the Command+K menu, is a menu where users can type to search for various actions to do in an app. It has gained a lot of traction recently thanks to tools like Superhuman, Slack, and Linear, who brought powerful shortcuts with keyboard-first interactions to the masses.

One of the things we’re starting to see is that for many people — including us at Pitch — the quick menu has become almost synonymous with keyboard shortcuts. Don’t believe me? Almost everything you read about quick menus will contain a section about shortcuts. Take this episode of Intercom on Product: The title of the talk is keyboard-first, and the first question is about the quick menu.

Quick menu ≠ keyboard shortcuts

It makes sense that we associate them with one another, as they play well together. The quick menu is keyboard friendly, and it’s also a very good place to show and teach shortcuts. The problem with tying them together is that we miss opportunities by only focusing on the keyboard.

They don’t rely on each other, let alone achieve the same function. An app can have a powerful quick menu without any shortcuts. Inversely, an app can have a lot of powerful shortcuts without any quick menu. The Intercom podcast discusses the rising trend of command-line interfaces that have born a new breed of productivity apps, ones that offer “shortcuts to superpowers.”

It’s true that keyboard shortcuts and the quick menu fall into the same productivity-helper category: Both of them are designed to help you achieve your action quicker. The quick menu makes it faster to find an action; the shortcut makes it faster to execute an action.

Introducing Pitch’s quick menu

At Pitch, my team’s goal is to find new ways to make it faster to create better presentations, and one area we felt had potential was the quick menu. Presentation tools serve many different functions, and to keep our user interface simple and attractive, we can't show every single option on the screen. The quick menu would give us the ability to bring all of the features together in an efficient and searchable interface, so users could quickly access actions like changing the status of a slide or inserting an element like a text box.

In the beginning of designing Pitch’s quick menu, we were focused entirely on the keyboard. So much so, that in some ways, I felt we were falling into the trap of building a “Superhuman of X.”

We took a step back and started by asking what our users needed. When we did, we found that different tools have very different needs. On one hand, you have modern, collaborative productivity tools like Slack, Superhuman, and Linear, and on the other, you have design tools like Figma, Sketch, and Canva.

Pitch sits at the intersection between these two worlds — and that’s where our magic is — so we built a CMD-K interface that played into both strengths.

Tools like Superhuman and Slack are typing-focused: When you're writing emails, notes, or messages, to be efficient you usually need both hands on the keyboard and there's minimal mouse interaction. This is not true for most design tools.

For Figma, Photoshop, or even Pitch, the mouse is a powerful tool. When creating a presentation in Pitch, you are mostly interacting with a slide, or what we sometimes call the canvas. Similar to design tools, the canvas allows you to add, move, resize and rotate objects by directly manipulating them. The precision of the mouse (or any pointing device) makes it a far better companion than the keyboard for these sort of actions.

Early on, as we were prototyping Pitch’s quick menu, we saw users were using their mouse to interact with it. It made sense, since you regularly need to put your hands back on the mouse after triggering an action such as adding an element to your slide.

Making a mouse-friendly quick menu

After understanding why the mouse was important, we began to think about how we could embrace the way our users were interacting with the keyboard and mouse to unlock additional value. Ultimately we invented a few new concepts on top of what currently exists. The two most significant were single-letter shortcuts and submenus.

Single-letter shortcuts that can be used with your mouse

To go back to video games, you don’t find a lot of shortcuts that require modifiers like Command and Shift. The reason is simple: More keys make it harder to type, requiring more effort and attention to get right. We use single-letter shortcuts like “S” or “J,” instead of Command+J, Command+O or even complex shortcuts like Command+Shift.

We were also thinking about prioritizing single-letter shortcuts on the left of the keyboard. Those are easier to use and closer to the natural position of the hand. As an exercise, with one hand on the mouse and one hand on the keyboard, try to hit the “I” key without looking at the keyboard. Now do the same with “S.” Which one are you more confident hitting?

Have you ever wondered why the most popular shortcuts don’t start with the letter of the word?

popular keyboard shortcuts
Instead, we have Z for undo and X to cut.

The reason is that these shortcuts were chosen due to location, not based on spelling. The position is actually more important than the word themselves. All these little details we take for granted were actually designed a long time ago so we can be efficient with one hand on the keyboard and one hand on the mouse.

Single-letter shortcuts mean you don't have to play Twister with your fingers to trigger a shortcut.
Submenus to help build habits

Submenus offer filtered lists to give you the most relevant options for whatever you’re doing at that moment. So, for example, let’s say you press S, you will then see a submenu with all of our available shapes.

The benefit of this is you don’t have to search, and you can directly access what’s most relevant to what you’re working on in that moment. In a way, this is similar to a context menu (also called a right-click menu) as it narrows down the list of possible actions to the ones that are specific to the current selection. For submenus with more items, we can still show the search input but we move the most common actions to the top which makes it easy to reach with the mouse.

Without the submenu, you could only use one shortcut per key, and we would run out of keys to use pretty quickly. But with the submenu, you can reuse the same keys at different times. For example, when pressing A, we open the assignment submenu. We can later reuse A for “arrow” when inside the Shape submenu. With more possible combinations, features don’t have to fight for the best shortcut.

The best part? You don’t need to learn shortcuts

The amazing thing here isn’t just the seamless way that the keyboard and mouse complement one another, it’s that these moments are also educational for users. Users learn iteratively. It starts with using the quick menu, then the submenu, and then the shortcuts. Most of the time, users do this without even consciously feeling like they are learning at all.

This is really significant because it offers accessibility to people who may be intimidated by learning all the shortcuts.

If you find yourself adding a lot of rectangles, you’ll likely find that you begin using the S ⇒ R combination without even realizing it. Of course, you can still directly type "rectangle" and get a rectangle, but many users just naturally begin to use the combination.

Our quick menu wasn’t built for power users only; it’s meant to make every type of user feel like a power user. Pitch’s quick menu offers the ability to choose. If you aren’t a shortcut person, it’s okay! You don’t need to memorize everything, and shortcuts are easy to discover, even if you never plan to press Command+K. By building for both types of users, Pitch makes it even faster for teams to collaborate on presentations.

Conclusion

The bottom line? Just because something is on-trend doesn’t mean it will work for every type of app. It’s important to consider the context of your product and your users’ existing expectations. That's why we front-load user research — speaking with users, observing their existing behavior, and eventually sharing prototypes of our work — and spend time closely analyzing the data once something ships. We want Pitch to be a wow-worthy experience for presentation novices and pros, so we take our time to nail the details. It's still early days for the quick menu, and there's a lot more fine-tuning to do, but we're already seeing the fruits of our labor. People who would never consider themselves shortcut users find themselves saving a massive amount of time by using their keyboard and mouse more effectively. We can't wait to show them what we're working on next!

Interested in working on features like this? If you want to join our team, check out our open positions or reach out on Twitter.

Like the article? Spread the word
FacebookTwitterLinkedin