...
Figure 1 Overview of Alphanumeric Virtual Keyboard
Since the virtual keyboard should rotate when devices are flipped over, we should make sure that the virtual keyboard also nicely fits in VGA screens in the portrait mode (480x640) and up.
Figure 2 - Alphanumeric Virtual Keyboard in Portrait mode
3. Interaction Design
...
Figure 3 Example of a tap feedback on touch device
In case users tap and hold a key for longer time a pop-up dialog appears showing the primary character, alternative character, and characters with diacritics (if available) that are associated with that key. Users can select the character they need by tapping the character in the pop-up dialog. Please note that the first character in the pop-up dialog is focused.
Figure 4 Dialog that appears above the letter after long press
In order to type capitalized letters, users need to tap the Shift/CapsLock key. After that, the virtual keyboard shows capital letters. Functionality of Shift/CapsLock key depends on interaction with the key.
...
Figure 5 Diagram of Shift/CapsLock key functionality
Sometimes, users may want to type more than one alternative character into the input field. Even though users can do that by holding the appropriate key for longer time, there is faster way how to do that. Users can simply switch keyboards by tapping the "Switch the Keyboard" key and type primary characters by tapping appropriate keys. To access less frequently used characters, users need to press the appropriate key for longer time.
Figure 6 Mock-up of "secondary" alphanumeric keyboard showing numbers and symbols
Please note that label of the "Switch the Keyboard" key is !#123 for keyboard that shows alpha keys. Otherwise, the label reads as ABC. In addition to that, keys that do not provide users with any functionality or the functionality is not available are grayed out.
...
Figure 7 Example of a numeric virtual keyboard
Apart from providing app developers with a numeric virtual keyboard, there are another keyboards available to them. These keyboards can be used when users are required to type a URL or e-mail address, because they provide them with @ and .com keys. To access less common domains, such as .org, .net, .edu., and .tv,, users can press .com key for longer time.
Figure 8 Example of "primary and secondary" E-mail virtual keyboard
Figure 9 Example of "primary and secondary" URL virtual keyboard
If users want to edit a letter in the middle of a word, they can tap the place where they want to place the caret. If the caret is not in the intended place, users can adjust it by dragging the handle (see Figure 10). In order to select whole word, users can double tap it. After the selection is displayed, users can adjust the selection by dragging the handles (see Figure 11). Please note, that behavior described in this paragraph is not something that the virtual keyboard should be responsible for. It should be handled by the input text field instead.
Figure 10 Example of the caret with a handle
Figure 11 Example of a selection with handles
When users want to delete a character, they can do that by tapping the Delete key. After that, character that is on the left side of the caret is removed from the control the virtual keyboard is associated with. Keeping the Delete key pressed for longer time deletes word after word.
...
Figure 12 Example of a custom button
Previous and Next buttons
...
Figure 13 Example of Previous and Next buttons along with a custom button
4. Visual Design
5. Navigation
On touch devices, users use fingers or stylus to navigate within an app and keyboard. The following table describes navigation within the virtual keyboard on a touch device.
...
Overview
Content Tools
ThemeBuilder