Keyboard Layouts and Their Place in the Web

Most people I know use QWERTY. Many people have never heard about other keyboard layouts. How come QWERTY became the most popular keyboard, despite the fact that it might be not the most comfortable to use?

QWERTY layout was designed by Christopher Sholes, one of the first inventors of typewriters in the US. He obviously needed some layout for his typewriter, and the first thing he came up with was placing letters in the alphabetical order:

This keyboard was modified by Sholes and the typewriter was sold to the company E. Remington and Sons, where engineers finalised this keyboard and created modern QWERTY. The “DFGH” part shows us its inheritance from the initial alphabetical order.

Even though there is a theory that QWERTY was designed to be slow to prevent internal clashing of typebars, but it doesn’t seem to be true as some very common bigrams as TH and ER are placed very close together and typed with different fingers, thus can be typed very quickly.

There are also a lot of regional variations that make QWERTY more comfortable to use and where some letters are swapped or added:

However, Sholes' typewriter was not the only typewriter to be invented. The 19th century was very fruitful in this regard. For example, Reverend Rasmus Malling-Hansen invented the Hansen Writing Ball in Denmark in 1865.

This typewriter might look peculiar, but some people even said that it was more convenient for typing than flat keyboards. Interestingly, this typewriter was used by Friedrich Nietzsche, german philosopher, when he started having problems with his sight, but unfortunately his typewriter was damaged during transportation and he didn’t enjoy his experience.

Another example of a newborn typewriter is the Blickensderfer Typewriter.

It was invented in 1891 by George Canfield Blickensderfer in the US, and it was portable and full-keyboard typewriter. It contained only 250 parts, compared to the 2500 parts of a standard typewriter, which made these typewrites cheaper and more accessible.

The Blickensderfer Typewriter also had a new keyboard layout. It was designed after careful analysis of the English language. It minimized redundant hand movement and increased efficiency. The most popular English letters (DHIATENSOR) are contained together on the lowest row.

Unfortunately, Blickensderfer Typewriters didn’t survive the first World War and the death of its creator. These typewriters were eventually sold to E. Remington and Sons. Remington attempted to introduce a modified Blickensderfer 5 to the market, but eventually, the model was discontinued.

Dvorak keyboard layout can be called the successor of the Blickensderfer Typewriter’s layout, and here’s why.

This layout was designed by August Dvorak, an American professor who studied psychology of typewriting and even wrote a book about it (“Typewriting Behavior”). August and his brother-in-law William Dealey designed a new layout because they believed it to be more ergonomic and that it is faster in typing than QWERTY and patented it in 1936.

If you look at this layout, you will notice that the middle row contains almost the same letters as the last row of the Blickensderfer Typewriter. The difference is that vowels and the most used symbol characters are on the left of the Dvorak layout (with the vowels on the home row), while the most used consonants are on the right.

Even though Dvorak is famous as a “faster” layout, can’t be certainly acknowledged as a layout that increases speed of typing. For many years the world record holder in fast typing was Barbara Blackburn, who used Dvorak, which was been using as a proof of advantages of dvorak. But this record was unofficially beaten by Sean Wrona, who uses QWERTY. As he himself states, he could probably type faster with Dvorak, but switching to a new keyboard takes a lot of time and effort.

Some people also state that Dvorak is just more comfortable for using, especially people with tunnel syndromes. There is no proper medical research on this subject, so I encourage you to investigate this side of using different keyboard layouts.

As August Dvorak was thinking a lot about typewriting, he was also considering accessibility much earlier than it became a popular subject as it is today, and designed keyboard layouts for people who mostly use only one hand to type. Left-handed and right-handed dvorak layouts are available on the most operating systems as well as dvorak for two hands.

Another interesting variation of dvorak is programmer dvorak, that was invented in the 2000s by Roland Kaufmann. Unlike left and right handed dvorak you can’t use it by default, you have to install it first.

Letters remained in the same places, but numbers, brackets, and special symbols changed their positions; now it is easier to type brackets than numbers, as developers use various brackets much more often. The order of numbers is also interesting, as they are divided into odd and even.

Another popular keyboard layout is Colemak. It was designed by and named after Shai Coleman in 2006.

Coleman is a developer and he decided to design a keyboard that is easier to switch from QWERTY but that still increases typing efficiency. Hotkeys was also considered in the process of design, so the most popular ones remained in the same places. Another interesting thing is that this layout doesn’t have caps lock button, and has a second backspace instead as it is used much more often.

Even though support of the most popular alternative keyboard layouts is good, using non-standard layouts still causes some problems and inconveniences. I personally use dvorak, and using hotkeys is not so easy for me as letters like “v”, “c”, “i” are spread all over keyboard. Using default vim keys is also difficult for the same reason. But the main problem for me is using hotkeys on web applications, as online photo editors or Jira.

Most web apps, if they are designed for using custom hotkeys, use KeyboardEvent.code property, which represents a physical key on the keyboard instead of one that is actually typed. In this case, no matter which layout you use, you need to press buttons according to the QWERTY layout, which can be quite confusing and can cause unwanted actions to happen.

That’s why Keyboard API was created. With getlayoutmap() method you can receive a promise with a map-like object with functions for retrieving the strings associated with specific physical keys.

This api is used by vscode online editor, it can instantly detect your layout, so you can use hotkeys properly.

But there are some pitfalls as well. The main is that support is not good enough:

And it’s not only because browsers didn’t have time to implement this API (which is still experimental), but also because Keyboard API is considered harmful as it helps identifying users and can be used for fingerprinting. So, if you open vscode online in Safari, you will see, that it no longer detects your layout by default. But you can still work with it.

Even without Keyboard API you can detect the current layout, even though it is slightly more difficult and requires more boilerplate (and also this is why the question is keyboard api “bad” because it exposes this information might be controversial).

As I said before, there’s a keyboard property KeyboardEvent.code and also there’s KeyboardEvent.key that shows which symbol was typed. Nothing is stopping you from writing a dictionary to distinguish which layout is used. VS Code also does that as a fallback:

And as soon as you start typing in vs code in Safari, it also detects your layout properly.

In many aspects, keyboard layouts are not yet sufficiently studied. There’s no guarantee that any of existing or future layouts will improve your speed of typing or reduce your pain, but there are many people who were happy to try. This is why I find important to support accessibility for different users and make their life easier when possible. I encourage you to test your web applications with different layouts if your interface involves using hotkeys, your users will be grateful for this.