Google Design(google.com)
google.com
Google Design
http://www.google.com/design/
64 comments
> 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.
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.
I also like the new design direction. Haven't had an issue with it.
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.
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.
I hate their maps UX now. Just trying to pull up traffic is incredibly annoying! The whole auto drop-down thing is terrible.
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.
I admire aspects of the technical execution, but the user flow is just so perfectly wrong it's astounding.
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.
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.
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.
It's annoying because it's not always present.
Ex: I look up my favorite pizza place and it's 15 minutes away. Now I want to see traffic. How? It's impossible to view both.
Ex: I look up my favorite pizza place and it's 15 minutes away. Now I want to see traffic. How? It's impossible to view both.
It is always present. From the moment you see an overview of possible routes, in the route overview and in the TBT nav.
If you're not seeing traffic all the time, it either means:
- there's no congestion at all in the route that you picked
- you have a different version of maps than the latest one in the play store
- you didn't select driving directions, but either bus, walking, biking or something else.
- traffic for your location/city is simply not supported.
If you're not seeing traffic all the time, it either means:
- there's no congestion at all in the route that you picked
- you have a different version of maps than the latest one in the play store
- you didn't select driving directions, but either bus, walking, biking or something else.
- traffic for your location/city is simply not supported.
Sorry I mean the web version. It really is impossible to do both.
On mobile? I think it's even worse. Look up your nearest favorite chain and it zooms in on what it believes is the one you're looking for. What if it's not? There's a tiny 3 lines in the search bar that I apparently have to click to list all locations.
And anytime I snap to location? It zooms in. Really I'd love to just write the few lines of code it takes to toggle between current zoom level and default zoom level when snapping to location.
And they've stripped features. New UI is fine but at least keep old features nestled around somewhere. I used to be able to look up directions and then nestled in settings view "gas stations along the way". It's near impossible to do that now.
On mobile? I think it's even worse. Look up your nearest favorite chain and it zooms in on what it believes is the one you're looking for. What if it's not? There's a tiny 3 lines in the search bar that I apparently have to click to list all locations.
And anytime I snap to location? It zooms in. Really I'd love to just write the few lines of code it takes to toggle between current zoom level and default zoom level when snapping to location.
And they've stripped features. New UI is fine but at least keep old features nestled around somewhere. I used to be able to look up directions and then nestled in settings view "gas stations along the way". It's near impossible to do that now.
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.
Those people shouldn't be giving design advice, they should be seeking it.
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.
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.
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).
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.
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?
More intuitive would be not having to know the command. Is it still "from" if my gmail is set to German or French?
Anyway, I do think google solved this in to ways: type contact and from:contact is suggested
If you rest the curser over a contact name, a box with an option to see all conversation appear.
Anyway, I do think google solved this in to ways: type contact and from:contact is suggested
If you rest the curser over a contact name, a box with an option to see all conversation appear.
Careful what you wish for: http://www.theverge.com/2014/5/10/5704452/screenshots-sugges...
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/
If only they could describe their simple intuitive design goals, in simple intuitive language
> A material metaphor is the unifying theory of a rationalized space and a system of motion.
> A material metaphor is the unifying theory of a rationalized space and a system of motion.
Apple isn't much better: https://developer.apple.com/library/ios/documentation/UserEx...
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."
I really like: "Throughout, be prepared to defy precedent, question assumptions, and let a focus on content and functionality motivate every design decision."
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...
http://codepen.io/bennettfeely/pen/twbyA http://www.google.com/design/spec/animation/delightful-detai...
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."
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."
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.
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.
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.
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.
The icons on your desktop do not have any physical existence or properties beyond what we assign them. It's not even a desktop. If you really want to experience the true self of your files, you'll see a visual representation of the zeroes and ones that represent them, for even then they are nothing more than ghosts frozen in electrical charges.
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.
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.
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.
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.
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).
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.
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.
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
Reminds me of this post - https://news.ycombinator.com/item?id=7555012
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.
Google, historically, has benefited from immunity to design nazis, but it now looks like they've completely taken over.
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...
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.
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.
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.
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.
It feels like at design style rather than a design framework.
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....
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.
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.
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?
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.
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.
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.
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.
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.
So … are they really still fully embracing the hamburger menu? That seems like such a horrible design pattern to me.
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?
Youtube is one of the worst designed, user-unfriendly websites ever. And it only got worse with each update.
Are there any other company design guidelines like this one that someone can recommend?
"At Google we say, focus on the user and all else will follow."
Presumably they are talking about cameras.
Presumably they are talking about cameras.
I just assumed this was a typo:
'At Google we say, "Focus on the user data and all else will follow"'
'At Google we say, "Focus on the user data and all else will follow"'
Here we go:
"At Google we say, 'Focus on the user data and all else will follow.'"
"At Google we say, 'Focus on the user data and all else will follow.'"
Google "Design"
[deleted]
[deleted](1)
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?
> 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?
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.