This content originally appeared on Jonnie Hallman (@destroytoday) and was authored by Jonnie Hallman (@destroytoday)
I took a break from Cushion earlier this week (along with a cold turkey cleanse from Twitter) because I honestly wasn’t feeling healthy. I caught myself checking Twitter during any moment of downtime, which instead of giving my brain some time to relax, ended up activating my mind even more. The break from Twitter has worked wonders for me, so I started easing myself back into Cushion with some non-crucial low-hanging fruit. And there’s been one “feature” I’ve been wanting to experiment with for a while now—hotkey labels.
I’m a massive fan of hotkeys, and I love when apps implement them in a way that makes the UI more intuitive. Hotkeys aren’t always obvious, and aside from a cheatsheet of combos, one pattern I’ve seen emerge is inlining hotkey labels with their UI element. These labels automatically teach the user the keyboard-friendly alternatives to various actions throughout the app, but they also run the risk of cluttering the UI.
Operating systems are the classic example of displaying hotkeys in the UI, but the labels often only stashed away in the toolbar dropdown menus, which is safe. You rarely see hotkey labels within actually buttons in macOS, but this approach has definitely picked up traction in the web world.
I might be biased in saying that Stripe uses hotkey labels really well in the dashboard, but as a user, the labels blend right in and do a great job of informing me when I could perform a given action even quicker.
On the reverse end, there are some apps that go overboard, with hotkeys for everything, which can be okay, but it goes too far when labels are littered all over. Intercom is a recent example for me that went hotkey crazy by having a dedicated hotkey walkthrough. I do realize, in this case, that customer support is more hotkey-friendly since time-to-respond and ticket quotas are common KPIs for every support team. Given that I’m a hotkey advocate, I was actually surprised that this extreme focus on hotkeys actually turned me off as a user.
With all of this in mind, I started testing the waters with hotkey labels in Cushion. The catalyst for this new UI element actually came from a personal want. I recently added a dedicated “Edit” button to the timeline to make it clearer to switch into “edit mode” (whereas before, folks had to figure out that they could click the timeline to toggle). While I loved having an explicit button for clarity, I disliked needing to make the journey all the way to the right of the timeline to switch modes (which is quite a distance for my feeble office fingers on a 30“ monitor). I caught myself wishing I could simply toggle a hotkey, like I do with the terminal.
With a “why not?” attitude, I dove right in and added a quick label, modeled after the pattern that Stripe and others follow—a tiny label within a slightly contrasting box. This fit the bill for now, but actually looked pretty damn good! Now that my “Edit” button showed the hotkey (“e” for “Edit”), it’s clear that you can toggle the timeline mode by hitting that key. Then, when you’re in “edit mode”, the “Done” button includes an “Esc” label to indicate that you can hit the escape key to return to the main timeline.
The hotkey labels for this button felt really good, and completely blend in with the UI, but there were more hotkeys to label that might run the risk of cluttering the UI. After editing a workload in the timeline, a popover appears to either undo, save, or delete the workload. When I launched these actions, I included hotkeys under the hood to make them more accessible, but the hotkeys themselves weren’t obvious. Because of this, they provided a great opportunity for hotkey labels.
My hesitation here is that I wonder if I’m going too far in this case, with three adjacent UI elements including hotkey labels that are stacked with their icon and title. Along with the labels, I also made the titles bolder to bring more contrast between the titles and hotkey labels, which does look better, but I’m still on the fence. As a backup plan, I could also include a preference to toggle showing hotkey labels, if they become too much for folks. For now, I’ll follow up with users to see how they feel.
That’s all for today. Next up, I’m working on click & drag to create workloads in the timeline. It’s a doozy, but a fun one—especially considering I already laid much of the groundwork already with click & drag editing.
This content originally appeared on Jonnie Hallman (@destroytoday) and was authored by Jonnie Hallman (@destroytoday)
Jonnie Hallman (@destroytoday) | Sciencx (2022-09-12T12:23:00+00:00) Adding hotkey labels to the UI. Retrieved from https://www.scien.cx/2022/09/12/adding-hotkey-labels-to-the-ui/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.