Make It Usable🔗

Usability is important.

Here are some rules of thumb we've been mindful of to make Yukey interfaces usable.

columns are good🔗

We take note that many UX studies over the decades find that forms which are completely single-dimensional scrolling are easier to interact with than those that vary the x coordinate of blanks, or that attempt to fit multiple input areas on one row.

So Yukey really favors helping you build that. (The fact this is easy to navigate rapidly with the keyboard is a happy coincidence.)

We don't rule out letting you compose things in other ways, obviously. But all the best affordances we offer steer towards simple columns rather than jagged multi-dimensional stuff.

(This is where "the megacolumn" UI element comes from, and why we feature it so heavily!)

we are not ants🔗

All elements have reasonable sizes.

Nothing is ever 8px by 8px: that is too small. Things need to be easily seen, and to be easily engaged with on a touchscreen.

hit zones must be visually clear🔗

If a button is a button, it has a strong border appearance, and the border marks where the hitzone is.

We never do iconographic buttons that lack clear edges.

let users see what they're doing before committing it🔗

(This is probably good guiding advice for you who is composing your application's logical flow! But it guides some design of Yukey's component internals, too.)

Flows should almost always be: User moves focus -> User sees and mentally confirms intended focus -> {User activates | User realizes desync of their mental model from UI state, pauses, and reorients}.

Time alone isn't enough for this. Separating two parts of action is.

As an example: in Yukey, hotkeys generally cause focus jumps, but if they land focus on an activatable like the button, the actual activation is a second action. This means two keystrokes are needed to get the activation to occur, but it gives users a chance to confirm if their hotkey jumped them to where they expected before they make the second keystroke. This lets users move more confidently through the UI.

(Consider that is another situation where mouses have different affordances that are frankly better developed than for keyboards. Mouse hover is already part of "see what you're doing before commit"; even mouse-down on a button without the matched mouse-up is a furtherance of this. Keyboards shortcuts don't always have natural equivalents; this is something we're trying to be mindful of and improve on with Yukey!)