Virtual keyboards On iPhone and Android

What this foreigner writes is worth learning. Turn it over first.

Http://ignorethecode.net/blog/2009/08/07/virtual-keyboards-on-iphone-and-android/

August
7, 2009 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 failed to create complex foldout systems which use physical space.
Avoid this complication. on the other hand, they replace a very obvious user interface element-a physical keyboard-with a more ephemeral input mechanic. 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 mechanic.

Comparing the iPhone to the HTC magic, a phone running Android^{1,
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:

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:

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:

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

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:

(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, andsome
People may actually prefer the HTC magic's smaller screen, but even for them, the larger screen wocould 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 isOnlyLooking 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 abve its key. Here's what this looks like on both devices:

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 essential 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 Ming 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 ve finished typing it since the phone is lagging behind.

In effect, you often don't see what you're 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 got 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.

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 doesFeelBetter.

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
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
The iPhone will assume that you meant to type «g» because «ng» is a common letter combination in English, while «NH» is uncommon (Login T for people living in New Hampshire ).³

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 ages itDoesSupport. 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.⁵

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 sort cut.

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 wowould guess that these apps will eventually be updated to accomodate the virtual keyboard.

Multitouch

The iPhone uses multitouch^{6
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 transfer-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.⁷
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
Huge difference.^{8 Apple
Obviusly spent a lot of time getting every little detail just right (well, doesn t 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.}

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.

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 abve or below, I think the 10% difference in
   Width is the more pertinent number tha the 20% difference in surface area.

3. I'm using bigram frequencies
   This example, but I don't actually know what the iPhone uses, so the specific implementation cocould be different from what I have described.

4. Because letter combination frequencies are different in different ages.

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

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

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.

8. Quote blatantly stolen from David
   Weiss.

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

If you liked this, you'll love my book. It's calledDesigned 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.