DVzine.org navigation The Zine Type DV Now DV Info DV International About DV Blog The Dvorak Zine

10/18/2012

iOS Dvorak Layout Design

We at DVzine.org are, naturally, big fans of elegant design. So it should surprise no one that Frunch, Alec, and GCB are all moderate-to-extreme Apple enthusiasts.

As we discuss in the zine, Mac OS X has come with a built-in Dvorak option since it was released, and it has by far the easiest and most comprehensible keyboard-switching interface for those who share a computer with non-Dvorak typists.

Much to our collective chagrin, iOS devices (iPhone, iPod Touch, and iPad) are not so Dvorak-friendly. You can configure an external keyboard to work with these devices using the Dvorak layout, but the on-screen language selection has never included a Dvorak option. To get Dvorak on iOS, you either have to jailbreak your phone to use Cydia, or install dkdigital's app which allows you to type in Dvorak and then copy/paste your text into other apps. Neither option is perfect.

At first I was flabbergasted at this seemingly simple omission in iOS, but upon further review it makes sense: the on-screen keyboard for the iPhone and iPad are both custom layouts, not direct translations of Qwerty. Observe, for example, the relation between the home row and the lower row of keys on an iPhone:

Click any image in this blog post to enlarge it!

Why have the keys on the bottom row been shifted a half-step right so that they are in columns instead of offset at their usual angle? It's because the punctuation keys that normally fill space on the lower right side have been moved to an entirely different screen (with the rest of the punctuation and number keys). This leaves room to put a shift key on the left and a delete key on the right end of the third row.

It's counter-intuitive to have the delete key on the third row, rather than its usual home on top-right, but it had to be done. This is because the letters on Qwerty are weighted to the top row: 10 letters top, 9 letters on the home row, and the final 7 on the third row. Apple clearly put some thought into this design: the changes are not so significant as to flummox a user's intuition, but it's enough to get all the necessary keys onto the screen cleanly. 

Apple solved this Delete button strangeness on the iPad by taking advantage of the extra screen width to add a column of keys, making room for the Delete key on the top row, for the Return key at its natural place on the home row, and for two punctuation keys and an extra shift key on the lower row:


While visiting Alec in the Bay Area this week, we got to talking about this puzzle, and our sadness about not being able to use Dvorak on iOS. Guess what we decided to do?

That's right, we designed a Dvorak layout for iOS! To make it more likely that Apple would consider implementing our design, we set some rules for ourselves:
1. We need to use the same keys provided in the Apple layouts, so that no secondary screens (punctuation, numbers, etc.) would need to be altered.
2. We are only allowed to compromise design decisions in the same way that Apple did (ie. changing the size of keys, shifting row alignment, etc.)

Let's start with the iPhone standard horizontal keyboard. Dvorak's home row has ten keys, one more than Qwerty. To account for this, we shift the row left and add a key on the right, which uses up the blank space on either side in the Qwerty layout. Dvorak's top row has three punctuation keys, which we remove, leaving only seven letters and plenty of space for the Delete key in its natural position.

We still have extra space on the top row, so we move the 123 key to the top left, shifting the letter keys on the top row into a more natural alignment with the home row. (This alignment isn't perfect: it's a half-step off of a physical keyboard -- exactly as far as Apple was willing to shift their third row.)

We widened the language button at the bottom, since we are likely to use it more than Qwerty typists (like when those archaic Qwerty typists borrow our phones!)

Have a look at the difference between the Qwerty iPhone layout & the iPhone Dvorak design suggested by DVzine.org:


Here they are in vertical mode:


We think it looks pretty good! The size of the backspace key is probably the biggest concern, and it could be repaired if we compromised on our alignment, but this pretty clearly demonstrates that an iOS Dvorak layout is feasible.

Apple made some sacrifices to make their keyboard work, too: their backspace is unnaturally located, and the alignment of the center row with the bottom row goes against the traditional Qwerty offset. Dvorak lets us play by the same rules, but create a little more space by having the full ten keys on that home row. Qwerty only has nine, so it end ups wasting space to the right and left on that row. I think a smaller Delete key in a more natural location is a pretty fair compromise.

So what about the iPad?

The extra space provided by the iPad's bigger screen means the iPad version requires less compromise. Due to our half-step limit on key re-alignment, we end up shrinking the right-side shift key and compressing the Return key to get that tenth key onto the home row. We also noted that the key widths on the iPad aren't exactly uniform: you can observe this yourself by comparing key sizes: the letter keys on each row are different widths, with slightly wider keys at the top.

We take advantage of this same compression trick to make our home row work without shrinking Return too much. Dvorak's modestly populated top row has plenty of room to incorporate the Comma and Period keys that the iPad fits in, and still allows for a generously sized Delete key. The rest of it falls out pretty cleanly on the iPad. Have a look:



It was fun to imagine how these keyboards might look: it would be more fun to use them! DVzine.org would love to be credited if you re-use these images, but if anyone out there at Apple is reading, you have our full permission to use these designs, either as-is or as drafts, to get a Dvorak keyboard into iOS. No credits requested, no copyrights suggested, no questions asked!

And if any of our regular Dvorak enthusiasts have connections in Cupertino... don't be shy!

13 comments:

Joel Wong said...

Hello dvorak zine! I am not sure if this is the right place for asking for opinion about my own dvorak variant. It is :
",.pyzgcrk/=\
Backspace AOEIUDHTNS
QJXB:LMFWV

What do you think??

Alec Longstreth said...

Hi Joel, we don't really go in for Dvorak variants, as we are devoted to the original. You might have better luck at the Yahoo alternative keyboards usergroup: http://groups.yahoo.com/group/altkeyboards/

Noel Arzola said...

I'd love to help with a tutorial on setting up Dvorak on Android as it does not require any third party apps but is not the most obvious process. Can provide screenshots and direction (=

Daniel Elliott said...

This is really good work. Well done guys. I'm still working on getting petition signatures up here in Seattle. Thank you for posting this!

JapanYoshi said...

Hello DVZine! When the iOS 7 came out, I was silently but passionately hoping for a Dvorak screen keyboard. I thought it was about time Apple recognized the layout and have it in its new OS. IT DIDN'T HAVE THE LAYOUT.

So I'm thinking of making an online petition. It will have mock-up edited images of the iOS 7 keyboard rearranged in the Dvorak layout similar to yours, as well as Colemak, a version of Maltron, modified French Bepo, and Japanese Oyayubi Shift (Thumb-Shift).

But unfortunately, I have no idea how to start a petition. If you could lead me to the right place, and possibly back me up, it'll be an honor for me!

Viva La Dvorak!
Haruki

Paul S. said...

Great work guys! I'd love to see an update for the new 4" iPhones and iOS 7.

Also, I have some suggestions for the iPhone layout:

Consider making the top row symmetrical so that the 123 key is shrunk and the delete key is enlarged so they are the same size as the shift and delete keys on the qwerty layout.

The home row is great and should be left as-is.

Also, consider leaving the language button the same size as the qwerty layout and replacing the 123 key on the qwerty layout with the shift key.

This results in a much more symmetrical layout overall that I think would be easier to actually get implemented on the phone because it would be very similar to the existing qwerty layout (essentially, the qwerty 3rd row gets pushed to the top row and the 1st and 2nd rows get pushed down). It also has the added benefit of including a half-step alignment offset for all three rows, which will increase vertical accuracy (if you aim for the "E" on this revised layout it will be less likely to be mistaken for a "P" or a "J" as those keys will be moved a half-step to the left).

Thanks!

Shawn Levasseur said...

I use Dvorak on physical keyboards (and iOS allows for using a Dvorak layout on Bluetooth connected keyboards),

But for on screen keyboards (especially on the iphone) Dvorak is a bad idea.

Part of what makes touch screen keyboards possible is the predictive/corrective feature. Where as you type a suggestion of what your completed word should be (if it's a longer word) or should have been if it's a misspelled word.

This works better when keys that might be accidentally hit instead of the intended target are less commonly used letters. The whole premise of the Dvorak layout is to put the most commonly used letters together.

Qwerty isn't perfect either, with three vowels right next to each other, and the very common 's' right between the most commonly used vowels.

Moving to a Dvorak layout would lead to a ton of autocorrect errors.

Maybe an ideal touchscreen keyboard layout could be developed, where all the most commonly used letters are kept as far apart from each other as possible.

Valentin Anastase said...

Great job!

JapanYoshi (I've grown so much) said...

The iOS8 has FINALLY incorporated third-party keyboard layouts, which means we can make this layout real with the right coding. Problem is, the keyboard has to be an app that goes through the App Store (Why the hell is this necessary?!).

armill15 said...

Hello, I would like to use the layout you have created for IOS 8. Any issue if I charge a dollar for the keyboard app?

Alec Longstreth said...

Hi Armil - I don't think it's an issue if you charge a dollar. It'd be well worth that price to get Dvorak on iOS 8 devices!

Vere said...

Apple is wrong in many of their keyboard decisions. The wide space bar is the biggest waste of space in the very small real estate of the iOS keyboard screen. Don't follow them down that counterproductive path.

As of today, there is at least one Dvorak keyboard for iOS 8. The one I found is called Dvorak by Tobias Mao. He gives us Dvorak with comma, period, and apostrophe. It looks good, so far.

Archagon said...

Is it OK if I pimp my keyboard here? I recently released my own Dvorak keyboard for iPhone! (Colemak also included.) It's built using the "Tasty Imitation Keyboard" framework, my open-source attempt to make a convincing duplicate of the iOS system keyboard. For the layout, I decided to leave the mode change and backspace buttons where they were on the system keyboard, though I could be convinced to add an option to move them to the corners as per the article. It costs a buck, but I think it's the best Dvorak offering in the store right now. (At least, from what I've seen.)

http://itunes.apple.com/app/id940278139

(Unfortunately, autocorrect and physical keyboard support are missing right now on account of the keyboard framework limitations.)