Untouchable
I dislike iOS 7 so strongly that I feel inclined to begin this post with a disclaimer about how much I admire Apple. Apple is my hero. They’ve always inspired me to be better at what I do, even when I was an ICU nurse. But they are not perfect. I can and should criticize their worst work when I find it — out of my admiration for their best work.
To understand the biggest design mistake Apple made in iOS 7, you have to acknowledge a fact so obvious that it can be easily overlooked: touch. The essential characteristic of iOS is touch. Skin against glass. A round, squishy, inaccurate little fat pad at the end of your finger. Unlike the PCs that iOS devices replaced, everything you do on iOS is driven by your thumb pressed directly against the screen. There is no intermediary device. Simply put, the importance of touch on iOS cannot be overstated.
Good iOS app design is obsessed with touch. Bad iOS app design takes touch for granted. We’ve all seen apps that look like they were designed by talented print designers, apps with beautiful screenshots and tasteful typography that nevertheless fall apart disgracefully as soon as you actually try to use them. These apps don’t fail for lack of talent. They fail because their designers have the wrong process. They’re beginning with aesthetics and squeezing in the interactions wherever they have room to fit. The right process moves in the opposite direction. A good iOS app designer begins with touch, and only afterwards chooses aesthetics that complement and enhance the underlying touchable structure. iOS 7 has been designed with the wrong process.
What makes something touchable?
For things that scroll or zoom, touchability means that the content under your finger moves with your touch, without any lag or jitters. iOS 7 does as good a job with this as with previous iOS versions. In some cases it does it even better, as in the new swipe-to-go-back gesture in apps like Safari and Mail, or the bouncy physics that you can see when swiping up the Control Center.
For buttons, touchability requires something different. Touchable buttons need borders. By “borders” I don’t mean outlines, (although outlines are included in my usage of the word). I mean borders in a broader sense. A button is a tappable area, clearly delineated from the un-tappable content around it by an obvious border.
Borders around buttons can be real or implied. A real border is like the roundrect shape around a “Buy” button on the App Store. An implied border is like those around the toolbar icons at the bottom of the Safari screen.
Implied borders are easy to get wrong. Care must be taken to make sure that aesthetic choices don’t obscure where one button ends and another begins. This is why iOS app designers make all toolbar icons fit into a roughly square shape. When set together in a row, adequately spaced, the eye can perceive the 44-by-44 point implied border around each button.
iOS 7’s designers have abandoned bordered buttons in favor of borderless colored text. I think this choice is unjustifiable. It is the root cause of my deep dislike for how it feels to use iOS 7. It introduces unnecessary tension and makes everything less usable than it ought to be.
Color alone simply cannot be the way to identify a button. You don’t touch a color. You touch an area. To activate a button, you must touch a spot inside of its boundary. Text floating in the middle of vast whitespace doesn’t define a boundary. Only borders define boundaries.
Compare the navigation bar buttons from the native Twitter share sheet with those from Tweetbot’s navigation bar:
In the iOS 7 share sheet, there are three text labels: Cancel, Twitter, and Post. Which of these three are buttons and which ones are not? Those of us who are lucky enough to have good vision might correctly guess that the blue ones are buttons, but what if we were color blind? Furthermore, how do we know whether or not the title doubles as a tappable button, like the title button in Tweetbot that can be used to toggle the source list?
The Tweetbot title button is obvious because it’s enclosed by obvious borders. If Tweetbot were redesigned to strictly adhere to the iOS 7 paradigm, it would be impossible to know whether or not the title was tappable. What if this fictional Tweetbot made the title blue also. Wouldn’t that actually make it harder to distinguish buttons from inert labels?
There are many other examples in iOS 7 of how the lack of borders creates a dizzying confusion. The Contacts app is a particularly strong example:
How do we know that “John” and “Appleseed” are editable? They’re not blue. They’re black, borderless, and floating some inscrutable distance from one another and from the other elements above and below them. How do we know that they are separate text fields, and not one big multiline text view? Is “Company” editable? If so, where does it’s tappable region end and the “add phone” area begin? Likewise, what about the empty region between “add phone” and “add email”? Are the cell separator lines defining a tappable boundary around the “add email” row? You’d be forgiven for assuming so, since those lines create the impression of a tall tappable row, but you’d be wrong.
I imagine that folks might argue that web page links are examples of buttons made solely from colored text. Aren’t people already familiar enough with links on the web that using the same paradigm on iOS is a simple change?
My counterargument is that web links are subject to the same visual risks as native buttons on iOS. Links can be just as confusing if not treated carefully. Links that use not only a different color but also some other means of differentiation, like a heavier font weight or an underline, are easier to use than links based on color alone. This is why Mobile Safari paints a dark grey roundrect over a link’s tap boundary when it’s pressed. It makes it explicit exactly which link you’ve tapped:
Apple’s goal of refining iOS down to its essential elements is a noble one. The video that they played again at the October Event yesterday is full of inspiring ideas. Unfortunately, much of iOS 7 suffers from an overzealous fixation on the reduction of visual flourish, ignoring the deeper functional roles that the previous visual effects performed. Buttons don’t have to be made from green felt or stitched leather, but they still need to look like buttons.