Google Design

In both cases the idea is to obfuscate the complexity - remove it from the user's view to make it effortless. UX is not easy. What you are looking at is the "how," not the "what."

zachrose• 12 years ago

I really like: "Throughout, be prepared to defy precedent, question assumptions, and let a focus on content and functionality motivate every design decision."

kreek• 12 years ago

Tongue firmly in cheek; but does this mean they're going to start applying design to their products? I could fill a book of examples just from Gmail (settings screen, inconsistant placement of reply button, no option to reverse converstation view).

Synergyse• 12 years ago

They briefly mentioned this change would apply to all form factors (mobile, tablet, wearable & desktop) but no solid details yet. The UX components are based on http://www.polymer-project.org/

Andrex• 12 years ago

Careful what you wish for: http://www.theverge.com/2014/5/10/5704452/screenshots-sugges...

cliveowen• 12 years ago

GMail is often trumpeted as great example of a clean, well-designed web app, but I find it downright messy, complicated and unnecessarily simplistic. Everytime I need to do something simple like forwarding or adding a rule for deleting emails, I have to waste a good 10 minutes digging through that horribly designed settings menu. And even the main screen isn't that good, for example, there's no way to delete every email from a given contact, or at least not an obvious one. I try to use GMail as little as I can, because every time I do it's a real nightmare.

keevie• 12 years ago

I've had the opposite experience. To delete all emails from a given contact....search for from:contact, select all, delete. Idk how that could be more intuitive?

Colliwinks• 12 years ago

Google "Design"

aragot• 12 years ago

From the website:

Color is inspired by bold color statements juxtaposed with muted environments, taking cues from contemporary architecture, road signs, pavement marking tape, and sports courts. Emphasize bold shadows and highlights. Introduce unexpected and vibrant colors.

Is that announcing they're launching a text generator for design guidelines?

clarle• 12 years ago

Isn't material design basically re-invented skeuomorphism?

From Google's Material Design guide:

"...visual cues that are grounded in our experience of reality. The use of familiar tactile attributes speaks to primal parts of our brains and helps us quickly understand affordances."

542458• 12 years ago

Kinda. Skeuomorphism includes learned cues from everyday life (button positions on a calculator), while material design technically doesn't (only stuff relating to the physical nature of reality - shadows for depth, motion for reaction, etc).

tinco• 12 years ago

What visual cue that is grounded in our experience of reality does an app with a metallic texture background give you?

I'm half joking, of course there's elements of skeuomorphism that work this way, like designing a note taking app that looks like a lined pocket notebook. But the recent trend is to approach this very minimalistically, only taking the "primal parts" and leaving out the leather textures.

rrrx32• 12 years ago

I don't think so. I'd pin it as more of an evolutionary state. Skeuomorphism is the the 1:1 direct relation of digital items to items in the physical world. Material Design seems to be geared toward the behaviors and intent of solely digital items.

randomfool• 12 years ago

Skeuomorphism is adopting the style of physical incantation of an object for its digital display. Material design dictates a single physical incantation for the UI- everything should feel like paper.

A contrived example of this is a skeuomorphic car dashboard display would have photo-realistic guages with lighting reflections from the cover glass, detailed bezel, etc. My read of a Material design implementation is that it should have a flat design with lighting and depth effects for contrast and shape recognition.

wavefunction• 12 years ago

I don't see the ultimate difference between the skeuomorphism of Apple (which was extreme) and this. It's applying "physical" properties to the digital.

I'm gonna pass, and slag this "material design" every time it comes up. Clownshoes design philosophy, though I suppose I'm not surprised. Look how many steps it takes to "logout/login from a different account" now.

colordrops• 12 years ago

Just because the first time you ever heard the word "skeuomorphism" was when it was being trashed within the context of apple's previous UI designs doesn't mean that the concept is complete rubbish in its entirety.

bennettfeely• 12 years ago

Last October I made a CSS3 demo where the three-bar navicon icon transforms into an arrow. I'm very excited to see Google adopting it to their new designs.

http://codepen.io/bennettfeely/pen/twbyA http://www.google.com/design/spec/animation/delightful-detai...

zghst2• 12 years ago

I highly doubt Google adopted this from your demo.

anko• 12 years ago

nice, thanks.

hhsnopek3• 12 years ago

Material Design Reel Video: https://www.youtube.com/watch?v=Q8TXgCzxEnw There are soft button differences when they display the nexus devices, could these possibly be part of Googles Re-Design for the next Android release?

ThomPete3• 12 years ago

I worry that this color scheme is very hard to maintain. It's a very opinionated color and heavy color scheme rather than a more generic supporting color-scheme.

It feels like at design style rather than a design framework.

hhsnopek3• 12 years ago

They aren't any color schemes that they show... They show some examples and give advice on how to make your apps and sites aesthetically pleasing. They give you a pallet of colors [http://www.google.com/design/spec/style/color.html] that should be considered. This isn't a design framework....

ThomPete3• 12 years ago

Yes and it's that pallet I think is problematic.

lnanek2• 12 years ago

As a user I've been really unhappy with their designs lately. I often have to click around in maps to try to figure out how the heck to change it from one type of nav to another, for example. There's also often tons of mystery icons in their apps when I try to do something. It's very frustrating. The older versions of maps with more controls were a lot easier to use.

Their design patterns fail in user testing too. Moving actions to an unlabeled icon in the top right like they recommend to Android developers now instead of a large clear button just causes users to never find the action.

The recent Android Wear release is similar. All notifications are stripped of anything but text and an image and there's no way to put a button in where users may want one like the notification API already supports with RemoteViews. Google is forcing a certain look on the developers at the cost of the users.

I think their whole design initiative is just trying to make things look pretty and screwing over their users, personally.

bryang2• 12 years ago

I hate their maps UX now. Just trying to pull up traffic is incredibly annoying! The whole auto drop-down thing is terrible.

erichurkman• 12 years ago

They removed features, too. They used to have a feature that allowed you to view traffic patterns at a future time of day -- what traffic looks like during rush hour vs. weekends, for example.

thrownaway2424• 12 years ago

How is it annoying? When I load maps.google.com in Chrome on desktop, the link for "traffic" is shown by default. All you have to do is click once to turn it on.

On mobile, it's the very first option in the drawer, and if you turn it on it stays on until you turn if off again.

fidotron2• 12 years ago

That drop down thing has an uncanny ability to do the opposite of what you expect in almost any situation. It's like the UI from hell.

I admire aspects of the technical execution, but the user flow is just so perfectly wrong it's astounding.

bambax• 12 years ago

I can't use GMaps anymore, which was one of the most wonderful products ever! Still haven't found how to do street view of a specific step in directions.

Those people shouldn't be giving design advice, they should be seeking it.

lloeki• 12 years ago

As a user I've been really unhappy with their designs lately

You've been unhappy, while I've been extremely happy. In day to day usage, I find the new Maps is a net positive whereas the previous one was both overcrowded and cramped. The new design scales as with whatever device I'm on, it behaves the same while offering the best use of available real estate.

trying to make things look pretty and screwing over their users

They have consistently iterated towards a more cohesive, better thought out design language. Their "Material design" is the culmination of this process, embodying the principles of good design while covering a large spectrum of input and output devices. This is an incredible challenge and I feel they're well on their way to achieve this goal.

Dramatize• 12 years ago

I also like the new design direction. Haven't had an issue with it.

pcurve• 12 years ago

I like Google products in general, but their UX is pretty mediocre and often counter intuitive. This vapid guideline is yet another example. I have my browser open fairly wide, and all I see is one paragraph of text.

Yet, if I halve the width of the browser while maintaining the height, I get more a lot more content. That's not really good responsive design.

I click introduction. Again, huge meaningless illustration and not even a shred of text in sight. What illustrations there are, don't even correlate to the accompanying text.

Now, once you start driving into Layout, Style, sections, things get more meaningful. But in order to get to those content, you need to use the hamburger icon to toggle the left nav, because left nav is collapsed by default.

This is a kind of design that invites 90% drop off rate.

timdorr• 12 years ago

Material is just a set of guidelines. It's up to the implementer, Google included, to abide by them.

Apple has violated their own design guidelines on many occasions. Google has just never had anything like this (or at least to this degree of detail) in place, so they have much more distance to cover in order to catch up.

kin3• 12 years ago

I like that they've released all resources. This means 3rd party apps could in turn apply these same layouts and principles, creating a consistent user interface where it won't matter as much how unintuitive it is.

fidotron2• 12 years ago

This really is print design tyranny. When one of the leading web companies distributes their design guide as pdf . . .

Google, historically, has benefited from immunity to design nazis, but it now looks like they've completely taken over.

21echoes• 12 years ago

wait, what? there's one downloadable pdf for offline viewing, the main version (bigger, literally the first thing listed)is not pdf: http://www.google.com/design/spec/material-design/introducti...

zghst2• 12 years ago

The Material Design PDF seems like it's nothing but pretty pictures with copy. I think Google could do a better job of explaining the concept by using examples from their redesigned UI.

dmalik• 12 years ago

These new "Material" design guidelines are great and I hope that we see designers start adopting them. I also hope developers start adopting Googles great animation guidelines. The added depth combined with the animation provides a great UX. Start of the next trend in UI for sure. Albeit a combination of skeuomorphism and flat.

Reminds me of this post - https://news.ycombinator.com/item?id=7555012

r00fus2• 12 years ago

The "Surface Reaction" responsive interaction pattern just seems superfluous and distracting. I care that the button I hit was hit, not where I hit it.

Very similar to how in Windows7 the task bar follows your cursor with a glowing highlight - which I found very distracting and useless (not unlike the OSX dock magnify-on-mouseover). At least in Windows and OSX I can turn that off - since these are guidelines for new apps, I don't think Android users are going to be given those options.

zan2434• 12 years ago

I like that UIs are being given depth, but they should respond as physically expected to, too. Why can't buttons move into the screen when pushed instead of changing color and rippling?

arrrg• 12 years ago

So … are they really still fully embracing the hamburger menu? That seems like such a horrible design pattern to me.

XorNot• 12 years ago

Some day I'm hoping Google will deal with the 960px gap, but judging by YouTube and gmail not any time soon.

1920x1080 is a common form factor, yet for some reason they are allergic to the idea (as are a lot of other people) that their web-apps should not break when split to half the screen size.

gavinpc• 12 years ago

Edward Tufte tells us that we should strive for information-dense, multidimensional visuals. Bret Victor says, "What he said," and adds that these visuals should exploit the magical potential of dynamic displays.

As several have remarked, the principles in the OP tend to yield low-information interfaces. Colors, sizes, and spatial relations are not used as variable axes because they are subservient to visual appeal and "responsiveness".

I suspect that the Tufte-style displays (besides being difficult to craft in the first place) are difficult to suit to doing a lot, and the "material" style visuals are difficult to use for conveying a lot.

This has inspired me to work on an "almost-almost-flat" design that is high on information and affordances, while teaching itself.

basbas• 12 years ago

Are there any other company design guidelines like this one that someone can recommend?

metaphorical• 12 years ago

It looks nice. However, my biggest complain is that it's playing too safe. So that it feels more like a style guide than a vision.

E.g. When the style guide talks about mass and force in animation, I was expecting something much more than some recommendations on tweening. In many cases, it feels like a shallow reference to the physical / material, not quite the meaningful "metaphor" that it aspires to be.

Polymer, on the other hand, is pretty awesome.

seanmcdirmid• 12 years ago

Does anyone remember the TAT Foldout UI demo from way back in 2009?

https://www.youtube.com/watch?v=FtR_zA9elrM

That was definitely way over the top, but there is a lot of potential in naturalism (depth, lighting, shadows, paper) as well as natural motion in a phone UI. I'm glad Google is going in this direction.

Grue3• 12 years ago

Youtube is one of the worst designed, user-unfriendly websites ever. And it only got worse with each update.

Google Design

Related Stories