The UX Case for Integrating Accelerators in Your Designs
We’re talking keyboard shortcuts, not startup incubators
While I was learning Sketch, a colleague came in with his keyboard covered in the stickers shown above. He explained to me the stickers helped him learn accelerators in Sketch in under a week. Intrigued, I pulled up Sketch’s accelerators and invoked them where possible. Incorporating the shortcuts into designing was a game changer; I had spent years slogging through menus and hovering on toolbar icons with my mouse to create designs. Now my left hand had purpose, invoking functionalities through the keyboard seamlessly while my right hand finely adjusted pixels on the mouse.
Accelerators enhanced my experience using design software by making my work flow more smooth and efficient. As a user experience designer I was challenged with integrating accelerators into the application I am working on and I can see the potential accelerators have in improving experiences across the board. To better understand the best practices around this tool and bring value to other designers, I researched accelerators with the following questions in mind:
- What are accelerators and why are they important?
- How are accelerators currently used and what are the best practices?
- How can I implement accelerators in my designs?
- What do experts recommend when designing around accelerators?
As an introduction, let’s explore the background and value proposition of accelerators and frameworks to consider when using these tools in your practice.
Accelerators, what are those?
Accelerators are a series of one or several keystrokes that execute a command otherwise accessible in a menu, click, or other level of computing. They reduce the amount of toggling a user has to do between keyboard and mouse to complete an intended function. These shortcuts can also be a way of making function execution easier for the user which improves accessibility as well as efficiency for computer professionals and recreational users alike.
In the first text-based user interface computers, keyboard inputs were the primary means of navigation in the absence of a pointer or mouse. As GUIs and mice became ubiquitous, keyboard inputs stepped down as the main method of executing commands and were employed as shortcuts, typically used by the most skilled of computer professionals. For example, j and k are used as native application accelerators on some websites, like Twitter, to scroll the page up or down, respectively. These accelerators were once the primary method for moving up or down an information set before the introduction of the mouse.
Thus accelerators have a long history, with some keyboard shortcuts defined in Apple’s original Macintosh User Interface Guidelines still in use today. We will discuss handling the native operating system accelerators defined by the User Interface Guidelines in the second article of this series to understand the mechanisms of accelerators.
Accelerators = Accessible functionality
As designers, we should always consider the accessibility of our designs; what works for the most limited users will be usable by the masses. No other input method has the flexibility that keyboard input can accomplish or is universally supported and operable by people with different disabilities. If a functionality can be accessed through keyboard input, it can be initiated by keyboard users through any of the following methods:
- Speech input (which creates keyboard input)
- Mouse (using on-screen keyboard)
- Any assistive technology that create simulated keystrokes as its output
By means of accessibility, accelerators can increase usability and delight for all users by increasing their efficiency in using your application. In addition, usability in terms of ergonomics can make experiences better for vulnerable users while also preventing injury or discomfort for able-bodied users. Keyboards play an essential role for people who have:
- conditions that affect dexterity
- illnesses that cause pain and fatigue
- limited capacity for body movement
- temporary dexterity issues
When done correctly, accelerators will parallel users’ mental models of system functionality and thus be easily recalled. On top of a delightful experience in other parts of the product, users familiar with your accelerators system will be more engaged and likely be more willing to become returning customers.
Frameworks to keep in mind
In order to make accelerators useful in terms of accessibility and usability, the following frameworks should be implemented.
Focus
In order for keyboard shortcuts to be effective, the UI must communicate focus where the keyboard input can take action. The concept of focus indicators is useful in accessibility for all web experiences as well as 10-foot experiences. Focus is important in navigation of the screen, the next framework to be aware of.
Navigation
Accessibility users will likely rely on the keyboard and disregard a mouse; therefore when designing for keyboard accessibility it is important that all interactive elements are accessible using the keyboard only. Navigating must be sequential as the user must tab through all elements until reaching the link of interest.
Forgiveness
A framework that is crucial for any system, not just accelerators, is forgiveness. If focus can be moved to an item, it must be able to be moved out. Think “Undo” or “Back.” Providing forgiveness is an element of defensive design.
Take a look at the accelerators defined by Flickr. What do you notice about their shortcuts?
Simplicity
At their core, accelerators are shortcuts and should be simple. They are meant to make operations easier, keeping number of inputs at a minimum is key when assigning functionality to shortcuts. Simplicity in keyboard input also mitigates potential issues with ergonomics.
Takeaways
Accelerators can enhance user experience by providing more efficient and accessible methods of navigation and operation execution. When incorporating accelerators into your applications, use the frameworks of focus, navigation, forgiveness, and simplicity to maintain usability. Stay tuned for future articles covering best practices on creating accelerators, including constraints, popular patterns, and implementation through development.
Have you designed with accelerators before? Shoot me a message and let’s chat!
