Windows 8 UI Design and Apple Skeuomorphism

Ivan Maramis employee photo First, a disclaimer: I’m an Apple Fanboy. I own iThis and iThat. Perhaps because like many designers, I’ve learned to use my tools of trade mostly within the Mac OS environment. Of course I use Windows too — mainly for testing though. It’s not that I dislike Windows, it’s just that as a UI designer, I’ve always looked at Windows as another Mac with a slightly inferior UI. Then Windows 8 came along.

My first brush with Microsoft’s formerly-called “Metro UI” experience came when I played with my sister’s Windows phone, more than a year before Windows 8 launched. For some reason the designer in me got a bit giddy playing around with this toy (something that didn’t quite strike me the same way when I first played with Android UI). It’s a refreshing departure from Apple’s skeuomorphic design philosophy. It lacks metaphors to the physical world that for decades have perpetuated the belief that in order for users to understand a device interface and operate it smoothly, there has to be comparison to non-digital real-world objects or ideas.

From Wikipedia:
skeuomorph is a physical ornament or design on an object copied from a form of the object when made from another material or by other techniques. Examples include … a software calendar application which displays the days organised on animated month pages in imitation of a paper desk calendar.

Don’t get me wrong. I believe that skeuomorphism still deserves the credit, especially during the mid 80s when personal computing started to transition from command line-based interface to GUI-based operating systems. It helps people to feel “comfortable” using a digital device in a somewhat familiar way (you what to expect when you see a folder icon: you can store documents in it). Fast forward to today; we now have new generations of “digital users” who think of a telephone only as a smartphone (vs. a rotary dial one), music as MP3 download (vs. cassette tape or an LP), and so forth. Their awareness of digital experience is far more different than that of the early personal computer users.

The Windows 8 “natively digital” UI approach is not so much concerned about making “buttons” look like buttons (with bevels and/or drop shadow). Nor it is attempting to employ traditional folder concept of hierarchical organization. Instead, it’s all about content consumption with a flat hierarchy that can fluidly adapt and scale to various screen displays and size — a concept that is not foreign to web fluid and responsive design.

In my further readings on the design of Windows 8, I found this particularly insightful blog post by Punchcut — a user-interface design company specializing in multi-screen experience for consumer devices. The company has posted a 5-part series titled Windows 8: A Platform Reborn. I highly recommend this rather easy-to-read series as there’s something for everyone to reflect and learn from:

  1. Windows 8: Solving the PC ProblemOverview of how Windows compares to Apple & Google, and how the recognition of a platform reboot is such a necessity
  2. Windows 8: The New ModernismVisual designers in particular will love this! It’s a fascinating look at how the platform got its inspirations from the traditional school of art, as well as from other sources like signage. This post also compares Microsoft design decision to Apple’s skeuomorphism.
  3. Windows 8: The Origin StoryA great historical recap of the evolution of User Interface
  4. Windows 8: Microsoft’s Manifesto Design principles behind the platform and how they support Microsoft vision for its ideal ecosystem
  5. Windows 8: Designing the Metro ExperienceDear developer & UX designer, if you only have time to read one article, read this one. Developers can learn some tips and summary of what creating an optimal app for the platform should look like. UX designers (especially interaction designers) can benefit from the many references to gestures, interaction & motions that are part of the platform. Links are provided to Microsoft’s site for those inclined to dig deeper to the platform’s official guidelines.

No, I’m not working for Microsoft on the side. In fact, I don’t intend to buy a Windows phone nor computer just yet (ecosystem problem IMHO, but that’s a whole other discussion). But this time around, Microsoft gets my respect for making the effort to change the digital landscape in UI the way Apple did with Mac OS. Whether that effort will translate to profits or more market share, that remains to be seen. But for UX, UI designers and developers, things will only get more interesting.

About the author: Ivan Maramis is a magna sum laude graduate of St. Cloud State University with his Bachelor of Science in mass communications. After graduation, Ivan joined CRC Marketing Solutions as a senior interface designer where he worked on interactive projects for clients such as 3M, Haagen Dazs and Thomson Reuters. Ivan went on to spend over six years at The Lacek Group, a division of Ogilvy Worldwide, as a senior interactive art director where he led the design effort for Starwood Preferred Guest member and marketing communications for Starwood Hotels and Resorts. In 2012 Ivan joined The Nerdery as a user experience designer, where he puts to use his industry experience and skills in visual design, interaction design and information architecture.

4 Responses to “Windows 8 UI Design and Apple Skeuomorphism”

  1. scharlau  on February 12th, 2013

    Heard the term “skeuomorph” for the first time this week, and now I discover my old colleague Ivan writing about them! Hadn’t thought of the use of metaphor in these terms before. Wonder how those of us who actually remember telephones and calendars will deal with a UI that doesn’t refer to desktops, files and folders and skeuomorphs of the “office” variety.

    Reply

  2. Ivan Maramis  on February 12th, 2013

    Hey Jeff, fancy seeing you here! You raised a good point — it’ll be interesting to see how users embrace such departure in UI metaphor a year or so from now. Personally, I don’t think skeuomorphism in UI will entirely go away. It not only is about the look (cosmetic/visual), but can also be represented as interactive behavior. Take Flipboard app as an example (www.flipboard.com). For what it is, it’s appropriately minimalist and almost absent of an “interface.” But the act of swiping the screen triggers an animated transition as if you’re flipping a physical magazine. It’s a small bit of skeuomorphism in interaction that doesn’t add anything semantically, but it still is a charming, nostalgic addition to the experience. I like it. But then again, I’m one of those old, err… users you described in your comment, too. ;)

    Reply

  3. Fred Beecher  on February 19th, 2013

    Figured I’d drop my two cents into this discussion… Some time ago I wrote an article postulating a set of guidelines for doing skeuomorphic design well in multi-touch applications. The idea behind these guidelines was to allow designers to exploit the possibilities for delight and beauty that multi-touch presents without succumbing to the suck that plagues a lot of skeuomorphic designs.

    http://userexperience.evantageconsulting.com/2010/11/ui-guidelines-for-skeuomorphic-multi-touch-interfaces/

    Enjoy!

    Reply

  4. Ivan Maramis  on February 19th, 2013

    Nice write up, Fred — I’m digging these guidelines. As a visual designer, I totally agree with you that when used well & wisely, skeuomorphic design can provide that unexpected delight to the users. And as you pointed out by exploiting Apple inconsistencies, part of that delight is making sure that there’s no discrepancy between the visual form and the functional behavior when skeuomorphism is in use. Thanks again for sharing!

    Reply

Leave a Reply