E-Tabs

Tag Archive: skeuomorphism

  1. Skeuo-WHAT??

    Leave a Comment

    Skeuo-MORPHISM, that’s what!

    If you’re familiar with the iOS 7, Windows Phone or Windows 8 operating systems, then you’re familiar with the anti-skeuomorphic paradigm that’s becoming de rigueur in the User Interface (UI) design world.  Our recent post about overuse of 3D in design got us wanted to delve into this a little more deeply.

    (For readers of the school of “tl;dnr”: skeuomorphism is the concept of designing icons and other User Interface elements to appear 3D like their real-world counterparts.  “Flat” design is the opposite point of view.)

    Since the start of the modern “computer age” user interfaces have been pretty much universally designed with an eye toward making an exciting new world as familiar to us, the users, as possible.  Most credit Apple with establishing the trend in this regard in exposing graphical interfaces to the masses.

    The first generation of desktop icons created by computer developers was naturally designed to look like their real-world counterparts.  Of course, the very term “desktop” was borrowed unapologetically from the non-virtual world for naming the computer workspace.  The idea was that people wouldn’t be so fearful of the familiar, even if set in a totally new context.  So the early Macintosh computers used a simple diskette graphic to represent the disk drive, a trash can for deleting files, a file folder for the folders, and so on.  Because they were using low resolution monochrome displays, the icons were more or less simple black “pencil” line drawings.

    mac-icons1

    Windows version 3.1 changed all that.  While still very limited in the color depth and pixel resolution it could display, the developers took full advantage of what they could do by designing much more visually complex (though not always “better”) icons.  They decided that “realistic,” three-dimensional icons were the way to go, partly because they could at that point, and that became most people’s first exposure to the idea of skeuomorphism (that is, icons and imagery meant to look just like their real world objects) in computer UIs.  Many icons also featured dropshadows in an attempt to enhance the 3D effect.

    win-icons1

    As computer graphics improved, the icons became more complex.  On top of that, the UIs of many programs also dove headfirst into skeuomorphic design; probably none more so than audio and video playback software.  They did their best to recreate home stereo components or the newly emerging portable music and home DVD players.  Technical programs, such as audio editors, took skeuomorphism to an almost ridiculous level, even using rotary dial potentiometers the user had to “turn” up and down using their mouse.

    This design paradigm carried over to almost everything digital/electronic.  Websites of every type, personal media devices and first-gen smartphones, and then tablets, all jumped into the deep end of skeuomorphic design.  Icons, buttons, tabs, navigation and UI controls, all took on an aggressively 3D form.  Within the last decade, however, and far under most people’s radar to start, the game slowly began to change.

    In 2006 Microsoft created what was then codenamed “Metro” (later to become the more descriptively-named “Microsoft Design Style”), a typography-based design paradigm and concomitant language intended at least in part to try and compete with the iPod with the flagging and now-defunct Zune platform.  Metro itself was inspired by the International Typographic Style, a graphic design style developed in Switzerland in the 1950s that emphasizes cleanliness and readability.  The idea was for UIs to focus on the content of applications, relying less on graphics-driven menus and more on typography for delivery of information.  This was later referred to as “content before Chrome” (the shiny metal, not the browser).

    Ultimately, Microsoft had a broader agenda than just to salvage Zune.  Their idea was to radically change Windows itself and make it entirely cross-platform.  With smartphones taking over the communications world, everything had to become smaller and simpler.  (Years ago, recall, phone displays were much smaller and lower resolution than now.)  Metro gave rise to the Windows Phone OS and eventually, Windows 8.  And now, Apple too, has “pared down” with iOS 7 and Google (which will no doubt soon control the world) has developed their simplified UI for everything-Google as we know it today.

    The idea of the “flat” interface has become the norm for the UIs of most technology with which people now interact, and to remove any aspects of a 3D, skeuomorphic context.  The buzzword that developers use is “tiles.”  Even this suggests a flatness in which you shuffle tiles around on a 2D surface to indicate their raised or lowered relative importance to you, as opposed to stacking them like they’re 3D objects.  Many of us do this all time now on phones, tablets and other touchscreen devices without even thinking about it.

    What all this means in the dataviz biz is that websites are trending toward more flat designs as well.  It’s typically not difficult to do so; it’s a matter of replacing existing “3D” graphics and navigation features with “flatter” versions.  This might be just removing some shading or dropshadow effects, to eliminate “raised” buttons and whatnot, or a more complete overhaul if 3D design is very heavily integrated into a site.