Home » What explains the current shift from glossy UIs to matte UIs?

What explains the current shift from glossy UIs to matte UIs?

Solutons:


It’s a shame no one has mentioned the impact of the Mac OS X “Aqua” interface on all this.

Aqua was the name Apple gave to the user interface style it introduced in Mac OS X. It changed the Mac’s software from looking like this:

Screenshot of the MacOS 9 Finder demonstrating the Platinum UI style

…to looking like this:

Screenshot of the Mac OS X Finder demonstrating the Aqua UI style

Here’s Steve Jobs introducing it for the first time at MacWorld San Francisco 2000. As he says:

One of the design goals was when you saw it, you wanted to lick it.

It’s no doubt that a huge influence into the look and feel of Aqua with all its lickable buttons and pinstripes and translucency was the huge popularity of the iMac:

The iMac G3 showing colourful plastic, pinstripes on white and translucency

Aqua was a huge change in UIs; they changed from being predominantly drawn by the OS to being defined mostly as layers and layers of bitmap (or even vector) graphics. Windows XP followed this same idea in 2001; its Luna UI looked like this:

Screenshot of Windows XP showing its Luna UI style

When it was released, Aqua made a similar sort of splash as the iMac had when it was first released. It felt like for the next 5 or so years, every single thing from third party designers had some unnecessary gloss on it:

Some example shiny bubble icons found on the Internet

But even despite the popularity of the translucent and glossy coloured plastic aesthetic, Apple has become more and more restrained with its hardware designs over time:

Photos of iMac designs from the original G3 model to the first aluminium iMac

The relentless march of material design, simplification and style in hardware had a similar effect on the software—with transparency being reduced, pinstripe visibility fading until they disappeared entirely, the introduction of brushed-metal interfaces, all the way through to something not particularly different to the old, predominantly grey interface from MacOS 9:

Screenshot of Mac OS X v10.2 Jaguar, showing how the interface was toned down from the earlier releases

Screenshot of Mac OS X v10.3 Panther, showing the massive expansion of brushed metal

Screenshot of Mac OS X v10.4 Tiger, showing the reintroduction of more gloss, e.g. in the menu bar

Screenshot of Mac OS X v10.5 Leopard, showing the integration of brushed metal and Aqua to form the predominantly grey UI

This change isn’t specific or unique to the Mac; it happened all across the industry.

In the meantime, though, iOS was released (then called iPhone OS), which looked like this:

Screenshot of iPhone OS v1.0

And as you almost certainly know by now, the iPhone and iOS itself have been massively successful. Many, many applications (including Skype) were released with the glossy icon overlays to look appropriate next to those icons.

But, like Mac OS X went from looking exciting and refreshing to a gaudy eyesore over years, that original iPhone OS interface screenshot is now 6 years old, and it now looks like this:

Screenshot of iOS v6.0

…as you can no doubt see, there’s been an extremely, uncharacteristically slow march of progress when it comes to the look-and-feel of Apple’s mobile offering.

The old adage goes something like:

If you’re not improving, you’re going backwards

And so by staying more or less the same, two of the major competitors to Apple in that space (Google with Android and Microsoft with Windows Phone) have seized the opportunity to do something radically different, and to advance the state of the art themselves, leaving them looking like this:

Screenshot of Android v4.0 Ice Cream Sandwich

Screenshot of Windows Phone 7


Updates: Just thought I’d add a bit more of a comment on the Android “Holo” and Metro visual languages, and how the two manufacturers describe the flatter, less glossy aesthetic to designers:

When they first announced the Metro design language (or as they now call it, the “Microsoft design language”), Microsoft made some thinly veiled jabs at Apple’s glossy iOS aesthetic. One of the main claims they continue to make is that the flatter, more typographic design style of Metro is more “honest”, and “authentically digital”. On their Windows Phone design principles webpage, Microsoft is pretty explicit about this:

Create a clean and purposeful experience by leaving only the most relevant elements on screen.
When it comes to designing great app experiences, we believe in content, not chrome.

Focusing on content over chrome reduces unnecessary elements, allowing your app’s content to shine. Let people be immersed in what they love and they’ll explore the rest.

They later state:

Being authentically digital is about going beyond the rules and properties of the physical world to create new and exciting possibilities in a purely digital space. Take full advantage of the digital medium.

Be “infographic.” Information delivery is the primary goal, not the wrapper around it. Adopting the infographic approach will help you optimize the user experience on Windows Phone

Regarding the redesign of their logo, Microsoft again touches on the justification of being “authentically digital” as their reasoning for removing the gloss:

It was important that the new logo carries our Metro principle of being “Authentically Digital”. By that, we mean it does not try to emulate faux-industrial design characteristics such as materiality (glass, wood, plastic, etc.).

For their part, sadly, Google have not been very explicit about their intentions in creating Holo. While they have definitely moved strongly toward the so-called flat design style, they haven’t been particularly explicit about why. Regarding icons (which are at the core of your question), they simply say:

Use a distinct silhouette. Three-dimensional, front view, with a slight perspective as if viewed from above, so that users perceive some depth.

They do go into some better depth in their developer documentation however, where they say (emphasis mine):

Image from the Google developer guidelines, showing what not to do with gloss
Icons should not be cropped. Use unique shapes where appropriate; remember that launcher icons should differentiate your application from others. Additionally, do not use too glossy a finish unless the represented object has a glossy material.

Their previous design guidelines from Gingerbread and earlier (that is, pre-Holo), also explicitly mention texture (“Icons should feature non-glossy, textured material”), with the full description of the materials described as such:

Launcher icons should make use of tactile, top-lit, textured materials. Even if your icon is just a simple shape, you should try to render in a way that makes it appear to be sculpted from some real-world material.

…and later…

Android Launcher icons are…

  • Modern, minimal, matte, tactile, and textured
  • Forward-facing and top-lit, whole, limited in color palette

Android Launcher icons are not…

  • Antique, over-complicated, glossy, flat vector
  • Rotated, Cropped, Over-Saturated

So clearly it’s been the intention of Google and Microsoft pretty much from the get-go of their respective current mobile operating systems to avoid the iOS/Aqua/glossy aesthetic.

It’s a big part of Skeuomorphism vs flat design, a debate about which Sacha Greif has a good writeup. Skeuomorphism like gloss, reflections and textures make things look like “real” objects, but all the fancy can increase cognitive load, and gives an unfortunate “samey” feel. The majority of iOS icons have the same or similar gloss effect on their icons, making it a useless feature as a differentiation. A flat, minimal icon can focus on distinct features only, like the Skype logo’s shape and S, rather than their particular brand of gloss shown by yet another top down light source.

There’s also the issue of market saturation, which works in ebbs and flows. A sea of skeuomorphic design washed over the industry after iOS’s glossy … gloss, and there’s a natural push back from designers saying “Hey, there’s other ways to do stuff”. This could simply be seen as the tide pushing the other way, though there are some good UX reasons to adopt either (or both) design aesthetics. Skeuomorphs can aid in first-time recognition and understanding of how things “work” (shadows mean this is on top of this!), while clean, flat designs make it easier to focus; less eye candy, more recognizable objects instead of gloss effects and bubbly pushed out buttons.

This largely a question of design trends, but there are some UX aspects to it.

Glossy icons and buttons were (arguably) mostly used to show affordance. It was also then used almost religiously in all Apple designs. Even today, most iOS icons are glossy by default.

People don’t neet to be shown some gloss or gradient to know that they can interact with something anymore, and so the need for glass has fallen way. Android and Metro have evolved beyond iOS, and adapted to a much cleaner and visually simpler design with mostly flat elements.

Personally I find the change better looking and more usable. But I would still argue that it is mostly about design trends.

Related Solutions

When should I not kill -9 a process?

Generally, you should use kill (short for kill -s TERM, or on most systems kill -15) before kill -9 (kill -s KILL) to give the target process a chance to clean up after itself. (Processes can't catch or ignore SIGKILL, but they can and often do catch SIGTERM.)...

Default value for UUID column in Postgres

tl;dr Call DEFAULT when defining a column to invoke one of the OSSP uuid functions. The Postgres server will automatically invoke the function every time a row is inserted. CREATE TABLE tbl ( pkey UUID NOT NULL DEFAULT uuid_generate_v1() , CONSTRAINT pkey_tbl...

comparing five integers with if , else if statement

try this : int main () { int n1, n2, n3, n4, n5, biggest,smallest; cout << "Enter the five numbers: "; cin >> n1 >> n2 >> n3 >> n4 >> n5 ; smallest=biggest=n1; if(n2>biggest){ biggest=n2; } if(n2<smallest){ smallest=n2;...

How to play YouTube audio in background/minimised?

Here's a solution using entirely free and open source software. The basic idea is that although YouTube can't play clips in the background, VLC for Android can play clips in the background, so all we need to do is pipe the clip to VLC where we can listen to it...

Why not use “which”? What to use then?

Here is all you never thought you would ever not want to know about it: Summary To get the pathname of an executable in a Bourne-like shell script (there are a few caveats; see below): ls=$(command -v ls) To find out if a given command exists: if command -v...

Split string into Array of Arrays [closed]

If I got correct what you want to receive as a result, then this code would make what you want: extension Array { func chunked(into size: Int) -> [[Element]] { return stride(from: 0, to: self.count, by: size).map { Array(self[$0 ..< Swift.min($0 + size,...

Retrieving n rows per group

Let's start with the basic scenario. If I want to get some number of rows out of a table, I have two main options: ranking functions; or TOP. First, let's consider the whole set from Production.TransactionHistory for a particular ProductID: SELECT...

Don’t understand how my mum’s Gmail account was hacked

IMPORTANT: this is based on data I got from your link, but the server might implement some protection. For example, once it has sent its "silver bullet" against a victim, it might answer with a faked "silver bullet" to the same request, so that anyone...

What is /storage/emulated/0/?

/storage/emulated/0/Download is the actual path to the files. /sdcard/Download is a symlink to the actual path of /storage/emulated/0/Download However, the actual files are located in the filesystem in /data/media, which is then mounted to /storage/emulated/0...

How can I pass a command line argument into a shell script?

The shell command and any arguments to that command appear as numbered shell variables: $0 has the string value of the command itself, something like script, ./script, /home/user/bin/script or whatever. Any arguments appear as "$1", "$2", "$3" and so on. The...

What is pointer to string in C?

argv is an array of pointers pointing to zero terminated c-strings. I painted the following pretty picture to help you visualize something about the pointers. And here is a code example that shows you how an operating system would pass arguments to your...

How do I change the name of my Android device?

To change the hostname (device name) you have to use the terminal (as root): For Eclair (2.1): echo MYNAME > /proc/sys/kernel/hostname For Froyo (2.2): (works also on most 2.3) setprop net.hostname MYNAME Then restart your wi-fi. To see the change, type...

How does reverse SSH tunneling work?

I love explaining this kind of thing through visualization. 🙂 Think of your SSH connections as tubes. Big tubes. Normally, you'll reach through these tubes to run a shell on a remote computer. The shell runs in a virtual terminal (tty). But you know this part...

Difference between database vs user vs schema

In Oracle, users and schemas are essentially the same thing. You can consider that a user is the account you use to connect to a database, and a schema is the set of objects (tables, views, etc.) that belong to that account. See this post on Stack Overflow:...