...
Paper prototyping suggested that after learning how to use our keyboard, users would quickly be able to decide whether to initially go left or right. However, as we implemented this and tried using it ourselves, we realized that many users might never become efficient at this. Heuristic evaluations and user testing confirmed our suspicion. We improved this by displaying all characters up front so that rather than forcing the user to figure out which half of the alphabet contains his target letter, he can simply locate his letter visually (Fig 2.)
Figure 2. Navigating in the final design
...
This proved to be extremely difficult for users to understand in all stages of evaluation. Users wanted to press down to select the newly opened choices, but they in fact needed to press left or right (down changed the mode). We built on our solution to the first problem by providing color cues and moving “arrow” buttons to teach the user how to navigate (Fig. 4)
Figure 4. Submenu navigation in the final design
...
In our final design, we eliminated modes altogether and simply laid out each group of symbols in its own row (Fig. 5). We mapped the up and down arrow keys to move between the rows. We also eliminated the ability to focus on the textbox as it was rarely used and highly complex. The new, significantly simpler design was immediately understood by users.
Figure 5. Choosing from different sets of symbols
Since we removed the ability to focus the textbox, complex edits (such as moving the cursor back three characters and changing a letter) were no longer possible. Instead, we choose to include a backspace symbol as the sole mechanism to perform edits. We justified this decision with our observations during user testing - users almost never wanted to perform complex edits unless we explicitly instructed them to do so. To make backspace efficient to access, we placed it at the end of the bottom row (Fig. 6). The user need only press the right arrow once on the bottom row to delete characters. This feature was liked by many users.
Figure 6. Placement of the backspace character for efficiency
...
Our final design aimed to simplify the controls and unify the appearance of the autocomplete box with the rest of the widget. We place the box directly below the keyboard with each suggestion in its own row (Fig. 7). Up and now now move between the rows of symbols and autocomplete suggestions.
Figure 7. Placement of autocomplete box
...