iPad Frees Designers From the Tyranny of QWERTY
by Jesse James GarrettOkay, let’s get this part out of the way right up front: This blog post is not about how touchscreen technology makes it so that alternatives to QWERTY such as Dvorak will finally have their day in the sun. (Perhaps — but not today.) Instead, I’d like to look at some interesting ways the iPad (and similar touchscreen devices) enable designers to rethink key layouts and optimize them for particular user tasks.
When the key layout isn’t locked into a particular hardware configuration, designers have the freedom to rework layouts in ways that are relevant to the user’s specific context at that moment. As an initial point of comparison, here’s the standard layout the iPad uses for most text entry:
Now look at the layout the Mail app gives you when you select a field where you’ll be entering an email address, such as to To: or Cc: fields on a message:
The letters are all the same, but the other keys have changed subtly for the task: Punctuation marks such as the exclamation point and question mark, which can’t appear in an email address are replaced with more likely candidates such as the hyphen, underscore, and @-sign. To accommodate some of these extra keys, the space bar has been shortened a bit to make room. (But wait: If this key layout is supposed to be context-relevant, why is there a space bar? True, spaces can’t appear in email addresses — but they do appear when typing names to pull up email addresses from your address book.)
There’s no space bar in the key layout for the URL field in Safari, which instead adds on colon, slash, hyphen, underscore, and a handy “.com” key:
Note also that in Safari, Apple has replaced the default “return” key with one that carries a little more meaning in this context: “Go”. This approach can be found elsewhere on the iPad as well, such as a “Join” button when entering a password to join a new wireless network.
These variant key layouts start to get really interesting in Numbers, Apple’s spreadsheet application. Again, you see very different key layouts depending on context — in this case, the type of data you’re entering into a spreadsheet. Click a cell formatted to accept only numbers, and numbers are the only thing you can input:
The number-input layout contains a few extra functions, to format a number as currency or a percentage, but for the most part it’s a straight-up ten-key like you’d see on most hardware keyboards. In other areas, the app provides some specialized layouts that don’t match any existing input device. For example, here’s what you use to select the month when entering a date:
Entering the day of the month provides a variation on a traditional ten-key layout, but it has no decimal point, instead offering a handy “Today” button:
The time entry layout works similarly, with a “Now” button to insert the current time. It’s interesting to note that they went with keys here rather than some other approach, such as the slot-machine-like reels used to set times in the iPhone’s Clock app. Maybe the speed and practicality of keys won out over the fun factor of spinning reels.
Entering functions in a Numbers spreadsheet brings up an even more specialized layout, with dedicated keys for Boolean values, math operators, and the ever-popular SUM function:
In all of these cases, these are specialized input interfaces, not UI controls. The key layouts in Numbers offer some limited navigation to support rapid data entry, but the expectation is clearly that if you want to select a cell other than the next or previous one, you’re going to tap it directly, not use virtual arrow keys.
What Apple has done with spreadsheets, email, and the browser can be applied anywhere users might have specific input needs. For example, when using a Twitter client with Apple’s default key layout, it takes four taps to insert a poundsign and return to the alphabetical keyboard to begin typing a hashtag. A custom key layout could surface both the poundsign and the @-sign — and maybe add a dedicated RT key for good measure.
Entries (RSS)
June 11th, 2010 at 2:08 pm
To be totally fair, I think that this was possible on iPhone, as well. I know for sure that it’s possible on Android.
June 11th, 2010 at 2:27 pm
Eric, you’re absolutely right: all of this was possible on other touchscreen devices before the iPad. I do think that the larger screen of the iPad opens up opportunities that simply aren’t possible with a smaller form factor. Additionally, I’m not aware of any examples of this being done on touchscreen phones.
June 11th, 2010 at 2:41 pm
Elevator buttons placed at a level that is acessable to those in wheelchairs.
Emergency exits that open towards the street.
A hair dryer that shuts off when it is put back in its storage unit.
It is these subtle, and often under appreciated, changes that make good design good in any arena.
June 11th, 2010 at 3:14 pm
When I can change the layout to Dvorak, I will be freed from QWERTY.
Typed on an iPad.
June 12th, 2010 at 5:07 am
Thx for the article, we sse a lot of nice design choices here.
I wonder on which extend of adaption of the interfaces will be useful. There is some possible danger, that when every applications creates it’s own entry modes, that consistency will deteriorate too much. But I believe that those adaptive entry modes are wonderful.
June 12th, 2010 at 9:10 pm
[...] 来源：Adaptivepath 编 译：MazingTech [...]
June 13th, 2010 at 12:33 am
[...] 来源：Adaptivepath [...]
June 15th, 2010 at 2:13 am
Thanks for this post, Jesse! I was wondering how easy it would be for a developer to change a key on the keyboard.
Apparently one has to write a complete custom keyboard-panel for this. I collected a view Link about this: http://uxzentrisch.de/custom-mobile-keyboard-design/ (the article is in german but the links are all english, look below the “Technik” headline).
June 16th, 2010 at 2:20 am
There are still many couch-surfers using “hunt and peck” wehen typing Text on a QWERTY keyboard… Wouldn’t it be a courageous step to help these useres by implementing an alphabetical ordered keyboard? Or is it already violenting the “don’t make me feel stupid”-mantra?
June 16th, 2010 at 9:41 pm
Tobias, as an app developer myself, I remember how back in the iPhone days, you needed to add a button to the iPhone numeric keypad. Perhaps those same techniques can be applied here.
And remember folks, there are MANY international variations to consider, including Japanese & Chinese sketch-to-input layouts, with hopefully Arabic and Korean versions coming soon.
A safer practice, for RT and similar commands is a toolbar on top, as appears in Safari when filling out forms like this one, with buttons for Next, Previous, and AutoFill. Or make sure the layout is English before fooling around with overlays and alternatives.
(Also typed on an iPad.)
June 19th, 2010 at 8:36 am
[...] Essa excelência em usabilidade é percebida em sua totalidade no dia a dia, nos detalhes de uso de sua interface. Vamos ver, por exemplo, o funcionamento do teclado virtual do iPad, analisado nesse artigo do Jesse James Garrett no blog da Adaptive Path. [...]
June 25th, 2010 at 4:13 am
@Louis: Thanks, thanks for pointing out the topic internationalisation!
@Florian: I would not like or recommend it. But I miss any proof
July 1st, 2010 at 7:04 am
One has to be careful when providing a custom keyboard to make sure you really know what keys the user may need. In the Mail app example you stated
“Punctuation marks such as the exclamation point and question mark, which can’t appear in an email address are replaced with more likely candidates…”
The problem is that the exclamation point and question mark are valid characters in the local part of an email address. Granted they aren’t used much, which explains why so many believe they are not valid, but they are legit. You can even have a space in the local part if it is in a quoted string.
Ref: RFC 5322 Section 3.4.1
July 5th, 2010 at 2:38 am
[...] 在看了iPad Frees Designers From the Tyranny of QWERTY后，我算是被Apple的UI设计精神给感动了。再普通不过但是又最常用的虚拟键盘设计，经过Apple之手，却变得大不一样。如此贴心的设计，真让人感动。 [...]
July 26th, 2010 at 2:49 pm
Is there an app for Chinese hand writing using the screen as a touch sensitive pad in iPAD?