Show HN: An experimental, keyboard-first user interface | Hacker News Reader

Show HN: An experimental, keyboard-first user interface

emvi.com

263 pointsdschramm104 comments

Always good to see companies put some effort into good keyboard navigation!

If you want a keyboard-first interface for your web browser I can recommend Vimium (which I'm sure a lot of you have already heard of). I'm not actually a Vim user (at least not yet), but I rely pretty heavily on Vimium's shortcuts in Firefox nowadays. I started using it when I had a school-provided laptop which had an awful trackpad which was way too slow and annoying to use for my taste.

Vimium: https://vimium.github.io/

Screenshot of shortcuts in Vimium: https://i.imgur.com/x1Y7OvQ.png

EDIT: I almost forgot to mention my favorite feature (which is not limited to Vimium).

Custom search engines are great! If I want to go to the Wikipedia page on aviation then I can just press Shift+o and type w aviation and it will immediately open that Wikpedia page in a new tab.

The other search engines I frequently use are: google translate, thesaurus (synonyms), and justwatch (to see if/where a show/movie is available in my country).

If you're going down that route I recommend Qutebrowser[0].

I'm a pretty staunch advocate of it since it doesn't feel at all like a "hack" of vim in the browser, and because it's chromium basically all websites work. (However, I am contributing to the monopoly of chrome based browsers, which is a bad thing in my personal opinion).

It's also easy to extend, I think it's the ultimate hacking browser.

PS: it takes a little tinkering to get really nice looking on MacOS.

[0]: https://www.qutebrowser.org/

There are a couple of annoying things with vimium which, I think, are general limitations for Firefox extensions, or browser addons in general: - it loads after the page, so if you mistakenly open a link, you have to wait until the page is fully loaded to close it with the extension, but you can always use the browser's integrated shortcut Ctrl+W. So far so good - Letters positions are not as accurate as let's say, qutebrowser, and sometimes when you open a link it's not the right one, even if the letter was indicating it. For a clear illustration of what I'm trying to say, try to browse stackoverflow and use the reviews queue. - When the page is saturated, letters start overlapping, you find yourself with one link hovered by 'A' and another 'AA' maybe a couple of links labelled: 'AB', 'AC', ... and in this situation it's impossible to select the link 'A', you have to do it with the mouse.

>Custom search engines...

Firefox has had this feature for many many years.

I press ctrl+L (keyboard focus to location bar) type "w aviation" and press enter.

It's built in already as a default feature. To add a custom search to Firefox, right click on the search field and click "Add keyword for this search". I chose "w" for Wikipedia like you have.

Chrome does this more simply, but the feature is less discoverable. you don't have to create the keywords manually, you just hit tab after entering the URL where the search box is located. since the URL is autocompleted, for frequently used websites this is a matter of typing the first two or three characters and then hitting right arrow.

You can also set up custom short codes for search engines in Chrome. I use gh for GitHub and w for Wikipedia for example. Just type gh space react and use the keyboard navigation on github to navigate further. A lot of keyboard enabled sites have set up ? key for help about keyboard commands.

Alternatively, in any browser, set DuckDuckGo (or Qwant, or another search engine with !bangs support) as your default search engine, then press Ctrl+L and type `!w aviation` - or `!npm some-package` or `!wt dictionary word` or `!g google search term` etc.

> Always good to see companies put some effort into good keyboard navigation!

Yup. I'd also like to see companies put some effort into publishing a complete list of their keyboard shortcuts. How hard can this be? grrrr

I often find highly useful undocumented shortcuts by hitting the key combination by accident.

We'll add a /help command showing general usage and a list of all keys and what they do :)

Yay!

I have found tridactyl a great keyboard-driven navigation tool for browsers, with insane customizability. (Example - want to copy the git clone address into your clipboard? Just press `yg`)

Try https://hop.sh I launch it two days ago here on HN. It's a bookmark tool with a customizable search bar (like bangs on duck duck go)

I suspect most people here are forgetting that the average person types slower and finds keys slower than they can point-and-click, because they can't touch type. Keyboard-first user interface is definitely not an improvement if the same thing can't be done with a mouse in a reasonable time.

Each style of user interface is obviously not going to be the best for every single person, but for people who are used to using a keyboard, and who interact with software for long periods every single day a keyboard shortcut focused interface could be much more efficient (and they are - ask anyone who does 3d modelling for a living).

Designing user interfaces for some hypothetical "average person" that's using it for the first time might make sense for consumer software that's sold to everyone for occasional tasks, but there's plenty of software that benefits heavily from having a bit of a higher learning curve in exchange for faster/more efficient interaction.

Is this true for anybody under the age of say, 40? I don't know a single person between the age of 15 and 40 who can't touch type at least 50 WPM.

I think the main hindrance for most people is not lack of touch typing skills, but more lack of ability or desire to memorize key bindings or the names of commands.

As an Australian, outside the family I grew up in, and other software developers I know, I can’t think of anyone that I know can type at 50wpm on a physical keyboard. But then, I don’t actually know the typing abilities of many people in the range 15–40. On touch keyboards with autocorrect and autocomplete, I’ve seen various people typing well past 50wpm. Meanwhile I type 110wpm on a normal keyboard and maybe 30wpm on a touchscreen phone keyboard.

(On later reflection, I have actually thought of three that I know or used to know that can type at a decent speed. But I can think of quite a few more that can’t.)

Fellow Australian here.

I work in metal fabrication, and I can tell you the overwhelming majority of building and fabrication tradespeople can’t touch type, regardless of age.

Exactly. It's just as equivalent as having to memorize where some hypothetical share button is on a webpage. I've had this experience trying to change my settings in iOS; I often forget where I'm supposed to click to get to certain settings.

Same issue on android, there needs to be a search function like there is in the windows control panel because there's so many categories and I'm never quite sure which category something is going to be in.

Touch typing is not common in people my age (early 2000s). People learn to type on their own out of necessity, so they learn their own techniques just like how everyone has different handwriting. So, some are fast and some are slow.

Born in the early 90s and I don't touch type properly either despite being a full time software developer. Learned my own technique and probably do like 80-90 wpm - I'm sure I could be faster if I tried to learn proper form but it doesn't seem necessary yet.

Two just within my team in the past year or so. One was a developer for years (mid 30s now), the other in product development (early 30s I think, but may just have a younger face). Both do a fairly fast hunt-and-peck, I'd guess somewhere around 10-15 WPM, it was kinda awkward to watch.

Web sites tend to be created for novice users, because users come from everywhere all the time, and tend to not stick around for long enough to get competent on your design. (Really, on how many sites can a user get competent?)

I guess it's time to reexamine the reach of assumption, but I'm sure it will stand correct more often than wrong.

Not 100% related but a fun thought experiment I’ve been thinking about. What if all these various online marketplaces (Amazon, Shopify, Weebly, Wix, eBay) had the exact same interface functionality? Themes might be different but searching, sorting, comparing, and buying were standard across the board, like NPC shops in video games.

I feel like it would lead to a significant increase in sales, due to the decreased cognitive load of figuring out yet another shitty interface. Mix in seamless payments and account management, and the idea of an online store starts to disappear entirely, to be replaced with the ability to just... buy stuff.

Or if they used the same standard shopping protocol, that anyone could implement or use (like they use e-mail for communication with customers almost universally). You'd add your favorite e-shop URL to your favorite desktop shopping app, and you'd see products from various shops in one interface.

The app could have customer centric functionality, since it would be a "user agent". So you'd have stuff like price tracking, availability tracking, feature comparison, independent reviews, saveable shopping cart, global wishlist, consistent user interface that never changes unless you want it to, and is configurable by you, etc.

Seller would implement the protocol for their side and buyers would choose UI app to discover and order stuff, be it CLI or GUI, or scripted.

“What if there was only one way to buy things”, “then 100% of things bought would be bought through that one way”.

If you eliminate differentiation you are eliminating friction, but also innovation.

Fair point.

Maybe it can better be phrased as,

"what if online marketplaces published their data in an open format allowing the end client to display them however the user prefers"?

You mean like CSS Zen Garden?

Or via Styx/9p2000. Could you imagine an online store that mounted directly into your operating system? There would be a whole market of GUIs.

[edit]

Perhaps provided on a 9p.mydomain.tld subdomain?

Or would it just be something like nttp instead of http?

[/edit]

http://www.csszengarden.com/214/

Neat project - thanks for mentioning. Definitely in line with what I'm imagining.

It's inevitable, the very core nature of markets will inevitably lead to either one single player or an oligarchy of players using shared strategies

Interesting thought, I would love to hear the leading UX designers of those companies discuss their ideas, desperately trying to settle on a solution they all like.

Worse, web sites tend to be written from a position of derision regarding most novice users.

I agree, but Emvi is a knowledge management tool and if you decide to use it, you usually stick around for a while. So our users should have time to learn it. And I think it's really intuitive already.

I worked for a company that made software for libraries (public and academic). It evolved over many years, starting off as a terminal session onto a mainframe.

The newer windows version still kept every single keyboard shortcut, because it turns out once you know the shortcuts, it's so much faster than pointing and clicking.

Developers paying attention to keyboard shortcuts is a fit-and-finish metric. I'd even go so far as to suggest it's a good indicator of whether the developer actually cares about their users.

Windows itself did a great job of keyboard shortcut consistency through Windows 7. Windows 8 and beyond, however, have been less so.

Pressing ALT-F4 while Windows Explorer has focus on Windows Server 2019 and finding that you're rudely logged-off with not warning (which has something to do with UAC settings, and can be replicated on Windows Server 2012 R2 w/ the "Desktop Experience" feature enabled) gave me a very "Gee, these guys really don't care about me" kind of feeling. There are others, but they're not coming to me right now.

>Windows 8 and beyond, however, have been less so.

While they didn't stick too well to the old paradigm in detail, they introduced ribbons in Windows 8 Explorer, which are keyboard-friendly and very "vimperator-alike", using modal hints for commands (press Alt in Explorer to see how it's different), and support the quick toolbar. That's a massive improvement on itself, compared to the old accelerators. There were also many other keyboard-friendly improvements like the basic window tiling and separate desktops, ability to cycle tray icons, almost every OS setting being accessible from the console instead of GUI, etc. I'd say Windows 8 was the first Windows version somewhat usable without a mouse, in Windows 10 they improved on it (and made a huge step back with WPF applications).

100% agree - I remember in 2008 being not a fan of the Mac, and then being taught how TIGHT their keyboard shortcut integration was across the system, how you could customize any menu with shortcuts, how they exposed their menus programmatically - that stuff blew my mind about how much the OS cared about the user.

Havent seen nearly as much stuff in OS X these days that makes me think the same.

That's weird, apparently in Win10 and 8 you should still see a confirmation dialog, so I'm surprised why 2012R2 and 2019 wouldn't:

https://winaero.com/blog/wp-content/uploads/2012/08/shutdown...

https://www.tenforums.com/attachments/general-support/241264...

Here's some discussion about it: https://serverfault.com/questions/967452/windows-server-2019...

It only happens on Server 2012 R2 when "Desktop Experience" is enabled and you're logged-on with an account that would have groups stripped from its token by User Account Control.

I've no doubt it's related to UAC, ultimately, but I've nearly reached the breaking point w/ my disgust with being unpaid outsourced QA for Microsoft. Deploying and supporting their products have been my livelihood for 20 years, but the "new Microsoft" in the Windows as a Service era is straining my ability to recommend them.

That explains why I've never encountered it, and why it may have gotten past MS' own testing --- I know MS employees who use the server edition of Windows on their development systems, but almost everyone turns off UAC because it's such a pain to work with.

Also on server editions of windows, the system (by default) will ask for an "unplanned shutdown" reason, which is another modal you have to go through before it actually shuts down.

Interesting. I've had the opposite experience. I really enjoy the keyboard experience in Windows 10.

Win+Shift+S to take screenshots, Win+Tab for the expose-style view of all windows, Ctrl+Win+L/R to change desktops, etc.

I haven't used Windows Server since 2012R2 was the new hotness (the product that ran on it has since been ported to dotnet core and containerized) so maybe that explains my differing experience.

Meanwhile I disabled Win+Tab (`#Tab:: Return` in an AutoHotkey script) and also three-finger swipe which defaulted to opening the same view, because it is so astonishingly slow, and easy to accidentally trigger when Alt+Tab or two-finger swipe were intended. On my Surface Book, when I have a fair bit running (call it 20+ windows and approaching full use of main memory), the first invocation of that could make the machine unresponsive for 10+ seconds, because that Win+Tab thing uses inordinate amounts of memory (well over half a gigabyte for that many windows on a 3000×2000 display, if they’re all maximised it’ll be closer to a gigabyte), so it has to shuffle loads of memory around first. Even subsequent openings of it tend to take half a second at best, more typically 1–2 seconds.

Meanwhile, I believe macOS’s equivalent transitions smoothly and quickly. Not that I’ve used it myself for fifteen years or so.

Yeah when I was running Windows 10 on a laptop I disabled animations for this reason. It helped _a bit_ but it was still janky. I only saw this when running external monitors though.

Now my only Windows 10 PC is an overpowered desktop so no issues.

Though running Ubuntu (really digging 19.10) has a noticeable hit to battery life. You really can't win..

This is probably happening because it takes a lot of effort to get a keyboard controlled interface right. When everything is controlled by mouse you can separate concerns more easily. We had to put some thought into our state management which is even harder in the browser than it is on the desktop.

The fact that shortcuts have become less and less discoverable, and nobody has cared enough to educate users, is the cause of an incredible amount of lost productivity.

"User friendliness" is paternalistic and limiting. You want a learning curve that amplifies the user's power as they progress along it.

> is the cause of an incredible amount of lost productivity.

I want to believe. Source?

Rectal extraction. (i.e., pulled out of my butt because I too want to believe.)

Yeah I really do love that. Once you get a grasp on it, you can control it blindly. I'm so quick on our UI right now, that you sometimes don't even see the command line opening. I think this efficiency combined with modern design has great potential.

I think bloomberg terminal's UI is the best keyboard centiric UI ever.

https://www.youtube.com/watch?v=LE8HiHZcgEE https://www.youtube.com/watch?v=ODgs0eWAIKc

I like the idea and I would use apps like this in my own personal life, but as a UX designer this is also a super horrible experience if you don't give any affordance in the UI to the user indicating what type of action they can take.

I agree, that's one of the challenges we have to tackle. The commands being contextual to the page you are on helps in my point of view, but we have to explore ways of onboarding users in a proper way.

Yes we've thought about that too. That's why we added autocompletion and we will add an interactive tutorial should we decide to commit to this.

Not just auto completion but interactive auto completion coming from a list of options. This is what I did for one of my projects - you get a vertical list of all possible inputs (within reason of course) which is narrowed down as you type. You could use the arrows to navigate if you're not inclined to type - arrows - tab - arrows - tab would build a complete command sequence.

This is exactly what we did.

The gold standard of keyboard discoverability and low cognitive load has to be Microsoft office suite. The Alt key reveals all the shortcuts on screen, and as you type them the context changes to the sub menu you've selected. It's an astonishingly effective and useful accessibility feature. I wish this WAS the standard.

There's nothing better than for a user, especially one who relies on visuals, to visually see a "tree" of the possible actions they can do. And not tree in a literal or CS sense, but rather, buckets of activities with sub activities, not in a hierarchy but in an intuitive and context-creating way.

This interaction model looks a lot like a hybrid between Blender's tool search, and FEMA.gov's site navbar, both being among my favorite UI elements floating around cyberspace. I don't have anything to criticize here, or any insight to add. I'm honestly just thrilled that this concept of a hybrid command-line is being explored more thoroughly.

It looks a lot like the command palette of sublime, vs code, etc (cmd+shift+p). Combined with the navigate functionality of those editors (cmd+p). Where actions like back map to the command pallet and navigation like .articles maps to the file navigation.

Exactly. "Command palette" is the name of this user interface element known from many editors, app launchers and OS app integrations and is proven to be extremely efficient. It almost seems like the article is reinventing it and calling it "command line".

BTW even in VS Code there is in fact single unified input: "Go to File input" (Ctrl+P) that changes behavior according prefixes; "Show all Commands"(Ctrl+Shift+P) just opens the same input with ">" prefilled; "Go to Symbol in Workspace" (Ctrl+T) prefills "#", "Go to Line" (Ctrl+G) prefills ":" and so on. It even shows you placeholder when empty that reads "Type '?' here to get help [...]" what lists all those prefixes.

Thank you! We're thrilled too by all the positive feedback and we'll continue to work on this :)

Hello HN!

We just rolled out this little MVP for a new user interface for our knowledge base software.

I would love to hear what you think about it!

Cheers, Daniel

Thanks for sharing this! I find these kind of articles very interesting, as they go really deep into the analysis behind product development. As for the feature itself, as other people have already mentioned, I think it depends on whether your users are more accustomed to GUIs or CLIs. Personally, I prefer the latter so I'm definitely biased.

We are trying to present GUI users with good arguments for a switch. Our tests with people that are unfamiliar with CLIs showed they were up to speed after a short amount of time.

I'm very confused by the fact that this page itself does not have a visible focus style on interactive elements, making it very difficult for somebody who navigates the web with a keyboard to see what they are clicking on. I could not tell even if all the links on screen were actually reachable by tab key.

Maybe I've missed the point, but there are people who use they keyboard exclusively when navigating a web page already, and I would think accessibility for those people would be a big consideration in what you are doing.

You are right, I created a ticket for this to be fixed in the next release!

Interesting, particularly useful for power users and high frequency usage products.

Have you researched which applications have the highest penetration of keyboard usage and why? Afaik most users even on desktop apps (e.g MS office suite) can only retain a handful of shortcuts. What's your strategy to train users to have a fully keyboard based navigation?

Btw did you use any open source library to manage keyboard shortcuts?

We have not found any reliable numbers on keyboard usage vs mouse input yet, but it would be quite valuable.

Compared to normal shortcuts the commands are easier to remember, because they mostly represent the verb for the action you want to accomplish. Instead of memorizing Ctrl + E or similar for a new article, you type /write or an alias like /new. This way you only have to know what actions are possible, without connecting them to an inconclusive key combination. Most commands will auto-complete after the first two letters, so you are not losing that much time either.

Our frontend is build on Vue.js and the shortcuts are handled by global JS events.

A big issue here are mobile/touch devices.

You don't want to force your users into keyboard driven interaction there.

But as decent mobile support is almost a requirement nowadays (even if just inside the browser), you end up with two completely different interaction designs and would require users learning everything twice.

That's definitely something we have to look into. We currently see mobile usage primarily for searching and reading and less for creating content. But you are right, this needs special attention. We do not want to maintain two different approaches.

Please add a language selector so I can read the website in English. Or maybe lose the German localization altogether.

As a German native speaker, I find the German translation quite difficult to read.

You can change that on the account settings page. https://emvi.com/account

In case you're talking about our blog, you need to change your browser language :3

Using slash ("/") for commands can slow down many users not on QWERTY keyboards because "/" requires one to press shift (e.g. QWERTZ or AZERTY keyboards)

Good point. We are on QWERTZ aswell, so we are thinking about making it customizable at some point.

I understand you will like this if you like command line interfaces.

We showed it to some people who are unfamiliar with command lines and they liked it. It's just that most non-technical users never encountered an interface like this, but they do like it if you show them how it works. This is why we're going to add an interactive tutorial.

For (relevant) prior art, see Notational Velocity (which appears to have successors in various states, nvAlt and nvUltra).

There's also Alfred, Quicksilver and Enso

Additionally, Superhuman seems to be doubling down on this approach for their productivity inbox and VS Code has this type of input/UI available with Cmd-P. Spacemacs kind of does this when helping you navigate emacs modes.

It's a fantastic marriage of traditional search box feature discovery and keyboard shortcuts.

These are the places where we got our inspiration from :) But we couldn't find any relevant attempts to implement something like this in a browser, especially for non-technical users.

Check out Vivaldi browser. I find it unusable due to its performance, but they do some interesting stuff.

https://help.vivaldi.com/article/quick-commands/

Also, classic Opera had single key page navigation (and loads and loads of shortcuts).

https://web.archive.org/web/20111014104313/http://help.opera...

The thing missing from both those implementations is link following. That's the "HT" in "HTML" and "HTTP", so no supporting it from the keyboard seems almost unacceptable to me in a web browser. Yes, I'm aware that no major brower _ever_ did support link hinting out of the box.

I'm using Tridactyl now, and am extremely happy with it. There are some problems, notably on the lack of Tridactyl support before the page loads, but with TreeStyleTabs it is the best browsing experience I ever rememeber having.

Imho, the right approach is the one taken by qutebrowser, a lot of shortcuts yes, but it's almost impossible to only use the keyboard and, when you do so, you can't be as productive as when you use the mouse, because it wasn't designed for a keyboard centric use.

I used ratpoison for a while on one of my Linux boxes and much liked it.

> The name "ratpoison" reflects its major design goal: it lets the user manage application windows without using a mouse. Unlike other tiling window managers like Ion, ratpoison completely ignores the mouse (or "rat"), and avoids window decorations as much as possible. The default keybindings are specifically designed to not conflict with Emacs.

https://en.wikipedia.org/wiki/Ratpoison

Relatedly, there's nothing I hate more than new keyboards and laptops not including the "menu key", which has the same action as a right-click.

https://en.m.wikipedia.org/wiki/Menu_key

I have a hard time living without it.

Good idea! We can bind that additionally to the Control + Space keyboard shortcut.

Seems we might be giving it the hug of death. In case it renders weird / 503s: https://web.archive.org/web/20200320200023/https://emvi.com/...

Hm everything is looking good so far. We'll switch to a more powerful machine anyway soon ;)

Just in case, here is our Medium blog: https://medium.com/emvi

I think the solution should be to use the "accesskey" attribute. Unfortunately, not enough web page writers use it.

Wow I actually never heard of this! I will definitely consider it while implementing more features of Emvi in our new UI.

Let's bring back gopher and use this as an interface.

Not sure if joking but Gopher is alive on the Internet today (281 results) if you wanted to create a new interface and test it w/ real data:

https://beta.shodan.io/search?query=port%3A70+gopher

I've had an idea for a while now to have a website that only has a text input like this to allow simultaneously building a website and a voice assistant (Alexa/Google Home) plugin. The development is much faster because it's the same back end for both apps, gives a standardized UI, and the auto fill on the website teaches what is possible on the voice assistant.

An excellent keyboard-first interface exists already. It's called Emacs. Give it a chance. It might surprise you.

Vim

This gave me a sense of deja vu. A couple of weeks ago, there was repl.it's "graphical command line": https://news.ycombinator.com/item?id=22498665

Looks like Notion for purist developers.

https://www.notion.so/

I absolutely like this, being a keyboard centered user, I like to see things making my life a lot easier.

I could see this getting acquired to enhance Microsoft’s Cortana or Apple’s Siri and Spotlight.

We are open for offers :D