Coding & Design
Published in

Coding & Design

Confusion with iOS7.1's new keyboard

You’re killing the experience for the common user like me.

iOS7.1, an update to the new iOS which championed flat design and left the Forstall-era skeuomorphism in the dust, was released earlier this week. It comes with a few changes to the user interface, added some interesting new features (like CarPlay) and also addresses some bug fixes — you can read more about it on a comprehensive piece by Elyse Betters on PocketLint. Moreover, iOS7.1 saw a rapid adoption rate of 12% within 48 hours of its release, and moved on to be installed in 1 of 5 devices by the 72-hour mark.

So on a quiet Thursday evening, I decided to give it a go. The process took under 30 minutes from start to end, no major problems. In fact, the phone feels zippier with iOS7.1 running. No more major holdups when launching and switching between apps, which was definitely a plus since upgrading to iOS7 have made me question my perception of time since my ancient iPhone 4's performance slowed to a crawl.

However, I noticed something different—not in a good way. I find myself often confused when I was typing. Is the caps lock/shift key toggled? It was only until then I realized that Apple has made a slight tweak to how the caps lock/shift toggle and the backspace buttons, as well as increased the weight of the letters on the digital keyboard, all in the name for improved visibility and a more friendly, less confusing experience.

Nope. The new keyboard confuses me more than ever.

Over the next two days I still grappled with checking the caps lock/shift key, worrying that I might have accidentally toggled it on by mistake. I don’t want to send screaming texts to my date; post capitalised status updates on Facebook; share perceivably rude tweets on Twitter.

The visual toggle

The ways how iOS7 allows the end user to differentiate between different toggle states can be generally categorised into three methods:

Fill change

This technique involves using a change in the fill of a tab item to indicate its toggle status, such as in Safari.

Safari app.

Colour toggle

In other apps, greyscaled icons indicate an inactive tab. When toggled to an on state, the icons take on a colour that is shared uniformly across the panel. The icons for Artists and Songs are example of this technique, but the Music app uses a mix of both inversion (see below) and colour change to indicate toggle state.

Music app.

Line trace to solid fill inversion

Finally, there is also the visual method of switching between two versions of an icon — from a line trace (inactive) to a solid fill icon (active), as seen in the App Store app, with the exception of the Search icon.

App Store.

Also in the Photos and Phone app:

Photos app.
Phone app.

This pattern has also been picked up by other apps, such as Dropbox, Facebook Messenger and Whatsapp.

Facebook Messenger.

Betraying the convention of flat design in iOS7

The new keyboard design for iOS7 violated my expectations of how iconography works in the iOS7 environment. I have been trained and conditioned to recognize filled icons as being toggled on, and line-traced, transparent-fill ones with the opposite.

However, this very same convention does not apply to the latest iOS7.1 keyboard layout. In either toggle states (on and off), the shift key remains filled. The off state, however, uses a white fill against a grey background while the on state uses a black fill against a white background. I was majorly confused.

When is the shift key toggled? It took me awhile to figure that out.

To complicate the issue, the shift key in either state appears to be a bastard child of the stylistics of two distinct function keys on the keyboard —the numeric/language toggle and the alphanumeric keys. The former has black type/icons set against a grey background; the latter has black type set against a white background.

But the caps lock/shift and backspace key are neither.

I am sure I will get used to the redesigned toggle keys — it is more of a minor inconvenience than a major design flaw. However, I still believe that this visual inconsistency should be corrected.

And that’s how the cookie crumbles.



All about coding and designing for the web — from HTML, jQuery and CSS to the deep recesses of the art of coding.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Terry Mun

Terry Mun

Amateur photographer, enthusiastic web developer, whimsical writer, recreational cyclist, and PhD student in molecular biology. Sometimes clumsy. Aarhus, DK.