Design Flex

This article first appeared in The Loop Magazine Issue 20.

“Design is not just what it looks and feels like. Design is how it works.”—Steve Jobs

Design never exists in a vacuum. A designer is always creating something with a defined purpose. The essence of the designer’s job is a complex series of decisions that the end user has hired them to make.

Nearly 14 years ago, we first saw the public beta of Mac OS X. As intended, most people’s reaction was an uncontrollable desire to lick the user interface. The buttons looked like candy. It was beautiful. For the first time, designers had really been let loose on the UI. Back then, the vast majority of us were running CRT displays. Things really look different behind a thick piece of glass and at 72 dpi compared to the LCD panels of today. Computers were much slower. I’d often sit down with a magazine when browsing the Web because of how long it took to load pages. Using Photoshop, you would routinely see a progress bar for something as simple as applying a filter or resizing an image. File sizes greater than 100MB were virtually unheard of. So there was a good reason to make the interface as visually appealing and “lickable” as possible—you were going to spend a lot of time looking at it while waiting to see your content.

MacOS-Nine-and-Ten

It was in this decade of user interface decadence that interactive designers really started flexing their muscles. The Internet became a playground for extreme drop shadows, brushed metal, and three dimensional navigation schemas worthy of Hollywood opening titles. No one wanted something straightforward; everyone wanted something that had never been done before. Design flex really gestated during this period. An attitude of “we should because we can” proliferated, as projects pushed the boundaries of designers’ imaginations and often users’ patience.

lickable

Over the years people would grow tired of how lick-able the interface was and little by little things became refined. Today in Mavericks there’s only a few shiny candy coated UI elements left. Good luck trying to find any brushed metal.

As the years went by, Apple stripped out the candy buttons and brushed metal, as the world moved to laptops, LCD displays, and higher resolution displays. Eventually, iOS arrived and inherited many of the desktop stylizations, which was only natural. I was ecstatic when I saw that my first-generation iPhone had the same volume graphics as my Mac. It was what we had always dreamed of, a phone-sized extension of our computer. But then a shift started, first on the Internet, then on the App Store. Flatness.

Think about the first time that you saw it done well-it was refreshing. After all the years of looking at over-embellished pixels, it was nice to just pay attention to color, form, image, and text. It started to make the trompe l’ oeil used everywhere else look false. Your eye would no longer accept that a gradient and a drop shadow equated to three dimensional space. It was always a very delicate balancing act, and now it was over.

“Before, the shadowing effect we used was a great way to distract from the limitations of the display.”—Craig Federighi

Federighi, Apple’s senior vice president of software engineering, has an amazing insight into the end of skeuomorphism in iOS 7. His comment above on the shadowing effect makes perfect sense from a product and systemic perspective. The screen was the weakest link, and with ample graphics and computational power, it only made sense to use the abundance of one resource to make up for the shortcomings of another. In regard to iOS 7, Federighi points out, “This is the first post-Retina UI with amazing graphics processing thanks to tremendous GPU power growth, so we had a different set of tools to bring to bear on the problem.” So where did the iOS team flex its skills if not on pixel embellishment?

Studying the new Human Interface Guidelines provides a good level of insight behind the philosophy of the design. Here’s a team of designers that aren’t just making a project or a product—they’re making tools and an ecosystem that thousands of designers will use to reach millions of people. The cornerstone of the underlying philosophy is “defer to the content.” This means give the user’s content as much screen real estate and visual weight as possible. If your app doesn’t truly need something, don’t add it in. Let users touch and interact with their content first, then provide a UI for additional functionality.

“Do Less. No, do less. No, less… well you have to do more then that.”—Paul Rudd

That’s the mantra from a scene in Forgetting Sara Marshall where Paul Rudd plays a surf instructor. While this is fairly poor advice for learning to surf, it can be applied to finding the most simple implementation of a design. For instance, when designing an icon, continue to remove elements from your design until it’s no longer readable, then iterate and carefully choose what to add in. You’ll discover that when you have found an extremely simple solution to a design problem, it will communicate more clearly and age better. Now that designers aren’t expected to spend 40 hours perfecting their drop shadows, this should enable us to spend more time considering color, shape, and what it communicates.

Another area that’s critical to flex your design sense involves interactions. We’ve come a long way from the days of the Internet where it was acceptable to tap or click something and simply go to a new page. iOS is rich with beautiful animations and segues. These inform the user to what’s happening. Add a bookmark in Safari, and you see a small icon bounce into the bookmarks button—you immediately understand “where it went.” There’s no greater feeling than when you “directly manipulate” a UI element on screen. It’s taken for granted but simply scrolling your content in iOS is light years beyond what most people have been accustomed to since the invention of a mouse. Control Center, paginated containers, and pinch-to-zoom are other incredibly delightful gestural experiences. Designing an interaction that requires more than a button tap is not something that you can just ask your developer for. It requires teamwork, iteration, and lots of fine tuning. You’ll be better off with a simple button tap if you don’t have the time to properly pull off an advanced gesture.

Focus on solving 80 percent of users’ problems. Which 80 percent is a question you’ll have to answer based on your users. Do you need features for the top 1 percent? That’s only 100 in 10,000 users. Focus on creating the greatest amount of functionality for the most users. The default answer to adding something should always be “no.” Scope increases exponentially. Every interaction you add has dramatic effects and dependencies. How will you have time to perfect animations and fine tune the interface if you’re busy addressing something that you could have just said no to?

“If it bleeds, we can kill it”—Arnold Schwarzenegger

Arnie said that about the Predator but when it comes to human interfaces, it’s movement that lets you know something is “alive.” I was editing a Numbers document on my iPhone and the UI froze. I was struck by how simple the onscreen graphics were at that moment. A second later the app came back to life, and it no longer appeared that way. I was able to drag cells, things animated fluidly, keys reacted instantaneously. I’m a firm believer in always testing designs on a device using something like xScope or by emailing designs to yourself. This lets you know how your layout will feel. While this is critical, it doesn’t reveal the whole experience-it’s still two dimensional.

“Marty, you’re not thinking fourth dimensionally.”—Christopher Lloyd, Back to the Future Part III

If the fourth dimension in media is time, then is the fifth interactivity? Spend too much time just looking at your interface designs, and you may be surprised how they feel when you finally use them. Find a prototyping tool, learn the basics of Xcode storyboards, make an animation. Do something to get a feeling of how your users’ experience will feel. This is also a great time to go find a user and show them what you’ve been working on. Depending on the prototype, ask them to do a few specific tasks. You may be surprised that something you thought was really obvious turns out to be difficult. This is a great time to weigh discoverability against intuition. Is it worth making your users spend a moment learning to make a often-repeated task much more elegant in the future?

That brings us to the last critical concept: know your materials. In the atomic world, makers and craftsmen have been working with the same materials for centuries. Wood and metal working techniques have been passed down since the dawn of civilization. But with each generation comes an evolution to what’s possible. We can create things today that were unfathomable just 50 years ago, even though the materials are effectively unchanged. Chefs still come up with new ways to cook an egg. Think abut it—this is iteration on a generational scale. 

A designer that understands what is going on beyond the pixels will be much more effective. Take time to watch the Worldwide Developers Conference videos, read the iOS 7 Design resources—you will learn a lot. If you work with your materials, rather then trying to force them to bend to your will, your process will be smoother and the work will be more successful.

In the end, while the only visible result of your work will be pixels, do not flex your design muscles on fancy UI that takes away from the user’s content or purposeless pixel embellishment. Rather, spend time iterating to create clear meaning in your work, delighting your users with meaningful interactions and exploring your materials. If an interaction is as delightful the thousandth time as the first then you know you’ve got something really great.

Do not mistake the pixels as the sum of your work. Remember, the magic is not in the magicians hat, but in the audience’s mind.

Alex Saretzky is a Human Interface designer in New York focused on mobile design. He recently handmade an iOS app called Timer Professional. His mother calls him “one of those Apple people” and has never owned a PC. One time he prank called Steve Wozniack.

Alex’s Website | Alex’s Twitter



  • JohnDoey

    “Design is not just what it looks and feels like. Design is how it works.”—Steve Jobs

    So what you are implying here is that iOS 7 works better than iOS 6. In that case, why has iOS 7 scored much lower than iOS 6 in usability testing? Those are tests of how it works. I have yet to read a usability report where iOS 7 beat iOS 6. People can’t figure out what the icons mean. People can’t figure out what is a button and what is not. I’ve seen many people tapping multiple times on their Samsung phone because the touchscreen software is awful, and on iPhone, where the touchscreen software is brilliant, I’ve seen people tapping multiple times because they don’t know what is a button.

    The first time I used iOS 7, somebody handed me their iPhone so that I could shoot a video of them opening a gift, in order to send the video to the gift-giver. I was unable to switch the camera’s mode to video, and had to hand it back to the owner, who also could not get it to switch to video. That never happened to me in 7 previous years of iPhone use. It never happened to me the first day I used my first iPhone.

    Also, the above quote does not say, “what it looks and feels like is unimportant.” What it looks like is art. Art is a big part of the delight that Apple has created with their software. Delight that many have said is now missing from iOS as of version 7. And shadows and buttons are important usability design cues. Our eyes and fingers evolved to recognize these cues. They reduce training time and costs. They expose functionality.

    I think the Aqua redesign is more relevant to iOS 7 as a cautionary tale. Every version of Mac OS X since 10.0 got more like Mac OS 9. The giant, colorful toolbars changed back to tiny, gray toolbars. The windows changed from white back to gray. Features like Launcher returned as LaunchPad. And in Mavericks, we get apps that sleep when you put them into the background — one of the key reasons we were supposed to stop using Mac OS 9 was to get away from that. Now, it is a feature. The main result of the Aqua redesign was to announce to the world, “this is new.” That seems to also be a key point for iOS 7’s visual redesign. Like New Coke. Just a marketing bullet point. A gradual evolution of Mac OS 9 to X would have been better design, even though it would have been worse marketing. Same with iOS 6 to 7. Just make it better, not just different. If they made it better, there is no need to explain and defend the change academically, as you do here. As Microsoft did with Windows 8 and Surface — lots of blah blah blah about design philosophies is like a siren going off with a flashing light: “this is and design.” If it was good design, we wouldn’t be talking about design — we’d just be talking about how the product is better. We’d be talking about new tasks we can do with the product that we couldn’t accomplish before.

    I take issue with the idea that iOS 7 is suited to Retina Display. The previous photorealistic look was waiting for high-res screens. The current look could have been printed in a 1980’s magazine. Gradients and flat colors are antique graphic design. The people who used them in the 1980’s did so because they did not have super high-resolution and infinite colors, like a Retina Display. And the Web only uses text “buttons” because it originally had no graphics. In 1990. So I think Apple using like 10 colors and no buttons is going backwards. They are failing to exploit the Retina Display.

    defer to content

    The problem with this is that an app icon is content, same as music album art. Imagine if Apple wanted all music album art to be stripped of colors and fitted to a grid. The buttons in a phone dialer or camera are also content. iPhone is a tool. The handle of a hammer is important. Making it invisible or painting it with a pastel gradient doesn’t make the handle better or lead to better hammering. That time should be spent making the handle even more ergonomic, even more usable.

    To the extent that iOS 7 is controversial, that is Apple failure. Jony Ives said he hates when “designers wag their tails in the user’s face.” iOS 7 is like a giant, panting dog slobbering all over the user. Every day, all day, in every app, in everything the user does. A great software upgrade goes almost unnoticed because the ways that it is obviously better make you forget the old way immediately. You don’t distract the user from their work, their play, their content, their tools with the inner workings of software production.

    Finally, consider the new look and feel of the same old Settings app in iOS 7, and consider that the only change that I wanted to the Settings app was for it to disappear, to go away, to not be required at all. Every time I mention that idea to a fellow iPhone user they say, “oh, please, yes.” That exposes the myopia that Apple had with iOS 7. To paraphrase Steve Jobs, redesign is not changing how it looks — redesign is improving how it works.