Polar's new input fields weren't that hard to redesign for iOS 7...

...but the app headers required a bit more finesse.

Translucency effects can get weird.

"Compare Twitter’s compose screen on iOS 6 to the one on iOS 7: the lack of strong contrast between elements makes it less immediately apparent where the primary call to action (Tweet) is located," Wroblewski cautions.

Wroblewski says that even Apple is struggling to reassert information hierarchy in its iOS 7 designs.

One of Polar's early iOS 7 designs for a list of polls. Wroblewski notes how "a number of visual elements blended together too much making it hard to distinguish individual polls in the list."

Without relying on solid graphic design principles to re-establish information hierarchy, iOS 7 design can look too flat.

Without relying on solid graphic design principles to re-establish information hierarchy, iOS 7 design can look too flat.

Polar's redesigned interface looks more like a bold poster than a machine with obvious buttons and levers.

Hollowing out iOS 7 icons "just because" isn't a good idea.

Various iterations of Polar's icon bar.

Polar's "create a poll" screen felt flimsy after the flattening process...

...so Wroblewski experimented with some blurring effects. Users were confused.

Co.Design

3 Essential Tips For Redesigning An App For iOS 7

Luke Wroblewski, creator of the popular polling app Polar, outlines the challenges facing anyone redesigning their app for iOS 7's new look.

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.

1. Rediscover what you learned in graphic design 101.

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."

2. Don't make all your icons hollow just because Apple does.

"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."

3. Tread lightly when using novel visual effects like translucency.

"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.

[Read Luke Wroblewski's detailed post on redesigning Polar for iOS 7 here]

Add New Comment

2 Comments

  • Barry

    While I get that one does not want their app to look out of step, I am surprised by the rush to re-design apps to mimic iOS7's flat design. In essence what they are doing is ceding visual branding to Apple rather than furthering their own brand.

  • Dom

    « Jony Ive has made app design harder ». That says it all. And Apple eating its dog food resulted in hideous, unusable interfaces (Mail, Calendar, AppStore...).