I've noticed an interesting phenomenon in the user interfaces of many famous applications, they're moving away from the glossy complex to a more dull and bare minimum design.
Why the sudden change? It also appears that most of these companies have adopted this design around the same time, was that linked to some new study?
Examples:
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:
…to looking like this:
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:
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:
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:
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:
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:
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:
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:
…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:
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):
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.
Reflections were Apple's enormously influential way of communicating:
Flat (popularized but not created by Google) is a way of saying "we've moved beyond all the bling." It communicates:
It's nothing new (look to the international style design of the 50s and 60s) but it does indicate the UX focus of our time. It's also very much connected to the popularity and accessibility of designing with vector formats.
Might be a bit of a tangent, but this trend reminds me of the BBC announcing their new "digital" logo back in 1997.
The big reasons they gave at the time were that the move from glossy to a simpler matt logo allowed the logo to work better at multiple resolutions and on multiple devices. It also compressed better which was a big deal with their website in the dialup days, and blends better into text and alongside other logos.
It's an age old balance between form and function. UX is trying to balance the two. You want something which is visually pleasing and "looks good" but also want something that conveys information quickly and efficiently and is easy to use.
The Photoshop icon is really the best example. Sure the Feather looks cool, but what does that tell someone about the application that hasn't memorized the icon? Nothing. The PS logo on the other hand is stylistically similar to the various other products in the Creative Suite. Visually, it is conveyed that they are part of the same package. Additionally, the letters in the icon are clear and easy to read and show the user that it is a program PS. It isn't as clear as spelling out Photoshop, but someone can easily recognize it as Photoshop if they are familiar with the names of the various Creative Suite products.
It's also probably worth pointing out that only 2 companies are actually represented in your examples as the first 3 are all Microsoft products and thus mirror Microsoft's current visual direction.
For browser based UIs it's marginally more efficient and much more cross-browser compliant to build these 'flat' designs i.e. no drop shadows, bevels, gradients, rounded corners etc etc
This doesn't make a a great deal of difference on a desktop / broadband / modern browser but on mobile devices where connections are slower, screens are smaller and browser market share is fragmented, it can make a noticeable difference.
Given the importance of mobile web, this has influenced all design, particularly with the mobile-first design principle that may designers do (and in my opinion should) now adhere to.
I can only speak from my own observations. People buy tablets and use them on the go. Internet on the go costs extra money depending on country and provider. Heavy websites load slower. Good designers think about how to keep performance and loading times low and conclude to move away from heavy bling bling buttons.
Besides, Skeumorph designs have reached a saturation level. I don't think they will be gone, because they are great to showcase graphic capabilities of technology.
I don't share the opinion that most of us have, that the 'flat and lean' look would be inspired by Microsofts metro style. Ui Designers have already started adapting the flatter less glossy look back mid 2011. Go and check old posts on dribble and Forrst.
Someone starts experimenting and going back to the basics, then adds a touch of zeitgeist and others pick up. It's a cycle. Flat was in back in 2000-2004, but pixelated with edges and corners and hard to read fonts that were purely for aesthetic appeal.
We are cross pollinating each other and we are drawing inspiration from anywhere. Be it fashion, typography and now also apps.
Why the sudden change?
Broadly speaking, it is not a sudden change. Specific to MS, it is a bit of a sudden change. It's a design trend. Graphic design and UI design, like design in general follows aesthetic trends.
In the case of MS's examples, as many have noted, Windows 8/Metro is being designed as a significant departure from their previous operating system, so going with a significant change in visual presentation only makes sense for them.
As for Adobe, they have a habit of changing their application icons almost with every release. So that's more change for the sake of change than any specific strategic argument
Like my marketing professor used to say:
If everyone in the market is advertising toothpaste with sweet minty taste. You better advertise a toothpaste with salty taste. If everyone is advertising with flouride, you better do one without flouride!
i.e. Think Different!
Basically it's a marketing trend. All about standing out from the others. Now that market is saturated with glossy finish products, matte is back in.
There are and always will be merits & demerits for each, and they will each be suitable for different tasks. There is no particular reason, the masses don't think too much, they just follow the leaders. :)
A better question would be pros/cons of glossy vs. matte look. A simple answer would look like below:
Glossy
Pros:
Cons:
Matte
Pros:
Cons:
As you can see this is an overly simplified list. A quick google search didn't find any links showing such results. A good chance for the UX community to get together and make one! Time to wiki it!
See the Google trends for matte vs glossy.
One word...
We have only recently been able to see fonts as they appear in print, and so the design trends which have been prevalent in high print design/typography make more sense in the digital space now.
Look at print design, specifically high-end work, now... show me the drop shadows, and gloss, generally, it's not there, it doesn't test well, and the vast majority of the previous generation of print designers, and art directors would rather boil their mother alive than use tacky devices like that.
Ultimately you can look around at the cutting edge of web design and this trend has been clearly emerging for a few years, but with xhd displays, it's now more popular than ever.
Perhaps, you want to call it fashion, but this has been the style de rigueur in "serious" print for going on 25 years, and has had a strong showing since the modernist design movement began 80 years ago.
I believe with all new technology, people compete to be the most intricate, the most complex, to demonstrate their knowledge of the latest trends. Whether it's Flash, jQuery, or glossy buttons, developers show one another their knowledge of the web by pushing it as far as it can go. Once that happens, the technology grows old, the competition stops, and people only bring forward the pieces of value, while everything else fades away.
Since I mentioned jQuery, I'll use it as an example. A simple framework for Javascript that grows in popularity. Suddenly, you see sites hitting the market with sliding menus, and fading content. Every developer tries to show the next they're hip by following suit. They go into work, and their company wants not only sliding menus, but fading colors, and scrolling widgets. This will surely prove their company is better than the others, and pushing the latest trends. However, once everyone and their dog is using sliding menus, and fades, developers pause for a second. Integrating it into their product no longer illustrates their superior knowledge. They finally return to usability. Does this sliding menu improve our product for the user, or would it be better if it just appeared?
Flat design is a tough trend to push. If you're designing a button for a site, what do you ask your team or client? You show them two or three designs and say, 'which design looks best?'. They always pick the glossy button, or the one with the subtle gradient. Why? Because you asked how it looked, and surely a plain color doesn't look as nice as the one with the tasteful gradient and pixel perfect bevel. You see, you're asking the wrong questions. It's never been about how it looks, it's about how it functions.
People frequently forget the most important rule of all. When it comes to the internet, it's about the experience between the user and the content. Design has no place here. We're not making a work of art to showcase on your wall. This isn't a trend. Sliding menus, and glossy buttons are not going to make a return. They're dead. We showed the world we can design anything. In return, we know we're better off designing nothing.
It's a fashion called 'Metro' inspired from Microsoft Metro.
Yep, flattened and squared just like a Microsoft-Metro app.
If you remember the 'glossy-rounded-gradient' design just came in after windows XP,
the 'glossy-rounded-shaded-and-shadowy' came in just after windows Vista.
Think it this way : when computers hardware will be able to draw 'freaky' design like 3D-transluscent-radiowaved-unexistant-to-this-date user interface, it will be 'fashioned' in the next year.
Think it this other way : why would i NOT use css drop-shadow, text-shadow, border-image-background, gradient-background, border-radius? Performance.
I strongly believe it's a fashion, that follows 'programming' capabilities and nothing more.
My view is that glossiness is somehow perceived by users as an attribute in itself. Hence all icons with Glossiness get somehow clubbed together. Losing your brand or distinctiveness.
As to why Glossiness is itself perceived as an attribute perhaps when it first appeared it was so novel that it got this niche.
My brief thoughts - It's also about authenticity: a digitally authentic ui that plays to the capabilities device. Ex - Do users need buttons that looks like a physical button anymore? Not really, contrast and context are enough.
Skeuomorphic interfaces tend to have reduced capability to fit with the "ideal" they are attempting to mimic. OS X's calendar is a great and common example.
In a way, it's related to how the road signs are designed. Just imagine if the road signs were glossy and 3d and colorful.. that would be very difficult for the moving people to "process/decipher".
Could the answer be that (like number 4) things are now on tables?
Computer screens sat on tables and walls in front of you and you looked "out of/through" them. Think of the XP fields. The metaphor was one of a window, and postive light, and the light fell (in the wrong direction) on drop-shadow buttons. You were looking out and depth was important and made you feel less claustrophobic in front of the screen for many hours.
However, as soon as you use a device placed on a table, depth just makes you feel queasy as that is the sense you get from vertigo. And if you are going to swipe screens, depth again contradicts the message as the "bumps" of the icons would not slide so well. Flat things slide better. On a table, the metaphor just doesn't work. Pehaps this is why things are moving to a deck-of-cards metaphor now, with sliding tabs like you're waiting for the last card of your flush...
Design trend + 2 Heuristics at play:
Match between system and the real world Newer users don't need extreme analogies, as they grew up with digital concepts as evident in nature.
Aesthetic and minimalist design Less clutter means sharper focus on tasks at hand. No frivolous design elements to interfere.
Trends- Keep changing and changes keeps the excitement alive, expectation high, users satisfied with new designs, and so on. We live in a visual world. The visual layer is one of the important UX entry point . If it looks pleasant, you click. And then begins the experience.
Glossiness was there for sometime. It looked good. Had great refreshing impact on users. Shift to matte can be explained by the fact that its human tendency to see or expect changes after sometime.
If you see, the design has evolved from what it was a decade or before that era. For example, splash screens of Photoshop. See the version 4, 5, 6 ...CS, CS5 and now CS6. The amount of details (artwork) in the splash screen has been reduced and flatness increased with transparency playing a bigger role.
Glossiness to matte is just a change phenomena. Pleasant doesn't remain pleasant after sometime.
Design is ever evolving. Most exciting part of this question triggers thoughts on what will be the next trend we are going to witness.
I see following reasons;
Easy to make flat design for professionals too ( less details)
Major corp like google and microsoft adopted flat ui.
Most of the people are now aware of computers and don't need skeuomorphism tricks.
