KLOA, a HCDE capstone project.

Introducing the KLOA keyboard.

Even in today’s society, many individuals are unable to fully utilize modern input devices, such as virtual keyboards. With accessibility becoming an important consideration in design, many solutions to problems like big-fingers, visual impairment, and motion impairment have been put forward. Thus, a private implementation of accessibility that requires less effort when being used may be the better solution.

KLOA Logo

And here comes KLOA, an alternative virtual keyboard on the iOS platform.

KLOA keyboard features an alphabetical layout, with several modifications based on the frequency of letters in modern English. It combines three letters with high, medium, and low frequencies into one key, which leaves the keyboard with 10 large keys instead of 26 small keys. With KLOA’s advanced auto-correction algorithm, users can be less accurate when typing, and enjoy an effortless user experience.

Features

KLOA keyboard's original tutorial

But this novel design raises up new problems.

KLOA’s novel keyboard design brings convenience to its users, but while people are so getting used to the QWERTY keyboard layout, this new keyboard design dramatically increases the learning cost. However, the original tutorial design used highlighted keys as typing indicators and only showed instructions when users made errors during the typing.

This brings up the need for an intuitive and effective tutorial to smooth the on-boarding process. After tutorial, users should:

  • be familiar with the keyboard layout.

  • be able to perform the basic interactions like Tap, Tap & Hold, and Swipe.

  • be able to use auto-correction after inputting each word.

  • be able to type out a pangram without the assistance of the tutorial.

  • be able to go back to the tutorial whenever they need to.

We adapted a modified user-centered design process.
Preliminary research was the key to address problems of the original design and to make design suggestions.
Preliminary Research Process
Screen Shot 2017-06-27 at 7.39.05 PM
Screen Shot 2017-06-27 at 7.39.25 PM
Screen Shot 2017-06-27 at 7.39.45 PM
Screen Shot 2017-06-27 at 7.40.11 PM
We generated these insights from the data collection.

An active tutorial which teaches users the fundamental mechanics before they use the them, is more effective than a reactive tutorial which provides instructions only upon error cases.

The novel keyboard design brings opportunities but also increases the learning cost. The tutorial needs to address this by explaining its benefits before getting into the core mechanics.

Word examples shown in the tutorial should not be generated randomly; instead, they should be carefully selected for demonstrating different gestures and the auto-correction mechanics.

The three gestures: Tap, Hold, and Swipe are crucial for operating the keyboard properly. The tutorial can educate users with these gestures through a combination of text-based and video instructions.

The original tutorial performed auto-correction for the users after they typed in each word, but that was not the real world scenario. The redesigned tutorial should address the importance of auto-correction, and actually teaches users how to use this feature through repetitive practice.

Based on the research insights, we created an active tutorial with welcome screens and four tasks.

The goal of each task is to teach a core concept or a mechanic, but the task also reviews the previous lesson.

It consisted of a pre-selected word example, a short paragraph of explanatory text-based instructions, and a video demonstration of how to input the word example.

First task uses word "brown" as example to teach swiping.

I used Sketch to create the prototypes of every individual screen, then compiled them into video instructions via Flinto.

Welcome Screens

The purpose of welcome screens is to inform users with some basic knowledge about the keyboard, including the advantage of KLOA keyboard, three gestures, and the unique alphabetical layout. Going through the three welcome screens, users will know what to expect for the next part of the tutorial.

Task 1: tap

The purpose of this task is to educate users with the gesture tap. All the three letters in the word “mat” only require tapping, without the need for holding, swiping, or auto-correction, so users can concentrate on practicing “tap” in this task, and also start to get familiar with the keyboard design.

Task 2: auto-correct

The purpose of this task is to educate users with the auto-correction feature. Tapping on each required key will get “drlum” instead of “drown” due to the combined-letter keys, so users need to manually press the space bar to perform auto-correction to change “drlum” into “drown.” Users will also have chances to practice auto-correction with the next two example words “frown” and “brown.”

Task 3: tap and hold

The purpose of this task is to educate users with the gesture tap&hold. In most cases users can tap and auto-correct, but when someone needs to input a slang, an email address, or my Chinese name, auto- correction would not be that reliable. For this word example “frown,” users need to tap and hold on the “d/f” key to manually select “f.” Otherwise they will get “drown” instead of “frown.”

Task 4: tap and swipe

The purpose of this task is to educate users with the gesture tap&swipe. This gesture is harder to perform compared to the previous two, but it will happen less frequently due to the fact that only the letters with lowest using frequencies will require swiping. Nearly all participants in the first usability test found it difficult to tap&swipe, so using a video tutorial should be the optimum way to teach.

We conducted the second round of usability test to examine the new tutorial.
Second usability test
Screen Shot 2017-06-28 at 4.27.34 PM
Screen Shot 2017-06-28 at 4.27.51 PM
Like what we expected, participants' successful rates in the pangram test significantly increased in the second usability test.

In the pangram test, the facilitator gave participants two pangrams which contained all 26 letters in English (for example "the quick fox jumps over the lazy dog"), and let them input the sentences in free-type after completing our newly designed tutorial. 

During this process, the observer recorded the time consumed and the error made by participants.

Second Usability Test

80%

successful rate

First Usability Test
33%
A documentary video of our UCD process.
But there's always room for improvement.

Contrast: the previous design used gray for the text-based instructions and the embedded icons to match the overall theme of this keyboard. In the new design, I used pure black to get a better contrast, and used larger-sized bold text for the keywords to gain more attention. 

Highlight: the original highlight appeared before tapping on the keys as an indicator of "where to tap." In the new design, highlight only happens after users tapping, holding, or swiping on keys, just like what happens in the real use scenario. In this way, users will know what to expect after finishing the tutorial.

Icon: a static hand icon was replaced by a finger icon with a brighter color. The new icon was better at displaying movements, and the radiant light around the fingertip, along with the new highlight design, made the "tapping" gesture more noticeable.

Video instruction: since some participants found the animation of swiping confusing, I changed the animation into a "dragging" style, The ghosty affect pointed out that the swiping could go in both directions.

And if we go beyond the tutorial, what can we improve to achieve a better design of the KLOA keyboard?
Word Banner

Just like the prototype on the left side, there are three words in the banner. The first two are the possible targets of the auto- correction while the third word being the letters users type in. In this case, users can tap on either “frown” or “drown” instead of letting the auto-correction to choose. Also, the word “drown” is highlighted, which means the auto-correction will correct “drlum” into “drown.” With the word banner, users will know what the word they originally type will be auto-corrected into.

Alternative Layout

The modified alphabetical layout was one of the reasons for participants to perform badly during the usability tests. We learned from the literature review that the traditional QWERTY layout had a noticeable advantage regarding familiarity. So we designed two alternative layouts for the KLOA keyboard, which were close to the QWERTY layout but also tweaked based on letter frequencies. 

During the usability test, we used A/B testing to see if participants could perform better with the QWERTY-like keyboard layout. However, the difference in efficiency was not significant, due to the fact that the alternative layouts were not fully “QWERTY.” But this definitely leaves an opportunity for future research and design. 

KLOA - text input made easy.

Team: Alex Heilgeist, Mingxiao Hu, Sergey Rogozin.

My role: usability testing, competitive analysis, interaction design, interactive prototyping, film making, poster design.

Spring 2017 // Be Boundless.