We’re big fans of Polar, the “Instagram of quick opinions,” as well as its creator and designer, Luke Wroblewski. But even a mobile designer of Wroblewski’s stature (he literally wrote the book on “mobile first” design) found that redesigning a popular app for iOS 7’s new look can be more perilous than it seems.
The iOS 6 version of Polar was hardly an example of so-called evil skeuomorphism. But when Wroblewski stripped out shadows, subtle textures, and button-like affordances, Polar’s formerly cute, clear UI became scattered and lifeless. It was flat, all right: like a squirrel smashed dead on a highway. Here are three lessons that Wroblewski learned about how to bring his app back to life for iOS 7.
Wroblewski doesn’t mince words: Jony Ive has made app design harder. “We literally have fewer tools at our disposal now,” he says. “‘Physical’ cues like depth and texture were ways of creating meaning. You could pop things out or recede things to communicate What is this? and How do I use it? It’s like being a plumber who’s used to having a wrench, a screwdriver, and a hammer–but now the wrench is gone so you have to make the screwdriver do more than you’re used to.”
Users want to know instantly what is most important on a screen, which is less so, and so on–a principle called “information hierarchy.” Without textures, shadows, and other “button hacks” to lean on, Wroblewski says, “you have to recreate this hierarchy with color, contrast, and visual gestalt principles.” Polar’s redesigned interface looks more like a bold poster than a machine with obvious buttons and levers. But this back-to-basics visual approach–along with a ruthless ability to edit out extraneous details–“can get closer to the raw essence of what makes an interface hold up,” Wroblewski says. “It’s much harder to do, though–Apple itself is struggling with this in their core apps. Go too far and your app just looks like a wireframe.”
“Lightness” is a big theme in iOS 7, from its widespread use of Helvetica Neue to its propensity for thinly drawn, outlined icons instead of solid shapes. “All of Apple’s core apps are using this vocabulary,” Wroblewski says. But scooping out the “filling” of all your icons could leave your user experience feeling hollow. “We tried 20 variations of our ‘polar bear’ icon and the outlined look just didn’t work,” he admits.
Polar even polled its users about the usability of outlined icons versus solid ones–and “solid crushed hollow, except in one case: speech bubbles,” Wroblewski continues. Why? Wroblewski suggests that simple shapes, like the oval-with-tail of a speech bubble, work fine as outlines, while complicated “outlines within outlines” (like a camera icon) seem subtly harder to make sense of. But instead of debating an all or nothing approach to icon outlines, Wroblewski urges designers to take individual meaning into consideration in each case. “We decided to go ‘against’ Apple and make our ‘Create Poll’ icon solid, simply because it’s the primary action in the app,” he says. “Leaving it hollow just wasn’t getting the importance across.”
“We don’t know what iOS 7’s new effects can be used for yet,” Wroblewski asserts. “The depth they provide is certainly not a replacement for making something look like a button but they seem to have potential to clarify things.” The designer found that out the hard way, when he experimented with blurring or “frosting” certain interface elements in Polar as a way of restoring the information hierarchy he lost with bevels and shadows. “A lot of feedback came in saying it felt like an error, a mistake, a bad image render,” he says. “Basically, it was confusing. In subsequent versions I blurred it more and that improved things, but we definitely need to keep experimenting. That’s the only way that we can hit upon what feels ‘normal’ about these unfamiliar effects.”
For now, Wroblewski thinks that translucent layers work best under dialogs or controls used to input information–not a literal “button replacement,” but a new way of saying “this part of the screen is touchable now as it overlays what is below it,” he says. “iOS 7’s Control Center is a great example of this. The information on it is totally flat, but you still know that it will have button like behavior because it sits on top of whatever was previously on screen.”
By putting these observations into practice, Wroblewski and his team were able to redesign Polar to fit iOS 7’s native look and feel while preserving the app’s own spunky personality–and its basic usability. Flat may be “in” at Apple, but just like skeuomorphism, flatness is neither good nor bad in itself. It’s all in the details.