Virtual Keyboards on iPhone and Android

I have written about virtual keyboards before. Their main advantage is that they allow for devices with huge screens while retaining slender hardware. A hardware keyboard forces manufacturers to create complex foldout systems which use physical space. Virtual keyboards avoid this complication. On the other hand, they replace a very obvious user interface element - a physical keyboard - with a more ephemeral input mechanism. Instead of having actual keys you can touch, feel and push, you have a bunch of pixels on a screen. In order to allow users to interact efficiently with such a system, it needs to work perfectly, and it needs to employ a number of tricks to help users get around the inherent limitations of such an unfamiliar input mechanism.

Comparing the iPhone to the HTC Magic, a phone running Android1, shows the problems that a virtual keyboard can cause, and how they can be solved. Typing on the iPhone – especially in English – works perfectly well, perhaps better than on a physical keyboard. Doing the same thing on an HTC Magic is often annoying and wrought with errors. Note that some of the Magic’s problems are not specific to Android, but to the Magic.

Size

The HTC Magic and the iPhone have the same screen size in terms of pixels:

iPhone screen and Android screen

What’s more, the pixel sizes of the individual keyboards and even the individual keys are almost identical, although Android conveniently adds comma and period keys next to the space bar:

iPhone keyboard and Android keyboard

However, the HTC Magic’s screen is only 90% as tall and wide as the iPhone’s. This doesn’t seem like a huge difference, but it actually has noticeable effects on usability. This is a comparison of the screens of the two devices, scaled to match the proportions of the real devices:

iPhone screen and Android screen scaled

And here’s the keyboards, again scaled to match the real-life proportions of the two devices:

iPhone screen and Android screen scaled

Even though the difference in length and width is only 10%2, the HTC Magic’s keyboard is quite a bit smaller. This causes two problems. First, it’s a lot harder for me to hit the proper keys. While I usually hit the correct keys on the iPhone, I often miss the keys when using the Magic.

A second, slightly smaller effect of this is that my thumb obscures more of the Magic’s screen than of the iPhone’s screen:

Obscuring the Screen (Hover your mouse over the image to see keyboard and finger outlines.)

My thumb obscures a large area of the Android keyboard. This makes it harder to see what key I’m actually touching, and it makes it harder to see where exactly the individual keys are. Admittedly, I have large hands, and some people may actually prefer the HTC Magic’s smaller screen, but even for them, the larger screen would allow for more precise typing.

Focus

When typing on a physical keyboard, the user’s focus is on the actual text that appears on the screen, not on the keyboard. There is no need to look at the keyboard. The keys don’t move, and the physical features of the keyboard ensure that her hands stay in place, too. The same is not true for virtual keyboards. Even minuscule shifts in the position of your fingers can cause you to miss keys. What’s more, the keyboard itself can change. In most cases, users of virtual keyboards will focus on the keyboard, not on the text that appears on the screen.

This means that mistyped characters need to be obvious even when the user is only looking at the keyboard and ignoring the typed text that appears elsewhere on the device’s screen. Since the user’s fingers obscure the keys, simply highlighting the keys when she touches them is not enough feedback. Instead, each character typed by the user is shown above its key. Here’s what this looks like on both devices:

Keyboard Tap

Unfortunately, while the iPhone shows the key’s letter immediately when the finger touches the screen, there’s a short delay on my Android phone. At first, I suspected that this sluggishness was caused by slow hardware, but the delay occurs even in the simulator, so I suspect it is intentional. The delay is so bad that as soon as you start to type quickly, the popup doesn’t appear anymore at all.

This simple change essentially makes the character popup useless and forces the user to constantly switch focus between the keyboard and the text appearing somewhere else on the device’s screen, which slows down typing speed and constantly causes me to either miss keys, or miss typos, or both - depending on whether I’m looking at the keyboard, the text, or both.

Speed

While the iPhone’s keyboard hasn’t always been performing as well as it does now, at least on the 3GS, there is absolutely no delay between hitting a key, and the character appearing on screen. The iPhone can show typed characters as quickly as you can type them. This is not the case on the Android device, which causes a number of problems.

First of all, you often don’t see typos until you’ve typed a number of additional characters, since the Magic simply can’t keep up.

Second, the Magic sometimes automatically corrects things the user has typed. The slow speed of the device causes the phone to correct words even after you’ve started to type the next word, so it’s often not obvious what will happen to a word once you’ve finished typing it since the phone is lagging behind.

In effect, you often don’t see what you’re actually typing, and even if you’re typing correctly, there’s a chance the Magic will replace the correct word with a wrong one long after you’ve finished typing it.

Auto-Correction

One area where the Android device beats the iPhone is auto-correction. While the iPhone only suggests at most one correction for every word the user types, Android suggests a number of words, and starts suggesting them even while the user is still typing.

Suggestions

Often, longer words can be typed by beginning to type them, and then selecting the proper word from the list of words provided by Android. Admittedly, I’m not sure whether this is a net gain in productivity (since you’re basically replacing the time you spend typing a word with the time you spend checking the list of suggested words, which may or may not be faster), but it does feel better.

While the iPhone (sometimes) manages to learn new words if you use them regularly, the Android device has a user-editable list of «custom» words. It’s possible to manually add words to the user dictionary. Like the iPhone, Android has a tendency to duck around with the things you type, but at least it’s possible to fix this problem without workarounds. Touching and holding a word opens a menu which allows you to add it to the user dictionary.

Both phones insert apostrophes for words like «can’t», but unlike the iPhone, Android doesn’t insist on replacing every perfectly good «its» with «it’s». Both operating systems have punctuation shortcuts (specifically, two spaces get turned into a period followed by a space).

Dynamic Key Resizing

The iPhone changes the size of the «touchable» area of each individual key while you type to make it easier for you to hit keys it thinks you might want to hit. David Pogue describes it like this:

Although you don’t see it with your eyes, the sizes of the keys on the iPhone keyboard are changing all the time. That is, the software enlarges the «landing area» of certain keys, based on probability.

For example, if you type the letter «N», the next letter is unlikely to be «H», but quite likely to be «G». Accordingly, the iPhone will increase or decrease the target areas of these keys. If you type «N» and then hit the space between «G» and «H», the iPhone will assume that you meant to type «G» because «NG» is a common letter combination in English, while «NH» is uncommon (except for people living in New Hampshire).3

While this often cheats you into hitting wrong keys when typing in a language the iPhone doesn’t support,4 it’s a huge help for the languages it does support. As far as I can tell, Android doesn’t seem to do this kind of key resizing at all – you never know how much you’ve been relying on this feature until you use a virtual keyboard that doesn’t have it.

Language Support

On the iPhone, the language of the on-screen keyboard can be switched on the fly, which also switches the dictionary to the corresponding language. Olivier Tharan writes that Android does not offer on the fly language switching for the keyboard. Even changing the locale doesn’t change the keyboard layout.5

Both keyboards allow access to umlauts by holding down a key, and both let you switch to a secondary keyboard with numbers and special characters. On the iPhone, you can slide your finger from the «numbers keyboard» key to a number or special character, and it will type that character and then switch back to the normal keyboard automatically. Android does not offer this shortcut.

Landscape Keyboard

Both systems offer support for a «landscape» keyboard. Turning the phone sideways will switch to a wide-screen version of the virtual keyboard. The additional horizontal space is used to display larger keys, which makes it easier to hit the correct keys. Applications need to support the landscape keyboard both on the iPhone and on Android devices, and not all apps do. In fact, some Android apps don’t like the virtual keyboard at all and exhibit strange behaviour when it appears. Presumably, they were made with the G1 in mind, a device with a physical keyboard. I would guess that these apps will eventually be updated to accomodate the virtual keyboard.

Multitouch

The iPhone uses multitouch6 for its virtual keyboard in two different ways:

  1. It’s possible to hit modifier keys and letters at the same time. While you can hit ⇧-h to get a H on the iPhone, you have to first hit the shift key, release it, and then hit «H» to get a capital H on an Android device.7
  2. It’s possible to type with two thumbs without missing characters. If you type «to» on an iPhone, you can type «t» with your left thumb, and then hit «o» with your right thumb while your left thumb is still on «t». The iPhone will recognize both characters. Android, meanwhile, will silently eat one of the two.

Android currently lacks multitouch support altogether, ostensibly because Apple asked Google not to implement it.

Conclusion

A virtual keyboard lives and dies by the details. It’s not that there’s a single feature which makes the iPhone’s virtual keyboard better than Android’s; it’s death by a thousand cuts. A number of small differences end up making a huge difference.8 Apple obviously spent a lot of time getting every little detail just right (well, except for the ducking dictionary), while Google decided to go ahead with what they had – which is usable, but no match for what the iPhone offers. I have no doubt that Android’s virtual keyboard will be improved in the future, and I’m looking forward to what they will come up with.

Update

Since this article was written, the default Android keyboard has improved quite a bit. Ubuntucat reviews the improvements.


  1. Using the default Android virtual keyboard, which can be replaced. Not all Android devices ship with this keyboard. back

  2. Which translates to roughly a 20% difference in surface area. However, since you’re likely to miss a key due to hitting to the left or the right of it, and unlikely to miss by hitting above or below, I think the 10% difference in width is the more pertinent number than the 20% difference in surface area. back

  3. I’m using bigram frequencies for this example, but I don’t actually know what the iPhone uses, so the specific implementation could be different from what I have described. back

  4. Because letter combination frequencies are different in different languages. back

  5. My Android phone currently only has English installed, so there’s not a lot I can say on this topic. back

  6. Thanks to taitoh for pointing out that I completely forgot to mention multitouch in the first version of this article. back

  7. And while I’m mentioning the shift key: Henning Hoefer points out that on Android, the labels on the keys reflect whether the shift key is active. The iPhone only shows this in the form of a glowing shift key, which one might easily overlook or accidentally cover with a finger. back

  8. Quote blatantly stolen from David Weissback

If you require a short url to link to this article, please use http://ignco.de/139

designed_for_use_small

If you liked this, you'll love my book. It's called Designed for Use: Create Usable Interfaces for Applications and the Web. In it, I cover the whole design process, from user research and sketching to usability tests and A/B testing. But I don't just explain techniques, I also talk about concepts like discoverability, when and how to use animations, what we can learn from video games, and much more.

You can find out more about it (and order it directly, printed or as a DRM-free ebook) on the Pragmatic Programmers website. It's been translated to Chinese and Japanese.