Thursday Sep 26, 2013 by Drew Condon - UX Designer, RunKeeper
Deep thoughts on the iOS7 design have been pretty limited so far. Focused mostly on outrage about neon colors, lamenting a plague of flat design and minimalism, and how “anyone could have made better icons.” Not terribly useful to a team contemplating migrating an app with millions of customers to a new UI paradigm.
And yet, at a level higher Apple’s design themes for iOS 7 are surprisingly…not at all controversial. Deference, Clarity, Depth. Its pretty much what serious designers have been focused on working towards for the past fifty years.
When the RunKeeper team looked at what Apple was actually trying to accomplish with iOS7, we already fundamentally agreed with the underlying principles, and agreed this was a version 1 of a foundational new OS. It will evolve in new ways that the first release does not make entirely clear.
That said, yes, platform patterns matter. The pattern seeking behavior of the mind is what makes patterns useful; it’s why login shows up in the top right for no other reason than “it does.” So as usual, we walk a fine line of not over thinking patterns when they work (on platform or otherwise) and creating and teaching better innovative designs to suit users’ needs.
Two major evolutions stood out. 1: A promotion of animations, transitions, and effects to a major part of any mobile experience; 2: Six years after mainstreaming gesture-based touch screen UIs, the training wheels can start to come off.
With iOS7, the price of physics, animations, and complex view transitions just fell. Motion effects, Dynamics, and a core physics engine should make it much easier for applications to define innovative new interaction models and patterns to delight customers. So this is basically like when PhotoShop introduced the drop shadow in 88. Boom…lots of shadows.
…and enough has been said about the reasons behind a transition to minimalism; not as a stylistic choice, but as a language driven by a deeper level of design principles (notably, Deference and Clarity).
Turning down the volume
By comparison, iOS6 was a loud OS. Even a basic list had pretty complex visual ornamentation. Shadowing, thick gradient bezeling, bold label type, patterned background, colored active text, and high contrast disclosure arrows. By contrast, the actual content runs middle of the pack.
With iOS7 we used this as an opportunity to adopt many of the new table visuals, and basically turn down the volume across the app. We eliminated a lot of ornamentation whenever it felt needless, were much more disciplined about the use of bold or heavy type, and adopted more light 1px (not point) lines to create subtler grouping for information display.
Color as Affordance
For whatever reason, over time, RK drifted into this kind of blue desert where everything interesting was just made blue by default. I don’t know how we got there, but we knew we wanted to improve this Smurphy dystopia and make the actual content easier to understand.
Additionally, if you really want to use borderless buttons for effect, you MUST be disciplined about your use of color around the app…and we had not been. To cope, we adopted a high saturation blue as our tint color, pulled blue out of nearly every screen element, chart, and icon that was not directly interactive, and replaced them with other existing brand colors that had too long been ignored.
Next we maintained the top blue bar as the only non-directly manipulable blue object and baked super low saturation blue into all our light, accent, and background colors to keep a consistent brand feel without being heavy handed.
Using just color in the form of borderless buttons cuts down on a lot of visual clutter, and we think being disciplined about its use should maintain the same level of affordance that iOS6’s tabs and buttons conveyed.
WHAT WE DIDN’T LIKE
Thin text looks great. So does small tiny text. So do lots of things that we humans don’t have to actually use every day. In the original betas iOS7 really loved New Helvetica Thin. And I get it, it looks great on stage with a keynote behind you. But here’s the problem…it’s hard to read…and well, yeah, that’s what text is for.
And we’re especially sensitive to the fact that we very often have users using RunKeeper in dim and bright light conditions in situations of high anxiety and low dexterity and motor control. For the reasons above we used this as an opportunity to turn down the volume where applicable (Avenir Roman, not Light, is what we use in 90% of the app), but preserve other font weights where needed to really ensure legibility (Like Avenir Heavy in tracking).
Mobile focused apps have an almost default setting that the mobile UX is the branding; the experience is the brand. We don’t have a store, we don’t have call center, we don’t run TV ads, and we literally can’t make the logo bigger. So every little chance to implicitly support a customer having a (great) memory of our company matters. Not surprisingly, color is one of those subtle differentiations.
While the “transblurred” header/footer with multiplied background image looks amazing in Dribbble comps, right now, it’s just not a reality (not easily). Apple sets the glass effect to about a 60% opacity. Meaning, for anyone with highly saturated brand colors, welcome to washed-outville. We opted to skip the effect on the top bar until we can find something that’s both performant and lets our brand color stand out.
WHAT WE’RE STILL TALKING ABOUT
Is Gravity Skeuomorphic?
There’s chatter that the layering and depth in iOS7 is actually MORE skeuomorphic than before. All the screens-on-screens and glass and physics make the design more—not less—dependent on literal metaphors from the real world.
It’s true; software allows us to create things independent of constraints of physical reality (there is no gravity in the matrix), but that doesn’t mean we need to reject the fact that the operators happen to live in a familiar, learned, unavoidable physical reality. There is an actual difference between ornamenting a design with stitched leather and simply admitting that light, inertia, and matter exist as fundamental forces of physics in the universe we live in. Using transparency, blurring, laying, motion, or making objects bounce off one another is not artificial, it’s natural.
There is a fine line between natural and ornamentation, and that line is usually made of stitched yarn.
Yes. Outlined icons are empirically harder to detect and recall because the gestalt of forming a figure in our mind is made more difficult by adding unfilled edges. But icons in general are hard to use, and monochromatic icons are even worse, and designers make both those choices all day long. Why? Because its a tradeoff.
So why did we like them in this context? You’re probably not aware that there’s not a whole lot of screen to work with on a mobile device (unless you’re running with your Note), and each pixel represents a choice to convey information. Having a stack of 5 thick, shadowed, dark, embossed and bezeled icons persistent on our most important screens adds visual weight and is a constant attention tax. In aggregate, they represent a choice to add a lot of persistent “information pixels.”
Both the header and the nav buttons/tabs are well established patterns for Apple (see every non-game iOS app ever), so our concern about discoverability and learnability was slightly alleviated here. We also thought it looked great, and helped give the app a more lightweight feel.
That’s a Wrap
A boat load more discussions and decisions went into the iOS7 transition for us; too many to list and explain. Ultimately, we think iOS7 represents an exciting first step for mobile apps to really focus on content and innovative animation/physics to help delightful, useful, experiences really come alive.
And we’re really excited to see what other developers and designers going to make!
Drew Condon is an interaction designer at RunKeeper. You can find this post, as well as additional content on RunKeeper's engineering blog called CodeKeeper. You can also follow Drew on Twitter (@drewcon) by clicking here.