Let's discuss hotbar UIs, because I'm making one.

What is a hotbar?

You often see them in video games. Press 1 for some action. Press 2 for some action.

Examples communicate better than descriptions, so here's a simple interface example.

Hotbar UI

Why are you making this?

I want user data input in my app to be faster (hopefully easier) than the 100 other apps in the market space. I'm recommending hotbars for applications people need to use every day, for several hours maybe.

What's your question, Tyler?

Has anyone ran usability tests on hotbars? I've never even seen a hotbar out in the wild. But this looks promising ("experimental layout") https://v4-alpha.getbootstrap.com/examples/offcanvas/

So basically hotbars are new to the web. Let's discuss. What problems do you see with this, besides lack of familiarity? I really do see my app experience improving drastically with one, including the emotional benefit of autonomy when they can quickly switch between 6 different functions with ease.

  • The difference with web apps is you don't need to switch between functions as often as you would a game. Sure if I needed to switch between, reading a post, creating a post, commenting on a post, voting on a post, every few seconds then it might make sense to have hot keys to switch to them but I can't think of an instance on the web to do that except games. – DasBeasto Aug 29 '17 at 16:54

So hotbars have been out there for some time, BUT, like you mentioned not to web apps!

Keep a few things in mind:

  • You have to tell the User that you have this new function (the Hotbar)
  • Not everyone gets the idea of a hotbar - People who never played any games would refrain from such a new way of interaction and stick to the basic way
  • What exactly is the hotbar doing? (I don't see beneficial in your screenshot - except switching in teams - and that seems (without context) not worth it.)
  • Like you said hotbars make sense if users have to use them for a lot of time, but except for gaming, I see no use right now (in your example)

If you can provide more information on what it is supposed to do, maybe I can help more.


I'd think you'd need to use a keyboard shortcut key in addition to the number key (to make it harder for the user to accidentally bump into another screen) without overriding important browser functionality. On Mac, Command-1 will open the first tab, Command-2 opens the second tab, etc, so command key is probably not a good choice.

However, applications like the Google suite use the Control key for this quite well. You could title each section something like "Page 1" and put "Ctrl-1" as helper text, which makes the user aware of the pattern. It would need to be custom to each operating system, so there's a bit of work there. I think it's worth testing.


Hotbars are new to the web, but keyboard shortcuts are not. Of course, the average user doesn't typically use that sort of feature.

Really what you are talking about is a visual reminder of some keyboard shortcuts. There are studies and examples of keyboard shortcuts being used successfully. Here is a place to start: https://webaim.org/techniques/keyboard/accesskey

I'm not sure what your accessibility goals are, but you should keep in mind that screen-reader users would need to be aware of these shortcuts, as well. This is certainly an opportunity to improve accessibility and usability in your application.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.