A New Way To Type

Our world is filled with touch-enabled devices. However, as these devices get smaller, it has become increasingly difficult to input text using the standard QWERTY soft keyboard layout due to the fat-finger problem.

I was part of a group of undergraduates that researched, designed, and prototyped a new keyboard layout for small-screen devices.

My Role
UX Designer
Tools
Figma
HTML/CSS/JS
Google Docs
Timeline
3 Months

Problem

The fat-finger problem with touch-screen devices has two parts: precision and occlusion. Virtual targets are often smaller than a fingertip, making it difficult to choose one specific target when there are several in close proximity. In addition, the finger often covers the target in the critical moment before touch, preventing visual feedback.


Image of the fat-finger problem on touch-screen devices. Credit: http://monikadenk.blogspot.com/2010/10/future-of-touchscreens.html

Research

In my group of 4, we read a total of 15 research papers listed in the assignment document. We boiled down key findings and shared them with each other. Lastly, we took five of the existing soft keyboards we studied and conducted a case study, which consisted of the core idea, our critique, and our suggestion for improvement.


Brainstorm

With knowledge from our research, we each came up with three ideas for a new soft keyboard. Each sketch came with a description of how the keyboard would work, and the pros and cons of the idea. My ideas are labeled as #4, #5, and #6.


Sketches of ideas for NineBoard

Convergence

After reviewing the sketches as a group, we started the process of deciding which idea we wanted to pursue. This was done by finding similarity between the sketches. We discovered that idea #5 and #12 were both inspired by an existing solution for mobile phones: Google Japanese Input.


I created a flipbook for our chosen idea, which contains a detailed description of our idea, our inspiration, and images showing our interaction design.


Sketches of ideas for NineBoard

Prototype

We developed a prototype using HTML,CSS,JS, jQuery, and Hammer.js for touch gestures. There are 45 phrases from the MacKenzie and Soukoreff phrase set, and you continue to the next phrase by swiping up on the upper text box. The keyboard tracks information on each letter input in an XML file, which we used to evaluate the effectiveness of NineBoard. The information can be downloaded once all 45 phrases has been inputted.


I was responsible for coding everything besides the actual keyboard itself, which mostly included how we tracked information about each letter input, and the way each phrase was displayed. The prototype works best on mobile phones not using the Chrome browser, since swiping down refreshes the web page.


Image of NineBoard on Silver Samsung Galaxy S7

User Testing

We ran user tests on three participants, who inputted 45 phrases with the first 5 being practice trials. We used TextTest to analyze the data from the trials into a spreadsheet. The table below shows the adjusted words per minute, keystroke per character, and total error rate of each participant.


Data table from NineBoard trials

Reflection

The average adjWPM was much lower than we had hoped; however, we were satisfied with the low average KSPC. Being a nontraditional keyboard, NineBoard requires much more target awareness, increasing the time required for people to learn the layout. While QWERTY is not an optimized keyboard layout for small-screen devices, it works decently well with additional interaction techniques because everyone is familiar with it.


Google Japanese Input, the inspiration for our idea, works due to the patterns in the Japanese alphabet, which makes it easy for people to find the character they are looking for. The English alphabet does not have similar patterns, so we organized our keyboard layout by letter frequencies. Since most people are not familiar with the letter frequencies, the layout was completely foreign to them. Assuming that people take the time to learn the layout, we believe that NineBoard is an acceptable keyboard layout for small-screen devices.