Saturday, September 9, 2017 | Justin Tribuna
“Fashions fade, style is eternal.”
— Yves Saint Laurent
Fashion and style are terms that apply just as well to design as they do to clothing. There’s a curve to keep up with, where style is constantly being revised, and countless fashions go out of vogue. To discuss style vs. fashion in terms of design, we should examine object UI.
Object UI is any design decision where UI elements are made to resemble physical objects. This tends to come in the form of 3D or bevel effects. In Windows 95, for instance, virtually every UI element had a bevel effect—scrollbars, windows, the taskbar, and of course, buttons. These buttons also took on a reverse bevel effect when clicked, as to appear pressed down. These were vital design decisions, as they cued the user in to how to interact with the OS. If something looked like a physical object, it could likely be pressed, moved around, or interacted with in some other way.
Caption: Windows 95: simple, elegant, and intuitive.
At the same time, there was, and is, always a desire to show off new graphical capabilities. New games and operating systems always have ways of rendering more impressive visuals using the same computing power, and new hardware always comes with a desire to show off what it can do. Object UI reached the peak of its popularity in the early-to-mid 2000s, with OSX 10.0 and Windows XP both being released in 2001. OSX 10.0 featured detailed icons and windows with a plastic-like texture, featuring a repeated horizontal scanline pattern. Perhaps the most famous graphical feature were the buttons. It’s hard to say whether they were meant to resemble transparent colored glass or some kind of gelatinous material, but they were impressive and striking all the same. At the same time, while less impressive, Windows XP still appeared just as much to be composed of physical objects. Windows XP’s UI elements were made to resemble colored plastic, and the top of every window, as well as the taskbar, looked like the side of a 1999 Ford Taurus.
Caption: Windows XP. Seriously, those bars look just like a 1999 Taurus.
Things in the UI design world began to change with the advent of smartphones. The first modern smartphone—the iPhone—debuted in 2007, boasting a detailed but small screen, with a resolution of 320 x 480 px at 163 ppi. Small, but sharp. As phones like this grew in popularity, mobile web browsing became more common. In fact, mobile internet use surpassed desktop and laptop internet use in November of 2016. As mobile device usage becomes increasingly common, UI designers and developers have had to take mobile use into consideration more and more. Mobile screens now tend to have 300–400 ppi screens, allowing for a ot of detail. Small, detailed icons, however, while readily displayed by these high-resolution screens, aren’t easily read by the human eye. Rather than packing details into tiny graphics, space is more efficiently used by simple, high-contrast imagery.
Caption: While OSX 10 stunned the world with its gorgeous visuals, they’d now be considered a little over the top.
Enter flat design. Flat design is generally characterized by sharp edges, high contrast, a lack of 3D or bevel effects, and simple, glyph-like icons. Most importantly, it’s readable and looks good on virtually any screen. Microsoft went flat in 2012 with the release of the widely-panned Windows 8, simultaneously updating the XBOX 360’s operating system to have a more flat appearance, with the goal of creating a unified experience across all Microsoft devices. While Windows reverted to a more traditional layout with Windows 10 a few years later, they kept the flat look. At that same time, Apple released the iPhone 6, packaged with an OS that finally abandoned the device’s signature glass bubble icons in favor of vibrant, sharp, flat icons. Apple even went a step further with the phone’s design, axing the indented bubble home button with its round-cornered square symbol in favor of a flat button. Essentially, they did the opposite of object UI: instead of creating UI elements that resembled physical objects, they made a physical object resemble a flat UI element.
Caption: Windows 8’s beautiful and much better-designed descendant, Windows 10.
As smartphones and tablets have become more ubiquitous, people in general have also become more familiar with technology. Everyone’s grandmother has a tablet that she likes to play solitaire on. Kids are being raised with technology in their lives, and fewer people are having to learn how to use computers as adults. As such, it’s no longer necessary to represent UI elements as objects. Everyone knows that if you tap a plus symbol, you’re probably going to create a new instance of something or increase a number by 1. If you touch or click an envelope-shaped glyph, you’re probably going to be presented with an email dialog. If it’s a gear-shaped glyph, you’re going to be changing some settings. Three stacked horizontal bars? That’s gonna be a flyout menu.
As bright, sharp, lightweight flat design has taken over, certain things have fallen out of fashion. Unless correctly applied, object UI now looks outdated and clunky, even if said UI is brand new. Think back to the last time you used a credit card terminal. Chances are it had chunky beveled buttons on a textured background. Maybe when you tapped a button, instead of just taking on a reverse bevel, the colors just went negative (true story). Now, think about the last time you went to your favorite cafe or taco place where they use tablets to process payment. While a state-of-the-art tablet is going to be a lot faster than a cheaply-produced credit card terminal, the speed isn’t the only difference. Credit card terminals, with their clunky visuals, just feel cramped. A series of very small graphical differences make up the differences between these two interfaces—differences based around the selective use, and often outright rejection, of object UI.
Caption: The iPhone finally went flat in 2015.
It’s important to note that object UI can be applied well. The Apple TV’s OS, for instance, uses icon cards that pivot when the user scrolls across them. I think this is a good example of style over fashion: it’s subtle and highly effective, and doesn’t do anything to make the interface look or feel heavier. The effect of these glossy, weightless cards suspended on the screen blends perfectly with the flat motif. And undoubtedly, there were countless conversations about, and revisions of, the decision before the final product was arrived at. The takeaway from this should be that even small design decisions are often the result of careful planning. It’s easy to fall for object UI because it makes an interface look more substantive, and many people, when on the desicion-making end of UI development, have a strong version to white space. A UI with an effortless appearance, however, generally had a lot of effort put into making it that way. Without that planning, your product can easily appear outdated on launch.