Keybar

3 Responses

1. Matt Legend Gemmell

   Early work in progress. It's a key-bar component, adding a row of user-customisable keys on top of the regular on-screen keyboard on iOS. For use in third party apps, of course.

   The customisation interface consists of a set of keys (above) and a bar to drag them onto (below). Keys can be dragged around on the bar, or dragged off to remove them. Some keys have predefined functions, like Tab, and some have behaviour the user can choose (inserting text, whether to wrap or replace the current selection, etc).

   The bar background and general customisation UI are very early stage and just placeholders, but there are two visual issues I'm playing with:

   1. How to indicate that a key on the bar is customisable. Currently, it's the blue corner in the bottom-right. I've tried a dot (too similar to the selection keys), an ellipsis (looks bizarre when there's also text on the button itself), and a thicker border (looks unbalanced/embossed compared to the other keys). It's just a visual convention to use in the customisation UI, but I'm not yet happy with it.

   2. The selection keys, shown in the bar at the bottom, after "Tab" and the blank/customisable key. From left to right, they're: Select All, Select Paragraph, and Balance Quotes (i.e. select outwards from the insertion point, or expand the selection, to just inside the nearest containing set of quotation marks). I was searching for a way to convey selection visually without using wordy labels like "Select Paragraph", and the iOS selection-delimiters were an obvious possibility. I just wonder whether they look too "live", like the keys themselves are being edited. I wonder if they could perhaps do with a simplifying, flattening treatment - to still show the same thing, but in a more conceptual, diagrammatic way that seems less editable.

   Just offered for interest. I'll be sure to post again as the concept evolves.

   3likes

   8 months ago

2. Pro Mike Piontek

   I wouldn't have guessed what the customizable key was for. Makes me think of a hot corner in OS X. It's hard to make a suggestion without fully understanding how the rest of the UI works, but I wonder if it might make sense to rethink your approach a bit. If I have a list of keys I can add to the bar, why not just have a "New" or "+" button to create a new key. This could be styled differently than a key, which would help clarify what it does. If I drag a custom key out of the bar, it could just disappear in a poof, since it's easy to recreate.

   Another idea: a blue underline?

   I do think the selection keys look too "live", and a bit busy. What if you got rid of the dots—the active controls for a selection—and just relied on the blue box to show a selection. If that's too subtle I like the idea of a flattened version—just use simple blue dots with no shading or outline, perhaps slightly smaller. Desaturating the blue could be another way to make it look less active.

   8 months ago

3. Pro David McLeod

   Maybe you could do a kind of raised bevel like the F and J keys on an actual keyboard to show they are customisable? That way it isn't colour and more of a physical looking distinction.

   8 months ago