Co.Design

How Apple And Microsoft Agree On The Future Of Design

Microsoft led the tech industry past its crutch of cheesy skeuomorphism. So where is everyone going next? A new era of interaction design.

With so much attention paid to Apple's new mobile software, iOS 7, it's worth noting the extent to which Microsoft spearheaded flat design. The refreshing UI of Windows 8 and Windows Phone sparked a debate around the pros and cons of skeuomorphism, helping to usher in an era where gaudy textures, visual metaphors, and decorative, oft 3-D elements became frowned upon in the digital world. Apple has removed most of these design flourishes in the software running its new iPhone 5s and 5c; even Google has trended toward flatter aesthetics.

Thanks largely to the kamikaze design efforts of Microsoft, we now live in the post-skeuomorphic world. So what does that design have to offer beyond software that's flat? Everyone seems to agree, the new trend will be software that's more physically integrated with hardware.

This week, as Microsoft prepared to launch its Surface 2 tablet, I took the opportunity to find out how the company's designers felt about leading this industry-wide design transformation. Apple's new OS, for example, leans strongly toward being what Microsoft calls "authentically digital," eschewing its legacy of skeuomorphic interface design shrouded in real-life visual metaphors. Yet, when I ask Microsoft Creative Director Ralf Groene whether it's validating that so many companies are now taking cues from Microsoft, he takes a long pause and is careful not to boast. "Um ... no," he says. "I mean, it's flattering when someone takes your idea. But what's more interesting to me is that [we have moved beyond] getting people used to PCs by using a desktop metaphor from the physical world."

"We don't need all these frames and ... I almost said wood veneers, but that wouldn't be fair," he continues, apparently holding back a subtle jab at Apple's iBooks app. "We don't need all these references to the old world. People have grown up with this technology--we can now move into next level."

What exactly that "next level" is beyond flat and veneer-less remains uncertain. Groene spends time talking up the importance of creating intuitive metaphors for wonky concepts like the cloud; he also stresses the importance of developing services that can seamlessly transition from consumption to productivity environments. But when asked what the next step after visual skeuomorphism is, Groene does indicate that it could "go more into interaction design."

It's a sentiment we've started to hear from other designers. Apple's real-world visual metaphors, for one, have arguably been replaced by interaction metaphors, which work to sync the digital and physical worlds (or industrial design with interface design). With iOS 7's Parallax feature, which imbues the system with life-like motion effects, users can physically manipulate the phone to alter its digital appearance. On the home screen, for example, as you tilt the phone back and forth, the background wallpaper will look as if it's shifting accordingly, with its icons floating on top as if on a different plane. "The way they’re reimplementing the UI framework with physics--it just feels natural," former Apple designer Loren Brichter recently told Fast Company. "They’re mimicking the real world. So in a way, the skeuomorphism, which was previously going into visual design, is now going into interaction design."

For Microsoft, we can see early hints of this transition in its Touch Cover, the pressure-sensitive keyboard attachment for its Surface tablet that measures not only what you press, but how hard you press it. As the company showed off this week, the Touch Cover is creating new opportunities for interactions between the physical and digital world--one designer yesterday referred to programs built on top of this platform as "app[s] that I can [physically] touch."

Drew Condon, an interaction designer at fitness startup RunKeeper, is optimistic about this trend, especially considering that Apple's new iPhone comes equipped with an M7 motion coprocessor, which continuously tracks motion data via the device's accelerometer, gyroscope, and compass, without comprising battery life. Condon argues that the "motion effects, dynamics, and core physics engine" of Apple's new iPhone "should make it much easier for applications to define innovative new interaction models." He smartly summarizes the pros and cons of this design direction, wondering whether mimicking real-life gravity in the digital world is another form of skeuomorphism:

There’s chatter that the layering and depth in iOS 7 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.

In other words, traditional visual metaphors, such as Apple's stitched leather and fake wood veneers, are not only unnatural, but they also impede the experience. Inversely, the experience feels both more intuitive and more natural when it includes physical interaction metaphors. It helps to bridge the gap between industrial design and software beyond simple color cues we see tying together iOS 7 and the iPhone 5c, and Windows Phone and devices like the Nokia Lumia. As Jony Ive recently explained of Apple's new iPhone, "[The] experience is defined by hardware and software working harmoniously together ... We continue to refine that experience by blurring the boundaries between the two.”

Add New Comment

16 Comments

  • Matt Lucero

    Apple and Microsoft agree on the present of design...which is trending towards flat and bold. Design trends are cyclical and this too shall pass in due time.

  • Larry McKoder

    EVERYTHING beautiful is skeuomorphic. The page turn in iBooks, page curl in maps, cover flow, the shred animation in passbook, the date picker in iOS 6, rotating settings gear (when updating iOS 6), the Time Machine interface in OS X, photo borders and shadows in iWorks documents, etc.

    This is not surprising, because our sense of beauty comes from the physical world.

    So what is the problem with skeuomorphism?

    Tech enthusiasts would like their phones to look like something from the future, not something from the past. But ordinary everyday people prefer for it to look like things they are familiar with, or can relate to.

    Tech enthusiasts worry that the skeuomorphism was getting totally out of hand, particularly where the UI metaphor started limiting functionality (e.g. an address database that’s limited to what a Rolodex can do, rather than exploiting what is possible with a computer). But this is not really true. For example, iBooks has instant search, something only possible with a computer.

    Some people point out that many skeuomorphic elements reference things that a large part of Apple’s audience hasn’t used in a long time, if ever. True, but here’s the thing: It doesn’t matter whether the user has ever seen a reel-to-reel tape. What matters is whether the visuals depict a physical object that the user can model in his mind. If it is too abstract (that’s the opposite of physical) then non-tech-enthusiasts will find it hard to intuit.

    Some people say skeuomorphism looks tacky. This is partly true. Skeuomorphism is hard to do. When done poorly it does look tacky. But when done well it looks very beautiful.

    By removing all skeuomorphism Apple is throwing the baby out with the bathwater.

  • Jason Heydasch

     -- I'd say the quotations suffer more from letter spacing than from line-height. Also, the "say it" looks correct BEFORE you place your cursor in the "leave a note" section.

  • Ammar S. Mitoori

    May I know please the font used in article on mobiles I feel it's nice and not the same of desktop .. Also what's the font of text with gray background ?

    Kindest Regards

  • Steve G

    Usability has suffered. Hierarchies are almost non existent. It's very lazy to just criticize skeuomorphism or say it's not needed anymore. Testing with users is still the way to go.

  • MattZehner

    Microsoft started the flat design trend, but Apple and Google are taking it to a whole new level by making their software clean and simple. Dimensional logos and apps are finally becoming things of the past.

  • Stefan Vassilev

    Microsoft adopted  Bauhaus graphic style, but at that moment there are a lot of inconsistency in their whole representation. That is the reason for all of the problems related to their latest OS Windows 8. Still, this is a good cross to a right direction, well done Microsoft. 

  • Kevin Hollingsworth

    I don't know if it's right to fully credit Microsoft, or anyone else for that matter, for flat design as a whole. It's a topic that's been percolating for some time outside of the corporate walls in Silicon Valley and the Seattle area. Sure, MS crossed the line first but all players were heading in that direction given how quickly these devices are becoming commodities and software is now if fully embedded into our everyday lives.

  • TheMandarin6

    do you really think apple was going in that direction ? Do you think iOS7 would have this look if Steve Jobs were alive ? There is no way it would have happened according to the comments of everyone involved.

  • WillHunts

    Let's not forget how Windows even come to fruition, which dates way back during Microsoft's and Apple's early stages. Bill Gates took ideas from Apple.

    Pot calling the kettle black.

  • $22696955

    The article has one comment from a MS employee and he denies basically taking credit for the trend. So I'm not sure who is calling anyone anything, frankly.

    Besides, anyone who keeps up on that stuff knows they were both stealing from Xerox. Apple deserves no awards in that race either.

  • SlickGypsy

    Microsoft "innovated" by adopting the Bauhaus (or Swiss) design style. Smart move, but not an innovation. They didn't do something new; just adopted a modern style nearly a century old. And I'm glad they did. But judging from the number of returns of Windows 8 or preference of Windows 7 in the OEM market, is the design actually considered a success? Skeumorphic design is still quicker for new users. And with average Internet penetration rate throughout the world only about 34%, there are a lot of new users to come. 

  • Jarbird

    Now this is a refreshing article. It's nice to see some love come to Microsoft for how they've innovated in the last few years. It's part of the reason I think the new iOS7 looks like a step in the right direction.

  • androctonvs

    while i enjoyed reading this article, I had to skip the featured quotes altogether. too hard to read... and I'm on a 27' iMac. try using 'line-height: 2' for the ".prose.body blockquote p, .prose.body blockquote p:first-child, .prose.body blockquote p:first-line" elements :-)

    also, i just noticed how the 'say it' button is displayed as 'sav it'. i've tried messing around with 'z-index' on my chrome inspector, but failed to bring the word forward :X