Just a trend. The Microsoft style formerly known as Metro is a big factor in this trend. They've done so much advertising and marketing to promote it. Also, it's technically easy to implement, and that doesn't hurt it's popularity.
–
obeliaFeb 28 '13 at 16:18

25

Note that all but the last of your examples are Microsoft Products. As @obelia stated, it's part of their "Modern" UI movement.
–
Mike BrownFeb 28 '13 at 18:24

12

Somebody at MS decided that they really liked the 16 color '90 look, and decided to use on all their products, including word and skype.
–
CodesInChaosFeb 28 '13 at 20:42

17

@LordScree That's why here, at StackExchange, we have the ability to edit everything. So please, decrapify my question by editing it. Also, same note was mentioned 3 times already.
–
AdnanMar 2 '13 at 11:56

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

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.

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.

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.

+1 Even though it is a long way to scroll back up to the voting buttons... :D
–
Marjan VenemaMar 1 '13 at 9:15

20

+1 for telling a cool story with lots of visual aids :)
–
surfitscrollitMar 1 '13 at 10:17

1

I think windows 8's Metro has huge effect on the UI changes. Sites like billboard has already changed their UI which looks similar to Metro. By the i like to UI of Mac OS X. Even I have installed a Mac OS X Theme in my Ubuntu system.
–
NickMar 1 '13 at 11:09

2

@DA01 skeuomorphism in UI design has very definitely taken on the meaning of "emulating physical things" rather than just the standard meaning from physical products
–
Ben Brocka♦Mar 2 '13 at 3:12

6

The picture showing the evolution of the iMac, made me realise people don't want to buy a computer anyway, as in they don't really think of a computer as something special, so computers don't need to look noticeable. I mean its like TVs you don't buy a TV because it looks cool, as you don't use a TV, you watch programmes and the TV itself is unnoticeable as possible. People can now abstract away from the hardware meaning it can be more minimal, now in the same way people are starting to be able to abstract at from the software and focus more in the data/task, so the UI becomes more minimal.
–
Jonathan.Mar 3 '13 at 14:54

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.

To add to this, skeumorphism really came about in IT because people needed to relate to them. Much of the reasoning behind this doesn't apply anymore - case in point: no one uses a floppy disk anymore, and yet we still have disk icons everywhere referring to "saving". Younger generations actually find this design language harder to understand ("what is a floppy disk?")
–
DougFeb 28 '13 at 21:47

11

None of the examples provided are examples of skeumorphism, though. While they are glossy, they aren't replications of real objects. In other words, both the old and new are abstracted icons, but rendered with a different aesthetic style.
–
DA01Mar 1 '13 at 2:14

6

I should clarify, they aren't necessarily examples of skeumorphism in the UX-sense. While the gloss is attempting to emulate shiny material, the icons themselves aren't attempting to emulate anything physically real.
–
DA01Mar 1 '13 at 2:30

5

@doug, I suppose it's debatable, but I would not call that an example of skeumorphism. That is an example of iconography.
–
DA01Mar 1 '13 at 3:13

2

@doug I would also question whether “people need to relate to them” was ever really true versus a misguided attempt at improving usability which tried to conflate unavoidably different things.
–
Chris AdamsMar 1 '13 at 12:38

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.

That's less flatness and absence of hints altogether. A simple lined border around "Change PC settings" would make it more obvious.
–
Joe Z.Mar 1 '13 at 3:19

1

I agree that it is basically design trends, no more than you would expect or see in fashion. The fact that the attitudes and opinions of people change throughout time probably means that people will revisit this topic/debate again, but with the trends swapped around...
–
Michael LaiMar 1 '13 at 4:50

1

@obelia It's not the flatness of Windows 8 that is the problem. It's the complete lack of affordance, wich could be shown while remaining flat.
–
JohnGB♦Mar 1 '13 at 10:02

2

@JohnGB - I disagree. IMO it is precisely the flatness that is the problem. A colored rounded rectangle doesn't suggest click-ability to me (whereas a raised beveled rectangle definitely does).
–
obeliaMar 1 '13 at 20:43

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.

Thanks for the final note, it totally skipped me. While your answer does indeed make sense, how can we explain the absence of glossiness in Lync's online indicator?
–
AdnanFeb 28 '13 at 15:21

@Adnan - not sure what you mean by wondering how we can explain the absence of glossiness in Lync's online indicator. The design philosophy being followed simply says that anything distracting from the information being cleaning displayed in an aesthetically clear way is unneeded. The plain green box is more clear and uniform than a blended off one which by nature blends in more and jumps out less. It's the same reason that an emergency stop button is a big glaring ugly red button that you can't possibly miss, though the amount of standing out can be related to the importance of the info.
–
AJ HendersonFeb 28 '13 at 15:25

1

Alright, I must've miss-read your answer. Now it's all clear, thank you for explaining.
–
AdnanFeb 28 '13 at 15:26

It's a psychological trick.

Flat (popularized but not created by Google) is a way of saying "we've moved beyond all the bling." It communicates:

simplicity

efficient ux

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.

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.

@ChrisReynolds true. But note that while you're technically correct, I don't think that explains the trend. It's very much a visual design trend more so than a performance optimization trend.
–
DA01Mar 1 '13 at 16:48

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.

Resolution

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.

This simply isn't true. A drive down any city street will show countless posters and the like with web-like imagery. You even get the peeling poster effect, which is a bit ironic.
–
Facebook AnswersMar 2 '13 at 10:27

@FacebookAnswers I've updated my answer to change "commercial print" to "high-end print" - Note: fltdsgn.com showcases a lot of so called "flat design" and it all looks like high end print of the last 25 years. (see Neville Brody, or Meta design)
–
SlomojoMar 24 '13 at 0:17

@FacebookAnswers - by the way, billboards have never been a good example of typography, they've always been much more about BANG! and strong photographic imagery, so for them to have a lot of "realistic" effects is simply the nature of what they are.
–
SlomojoMar 24 '13 at 0:22

Well, a lot of web sites are also all about BANG! and grabbing the customer. Those flat designs in that showcase site all strike me as fairly uniform and dull; generic bootstrap clones.
–
Facebook AnswersMar 25 '13 at 11:19

3

I'm telling you why the trend is prevalent, I'm not able to tell you to like it.
–
SlomojoMar 25 '13 at 22:13

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

Re: Adobe and their continual icon rebooting, FYI, it's not for the sake of change, it's intended to imply novelty, albeit on a very simplistic level. But it tends to work, because humans do operate at some very simplistic levels.
–
SlomojoMar 2 '13 at 3:14

I would say 'change for the sake of change' = novelty. :)
–
DA01Mar 2 '13 at 5:01

The thing is "for the sake of change" isn't really expressing that it's part of a wider marketing strategy, it's kinda suggesting it's a whim (well, it is to me.) ... and perhaps, novelty expresses that too, depending on who's reading. Novelty in the context I used, is supposed to refer to "for the purposes of refreshing the product image, in the eyes of the consumer"
–
SlomojoMar 2 '13 at 8:36

OTH, many number of changes are happening between each release - bugs are getting fixed, new bugs created, methods rewritten, components & suppliers changed... none of which is visible to the end user. To the end user, no matter if you 5x the CPU speed, fix all the bugs and rewrite the OS, if it looks the same, it is the same. And you can't expect end users to read press releases. Different pixels on the screen, different shapes and pieces of plastic are the easiest way to communicate that work has happened since the last version. Isn't that part of good UX?
–
SylverdragMar 3 '13 at 10:56

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:

Attracts the eye (bright, shiny)

Illusion of depth

Cons:

Overused?

more complex to produce (more resources, be it time, money, cpu cycles ...etc.)

Matte

Pros:

Not Distracting (can easily glance over it)

simpler to produce (less resources, be it time, money, cpu cycles ...etc.)

Cons:

Overused?

Not attracting attention?

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!

Any idea as to why this isn't a valid explanation of observed behavior? While group behavior does have reason ; follow the herd is such a strong behavior that it is a valid explanation for a lot of mass interactions. Stock markets, Mobs, ...etc.
–
VijayMar 26 '13 at 7:30

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.

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.

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...

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.

"Less details in flat design in contrast to glossy icons enables user to consume and memorize information easily." Is there an information processing study related to this, or is it just a hypothesis you have?
–
dmacfourNov 24 '14 at 19:40