GUI design – What explains the current shift from glossy user interfaces to matte user interfaces?

It's a shame that no one has mentioned the impact of the "Aqua" interface of Mac OS X on all this.

Aqua is the name that Apple has given to the user interface style introduced in Mac OS X. The Mac's software no longer has the following appearance:

Screenshot of the MacOS 9 Finder illustrating the Platinum UI style

… to look like this:

Screen capture of Mac OS X Finder illustrating the Aqua UI style

Steve Jobs introduces him for the first time at MacWorld San Francisco 2000. As he says:

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

There is no doubt that the tremendous popularity of the iMac has been a huge influence on the look and feel of the Aqua, with its pimples, its scratches and its lining fine stripes , and its translucency:

The iMac G3 displays colorful plastic, fine stripes on white and translucency

Aqua was a huge change in user interfaces; These have ceased to be drawn by the operating system to be defined primarily as layers and layers of bitmap (or even vector) graphics. Windows XP followed this same idea in 2001; its Luna user interface looked like this:

Screenshot of Windows XP showing its Luna user interface style

When it came out, Aqua had the same splash as the iMac when it came out. It seemed that for the next 5 years or so, every element coming from third party designers had something superfluous:

Some examples of brilliant bubble icons found on the Internet

But despite the aesthetic popularity of translucent and glossy colored plastic, Apple is becoming more and more restricted with its material designs over time:

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

The relentless march of hardware design, simplification, and hardware styling had a similar effect on the software: reduced transparency, reduced black-band visibility, and total disappearance, and brushed-metal interfaces introduced. , up to a level no different to the old gray MacOS 9 interface:

Screen capture of Jaguar for Mac OS X 10.2, showing how the interface has been muted compared to previous versions

Screenshot of Mac OS X 10.3 Panther, illustrating the massive expansion of brushed metal

Screenshot of Mac OS X 10.4 Tiger, showing the reintroduction of more gloss, for example. in the menu bar

Screen capture of Mac OS X 10.5 Leopard illustrating the integration of brushed metal and Aqua to form the predominantly gray user interface

This change is not specific or unique to the Mac; this has happened everywhere in the industry.

At the same time, however, iOS came out (then called iPhone OS), which looked like this:

Screen capture of iPhone OS v1.0

And as you almost certainly know now, the iPhone and iOS have been a resounding success. Many applications (including Skype) have been published with glossy icon overlays to give an appropriate appearance next to these icons.

But, like Mac OS X, which had gone from an exciting and refreshing appearance to a visual horror over the years, the original screen capture of the interface of the Mac OS X IPhone OS is now 6 years old and looks like this:

Screen capture of iOS v6.0

… As you can probably see, the progression has been extremely slow, unusually slow, with regard to the look and feel of Apple's mobile offering.

The old adage says something like:

If you do not improve, you step back

So, by staying pretty much the same, two of Apple's main competitors in this field (Google with Android and Microsoft with Windows Phone) have seized the opportunity to do something radically different and improve themselves. state of the art, leaving them like this:

Screenshot of Android v4.0 Ice Cream Sandwich

Screenshot of Windows Phone 7


Updates: I was just thinking of adding a little more commentary on the Android visuals "Holo" and Metro and how both manufacturers describe the flatter and less brilliant aesthetic to designers:

When they first announced the Metro design language (or, as they now call it, the "Microsoft design language"), Microsoft created slightly veiled jabs with Apple's brilliant iOS aesthetics. One of the main claims that they continue to make is that Metro's flatter and more typographic design style is more "honest" and "authentically digital". On their Windows Phone Design Principles page, Microsoft is quite explicit about this:

Create a clean and resolute experience by leaving only the most relevant elements on the screen.
When it comes to creating good applications experiences, we believe in content, not in chrome.

Focusing on content via chrome reduces unnecessary elements, allowing the content of your application to shine. Let people be immersed in what they like and they will explore the rest.

They declare later:

Being authentically digital, it's going beyond the rules and properties of the physical world to create exciting new possibilities in a purely digital space. Take full advantage of digital support.

Be "infographic". The main goal is to provide information, not to pack them. The adoption of the infographic approach will help you optimize the user experience on Windows Phone.

With regard to the redesign of their logo, Microsoft again evokes the justification of being "authentically digital" to justify the removal of the gloss:

It was important that the new logo conform to our Metro principle of "authentically digital". By this we mean that it is not trying to imitate falsely industrial design features such as materiality (glass, wood, plastic, etc.).

Unfortunately, Google has not been very explicit about its intentions to create Holo. Although they are resolutely engaged in the so-called flat design style, they have not explained in detail why. As for the icons (which are at the heart of your question), they simply indicate:

Use a distinct silhouette. In three dimensions, front view, with a slight perspective as if viewed from above, so that users perceive a certain depth.

However, they deepen a little more the documentation of their developer, where they say (it's me who points out):

Image of Google Development Guidelines, What to Do with Gloss
Icons should not be cropped. Use unique shapes, if any; Do not forget that launcher icons must differentiate your application from others. Aditionellement, do not use a glossy finish unless the object shown has a shiny material.

Their previous Gingerbread design guidelines and earlier (that is, prior to Holo) also explicitly mention the texture ("Icons should have a non-glossy textured material"), with the complete description of the described materials as such:

Launcher icons must use textured tactile materials, lit from above. Even if your icon is just a simple shape, you should try to get a rendering that gives the impression that it has been sculpted from real materials.

…and then…

The Android Launcher icons are …

  • Modern, minimalist, matte, tactile and textured
  • Forward-facing and top-lit, set, limited color palette

The Android Launcher icons are not …

  • Antique flat vector, too complicated, brilliant
  • Rotation, cropping, supersaturation

So it is clear that the intention of Google and Microsoft since the beginning of their respective mobile operating systems is to avoid the iOS / Aqua / Glossy aesthetics.