How Google Got Design(fastcodesign.com)
fastcodesign.com
How Google Got Design
http://www.fastcodesign.com/3046512/how-google-finally-got-design
19 comments
> But it also was pretty awesome to have an almost latency-free experience (and good information design, making efficient use of my screen).
It's funny. I think most people would agree that the experience you described isn't diametrically opposed to 'good design,' and in fact have the same goals.
But, it seems like the modern conception of 'good design' has effectively been reduced to pretty things and interface design. Even if designers wouldn't say that if you asked.
It's funny. I think most people would agree that the experience you described isn't diametrically opposed to 'good design,' and in fact have the same goals.
But, it seems like the modern conception of 'good design' has effectively been reduced to pretty things and interface design. Even if designers wouldn't say that if you asked.
> that the experience you described isn't diametrically opposed to 'good design,'
Yup. The more obsessed we get about "pixel-perfect" interactions, the more insufficient native browser behavior becomes, to the point where e.g. Flipboard just throws it all away and creates a new UI layer using <canvas>. But that's probably not what either of us would call "good design."
Yup. The more obsessed we get about "pixel-perfect" interactions, the more insufficient native browser behavior becomes, to the point where e.g. Flipboard just throws it all away and creates a new UI layer using <canvas>. But that's probably not what either of us would call "good design."
This only applies to websites. Modern apps don't just look great they feel great as well.
Absolutely the problem. Google+ currently causes Firefox to hang for five to ten seconds. (On my less core-gifted machine, this locks up the entire machine for those five to ten seconds, but in most cases, just ALL my Firefox.)
Agree so absolutely. Chrome taskbar (on Mac) showing a memory use of 472MB. I think even outlook express was many times lighter than this the last time I used them. Yes its kind of a cross platform mail client but it definitely has lesser feature (in the client side at least) than the desktop clients, is slower and takes many times more memory. What was the point again?
Web is good, cross-platform is good, open is good but I don't think the price we pay for this is shameful overbloat.
Web is good, cross-platform is good, open is good but I don't think the price we pay for this is shameful overbloat.
I don't think google gets design. Everything google that I've interfaced with has been met with some level of cursing and frustration. The other day I was trying to use google maps and almost had a breakdown out of frustration. It wasn't ALWAYS like this, mind you.
I will agree that their stuff is certainly prettier now, but I've found the usability has tanked across the board. I'd rather have something I can use than something that just looks nice.
I will agree that their stuff is certainly prettier now, but I've found the usability has tanked across the board. I'd rather have something I can use than something that just looks nice.
I don't think designers get design.
In the same way that engineers over-engineer, designers over-design. The difference is when you over-design a user interface the end-user actually notices.
In the same way that developers jump on the next new language and framework, the designer jumps on the next trend. But when you change the interaction pattern the end-user has to re-learn.
Those clever lines of code you love so much in your last project? That's the 50ms animation that really ties together the page - but creates that noticeable (and endlessly anoying) lag where after you click you have to wait to start entering data but you always start to soon and it misses the first letter or the keystroke does something else because the page focus is wrong.
Sometimes design isn't about pretty, it's about not annoying the office worker who uses your product several hours per day.
In the same way that engineers over-engineer, designers over-design. The difference is when you over-design a user interface the end-user actually notices.
In the same way that developers jump on the next new language and framework, the designer jumps on the next trend. But when you change the interaction pattern the end-user has to re-learn.
Those clever lines of code you love so much in your last project? That's the 50ms animation that really ties together the page - but creates that noticeable (and endlessly anoying) lag where after you click you have to wait to start entering data but you always start to soon and it misses the first letter or the keystroke does something else because the page focus is wrong.
Sometimes design isn't about pretty, it's about not annoying the office worker who uses your product several hours per day.
> Those clever lines of code you love so much in your last project? That's the 50ms animation that really ties together the page - but creates that noticeable (and endlessly anoying) lag where after you click you have to wait to start entering data but you always start to soon and it misses the first letter or the keystroke does something else because the page focus is wrong.
This. Could someone at Google (and every other hip software company) please print this 2000x with a wide-format printer and plaster the walls of the designers' offices with it? Thanks.
This. Could someone at Google (and every other hip software company) please print this 2000x with a wide-format printer and plaster the walls of the designers' offices with it? Thanks.
You mean like this?
http://www.google.com/about/company/philosophy
http://www.google.com/about/company/philosophy
There was a more radical version on a long-gone page called ux.html [1]:
Every millisecond counts.
Nothing is more valuable than people's time. Google pages load quickly, thanks to slim code and carefully selected image files. The most essential features and text are placed in the easiest-to-find locations. Unnecessary clicks, typing, steps, and other actions are eliminated. Google products ask for information only once and include smart defaults. Tasks are streamlined.
Speed is a boon to users. It is also a competitive advantage that Google doesn't sacrifice without good reason.
[1] http://web.archive.org/web/20080719213524/http://www.google....
Every millisecond counts.
Nothing is more valuable than people's time. Google pages load quickly, thanks to slim code and carefully selected image files. The most essential features and text are placed in the easiest-to-find locations. Unnecessary clicks, typing, steps, and other actions are eliminated. Google products ask for information only once and include smart defaults. Tasks are streamlined.
Speed is a boon to users. It is also a competitive advantage that Google doesn't sacrifice without good reason.
[1] http://web.archive.org/web/20080719213524/http://www.google....
I also have yet to find a UI designer who doesn't pitch a fit when you dare question the usability of their design. I'm sure they're out there, but my carefully constructed explanation of why a UI makes something harder to use has never been well received.
I agree. I'm not sure what happened to Maps, but it feels a lot harder to use than it used to.
Design should include usability. The eye-candy part is just a wrapper.
By that definition, Google certainly doesn't get design.
Design should include usability. The eye-candy part is just a wrapper.
By that definition, Google certainly doesn't get design.
Thankyou, I thought it was just me cursing about maps. Not just google maps but the "native" Swedish counterparts are also loosing or hiding useful tools because design. Design is more than just pretty colours...
> Design is more than just pretty colours...
I don't think anyone would disagree with that? But hiding useful tools isn't necessarily bad design either - there's usually a tradeoff to be made to help the majority of users perform a common interaction easier vs. surfacing a more infrequently used tool more prominently.
I don't think anyone would disagree with that? But hiding useful tools isn't necessarily bad design either - there's usually a tradeoff to be made to help the majority of users perform a common interaction easier vs. surfacing a more infrequently used tool more prominently.
The problem with Google Maps is not that advanced functionality is hidden in a menu -- people are used to having to learn a program to be able to get the most out of it.
The problem with maps is that they appear to be making it up as they go along. There are years of user interface research but because we're moving to touch interfaces it feels like designers are throwing all that research away.
Maps now is a confusing hard to use program. Functionality is not hidden in one set of menus. To do something you hae to search through a few different places, and the only way to learn is to just do it, but there are few affordances so you don't even know if a thing on the screen is clickable (or whether you need to tap; hold; pinch; drag; or stretch it).
The problem with maps is that they appear to be making it up as they go along. There are years of user interface research but because we're moving to touch interfaces it feels like designers are throwing all that research away.
Maps now is a confusing hard to use program. Functionality is not hidden in one set of menus. To do something you hae to search through a few different places, and the only way to learn is to just do it, but there are few affordances so you don't even know if a thing on the screen is clickable (or whether you need to tap; hold; pinch; drag; or stretch it).
Spot on! They really have zero affordances. At any given time I can be on any given screen, and it's entirely unclear how to progress or move backwards.
Even after using it, I still have to re-learn it every time i use it. There's no intuitivity (totally a word) at all.
Even after using it, I still have to re-learn it every time i use it. There's no intuitivity (totally a word) at all.
Completely agree on maps, current version can cause a lot of frustration with options appearing and disappearing depending on if I've done a search. Who would possibly want to turn on traffic after searching for something? Nobody at google maps apparently as that is one of the options that disappears in search mode. Certainly maps is a special case and maybe you could make a case for having all the UI controls the maximum possible distance from each other, but it causes me frustration visually to do a "where's waldo" search every time I want to change something.
I've seen a number of philosophy of design videos about material, is there such a thing explaining the design choices of maps? Some icons have background, some don't. Different options available depending on the mode. Novel, but frustrating for me, shadow menu under the search box. Is there some vision that I'm just not getting or I would understand better if I just looked at it right? I remember being really frustrated with unix command line interface until I understood the philosophy and then I loved it, would be great to have the same moment of clarity for maps.
I've seen a number of philosophy of design videos about material, is there such a thing explaining the design choices of maps? Some icons have background, some don't. Different options available depending on the mode. Novel, but frustrating for me, shadow menu under the search box. Is there some vision that I'm just not getting or I would understand better if I just looked at it right? I remember being really frustrated with unix command line interface until I understood the philosophy and then I loved it, would be great to have the same moment of clarity for maps.
They think they do, but they don't. At least nowhere near what Apple is doing. Right now they're at the stage where they think that if something has material design and looks pretty, then it must have a good user interface.
> I don't think google gets design.
I agree. That said, I think they're very early in infusing design with their culture. I would even argue pre-'design' @ Google, they were still very user centered, but in different ways.
I agree. That said, I think they're very early in infusing design with their culture. I would even argue pre-'design' @ Google, they were still very user centered, but in different ways.
Do I dare to say this somehow shows the relative unimportance of design?
Google is/was quite successful before they got design (let's say success in this context means something like: a large audience).
And even when they decided to get design: it took them a relatively short amount of time to get things "right".
I agree Material Design looks very nice. But I think functional value (just picking a term here) is so much more important, by an order of magnitude.
Google is/was quite successful before they got design (let's say success in this context means something like: a large audience).
And even when they decided to get design: it took them a relatively short amount of time to get things "right".
I agree Material Design looks very nice. But I think functional value (just picking a term here) is so much more important, by an order of magnitude.
Or perhaps Google "got" design before, but didn't realize it.
Speed, functional value (as you said), simplicity, and such really ought to be considered part of design just as much as a visually appealing set of colors on an interface is.
Speed, functional value (as you said), simplicity, and such really ought to be considered part of design just as much as a visually appealing set of colors on an interface is.
To be fair, I think that the transition is still ongoing.
On Android side, the support lib fell really short last year with Lollipop. You could implement a lot of material goodness, but had to do 90% of the work yourself.
Something like a collapsing ActionBar is clearly doable but needs some time that won't be devoted to polishing other parts of the app.
Another consequence is that since there was no common implementation, there were small design differences on many elements among Google apps.
With the new support lib (22.2), Google has released a design lib which implements some material elements. With this common base, I hope to see the design of the different first party apps harmonize a little bit more in the coming months.
With the new support lib (22.2), Google has released a design lib which implements some material elements. With this common base, I hope to see the design of the different first party apps harmonize a little bit more in the coming months.
Whether or not Design at Google is a move of some import is yet to be tested. Google is a heterogenous company with many different assets. It will take time for assets to upgrade, quirks ironed, old UX habits forgotten. Certainly "feels" that unifying/upgrading design is a good move.
Also, while I absolutely hate even firing up Maps (but I need to), I find that people, whose first experience with them is the new interface, like it very much.
Also, while I absolutely hate even firing up Maps (but I need to), I find that people, whose first experience with them is the new interface, like it very much.
The original article doesn't really prove anything. Someone used to think Google's design was bad, and now thinks it's nice.
Google did well before they got design, but they have probably widened their audience and increased conversion by getting design so increasing their profitability.
Aesthetically pleasing design is neither necessary nor sufficient to be a successful, but it definitely helps.
Google did well before they got design, but they have probably widened their audience and increased conversion by getting design so increasing their profitability.
Aesthetically pleasing design is neither necessary nor sufficient to be a successful, but it definitely helps.
"Do I dare to say this somehow shows the relative unimportance of design?"
When design is about cramming some animation in just about everything you can show on the screen, and about how fancy your colors are going to be – yes, I agree, it's relatively unimportant.
But real design is not about that at all. In fact, functionality has been part of the core debate in design, for at least a century now. Ask any designer – not only the ones dealing with UI, and they'll tell you.
When design is about cramming some animation in just about everything you can show on the screen, and about how fancy your colors are going to be – yes, I agree, it's relatively unimportant.
But real design is not about that at all. In fact, functionality has been part of the core debate in design, for at least a century now. Ask any designer – not only the ones dealing with UI, and they'll tell you.
To me Material has always felt like it was designed by an algorithm. There's just no trace of any "soul", playfulness or overall "artistry". I know this isn't true and there's many talented artists and designers working in Google but that's just the way I've perceived everything done with Material so far. It doesn't feel like fun, it feels like something that just had to be done to stay with the times.
Another issue is Material's animations. I literally cringe every time I have to use Google Translate on my phone. I can't imagine how annoying it would be to have full OS on your phone done with Material. Those whole element animations are so distracting and they actually make the app feel slower. I know iOS has also a lot of animation but the difference is where it is being applied. Material design applies it to interactions with elements while iOS applies it to transitions. If I have to wait and see how the element I just interacted with animates, it seems unimportant but if animation is used to mask loading time like for example when transferring between app and homescreen on iOS, then it feels natural. If you want to animate interaction elements, it needs to be really, really fast animation just to let you know that yes, I got your tap/click.
Another issue is Material's animations. I literally cringe every time I have to use Google Translate on my phone. I can't imagine how annoying it would be to have full OS on your phone done with Material. Those whole element animations are so distracting and they actually make the app feel slower. I know iOS has also a lot of animation but the difference is where it is being applied. Material design applies it to interactions with elements while iOS applies it to transitions. If I have to wait and see how the element I just interacted with animates, it seems unimportant but if animation is used to mask loading time like for example when transferring between app and homescreen on iOS, then it feels natural. If you want to animate interaction elements, it needs to be really, really fast animation just to let you know that yes, I got your tap/click.
Were there studies done to show that material design was "the way"? Or for that matter, was there any research done proving that it would be more useful at all? The designers at my company tout it as "the right way". I'm trying to be accommodating, but I'm starting to suspect that this is just one company's word over another's.
Oh I'm sure there's plenty of studies that were used to design Material and that's probably exactly why it feels like it was designed by an algorithm. Like the article says that it's very comprehensive guide/framework to get a cohesive result but that doesn't mean it has the magical "it" what makes design truly remarkable. One reason I think that might be factor is that Google has never been innovator when it comes to user experience. They're more about iteration and testing. The problem is that it leads to local maxima and rarely something unique and something that takes the whole industry forward.
But also keep in mind that designing a framework that works for small screens and big screens is truly a hard task. Microsoft tried and failed with "Metro" and now Google is trying to pull it off. In my opinion Apple has been a bit smarter about this and kept iOS and OSX mainly separate while integrating some elements here and there.
But also keep in mind that designing a framework that works for small screens and big screens is truly a hard task. Microsoft tried and failed with "Metro" and now Google is trying to pull it off. In my opinion Apple has been a bit smarter about this and kept iOS and OSX mainly separate while integrating some elements here and there.
Material allows for super complex applications to be consistent and easy to use. It is not "artsy" it's functional in a way that is better than anything else right now.
This is one of those things that I think we just have to agree to disagree. I've to (unfortunately) use Google's webapps in some of my client projects and they're a mess from user experience point of view. Personally I have an iPhone and I'm an Apple user but I make a conscious effort to look for good ideas from where ever they might come so I've made a habit to try latest Android where ever I can. That being said, I'm sorry to say but honestly, I think it's far from intuitive and for me Android has never felt consistent - even Google's own apps are breaking conventions constantly. I realize that this might be because I haven't used Android regularly over long period of time but for me if UX takes time to get used to, it's crap.
The OP would suggest not by an algorithm, but by a committee.
Material Design needs to evolve on the desktop side. I like it on mobile and I think to focus on interaction minimizing everything else is great, but on desktop with navigation implemented according to it, Material Design is just a huge waste of space and very unintuitive.
I would like to have an even broader meta framework than Material Design that makes it possible to use different colors and fonts and maybe even different features to distinguish hierarchy. That way you could implement your own version of Material Design, that does not look googly.
I would like to have an even broader meta framework than Material Design that makes it possible to use different colors and fonts and maybe even different features to distinguish hierarchy. That way you could implement your own version of Material Design, that does not look googly.
I second this. Just yesterday We were fighting to find some functionality in vast non-intuitive Google Apps screens with huge wasted space designed for swiping.
Finally a junior developer said, what was wrong with a simple table?
Finally a junior developer said, what was wrong with a simple table?
you mean like this? - https://www.google.com/design/spec/components/data-tables.ht...
It's clear Google has undertaken a massive task on defining a cohesive image and set of guidelines for the design of their products. In that sense it's probably better to have a flawed plan than no plan at all. However I would not be so fast on calling Material good design.
I might be alone on this but there's something on material design that irks me. I find it objectively pretty: colors, typography, everything with a defining image, related or just a fancy cartoon. That being said, every time I am faced with this kind of UI, my brain disconnects, I feel bored and unproductive, play a bit with the buttons never to touch it again. I do not need smiley faces and happy tones to keep me hooked to something. I just want a productive interface that gets my job done.
It is quite similar to these old children books we used to have with levers and unfolding parts inside the pages to discover more (let's say, the human body and the internal organs, or a lever that makes a bird wiggle). These were fun, sure, but a raw book with no illustrations at all ends up being the most efficient method to transfer information.
One day Google will have to figure out that their userbase are no longer kids amused by a square, a circle and a triangle.
I might be alone on this but there's something on material design that irks me. I find it objectively pretty: colors, typography, everything with a defining image, related or just a fancy cartoon. That being said, every time I am faced with this kind of UI, my brain disconnects, I feel bored and unproductive, play a bit with the buttons never to touch it again. I do not need smiley faces and happy tones to keep me hooked to something. I just want a productive interface that gets my job done.
It is quite similar to these old children books we used to have with levers and unfolding parts inside the pages to discover more (let's say, the human body and the internal organs, or a lever that makes a bird wiggle). These were fun, sure, but a raw book with no illustrations at all ends up being the most efficient method to transfer information.
One day Google will have to figure out that their userbase are no longer kids amused by a square, a circle and a triangle.
Saying that Google gets design is a bit of a stretch. The new Inbox product is a case in point: it just looks so busy and "over-designed" for what essentially should be a list of messages and a few controls to manage them.
Agreed, but some of their other products are very well designed IMO. It usually takes a while for them to get to that point though, so Inbox may be headed there soon.
Did it really take a while for their other products to get to that point?
I recall Gmail being something so immediately appealing and better than the status quo that people ditched their existing email services and applications overnight to start using it.
I recall Gmail being something so immediately appealing and better than the status quo that people ditched their existing email services and applications overnight to start using it.
Could be. The Google Cloud admin page is way nicer than Rackspace's or both of the Microsoft Azure pages. Maybe Material is just going through their internal hype cycle until it matures.
How do you get design?
1 - You respect designers
2 - You let them do their thing
3 - You guide them and is welcoming of (backend) changes that are pro-usability
4 - You avoid "thinking like an engineer" or "users are stupid" mentality
5 - You don't alienate them by A/B testing between 50 shades of blue
1 - You respect designers
2 - You let them do their thing
3 - You guide them and is welcoming of (backend) changes that are pro-usability
4 - You avoid "thinking like an engineer" or "users are stupid" mentality
5 - You don't alienate them by A/B testing between 50 shades of blue
Seems reasonable. Reminds me of the culture change required when engineers would say we'd like to do agile? Or can we make our own technical decisions with our interference? Or why do we have Business Analyst, Developers and Tester silos, sat in different offices with different managers etc.
Whilst still common those ideas are known anti-patterns. Let us hope UX and solid design is absorbed into the mainstream in time.
Whilst still common those ideas are known anti-patterns. Let us hope UX and solid design is absorbed into the mainstream in time.
I agree, there are going to still be some separation because your UX designer is not going to know how to shard a database, or your developer still won't know what kind of palette to apply given a certain circumstance (or use Photoshop), but it's essentially they talk and are not separated into silos.
So this is why all of google's pages are suddenly much harder to navigate/use.
Material design is great but I am still wondering how google could release the new Chrome bookmark manager which is a usability nightmare. It requires you to click many times to set a bookmark directory instead of just typing some tag.
Basic usability testing would have shown this.
As a non-designer, the new Chrome bookmark manager feels very "heavy", UI-wise, compared to the previous version. I also believe Material's color scheme will feel as dated as Aero in a few years.
Ironically Fast Company doesnt seem to get design with some of the gaudy and irrelevant figures in their article.
[deleted]
This must be a sponsored post!
Not only are Google interfaces ugly - I agree this is personal - but they remain unusable.
Indeed, they picked up good ideas from others (mobile interfaces from iOS, flat-ish design from Microsoft), but everything is cheap, in a lesser good quality, and particularly not user-friendly.
I'm thinking of:
- the new google maps - the new google drive - the new inbox - their google contact app - google play music - android interfaces as a whole
Please google, keep on being a data-gatherer, data-distributor instead of an app creator, and outsource this to other people who tackle this issue decently.
Not only are Google interfaces ugly - I agree this is personal - but they remain unusable.
Indeed, they picked up good ideas from others (mobile interfaces from iOS, flat-ish design from Microsoft), but everything is cheap, in a lesser good quality, and particularly not user-friendly.
I'm thinking of:
- the new google maps - the new google drive - the new inbox - their google contact app - google play music - android interfaces as a whole
Please google, keep on being a data-gatherer, data-distributor instead of an app creator, and outsource this to other people who tackle this issue decently.
They are definitely a lot better now than a few years ago. I think the design guidelines are actually better than almost any other OS/app guidelines I've seen so far. The design itself is subjective but I think it's very good.
Material Design is getting a lot of developer traction even outside Android, surely that is a sign of some success?
I find the design language great on mobile but a bit hard to get used to on desktop (still prefer Gmail to Inbox on desktop for instance)
Material Design is getting a lot of developer traction even outside Android, surely that is a sign of some success?
I find the design language great on mobile but a bit hard to get used to on desktop (still prefer Gmail to Inbox on desktop for instance)
I think Google's design is still in early stages. It seems like they're taking a bit of a wrong turn in the direction of busy, cluttered UIs - their original approach of simplicity was successful because it didn't get in the way.
Making it look pretty while keeping it simple is challenging. I expect it will take them a long time, and we'll have to grumble through it.
Making it look pretty while keeping it simple is challenging. I expect it will take them a long time, and we'll have to grumble through it.
Would've been much more impressive had it been released before Metro GUI.
So much FastCo Google coverage feels like astroturfing.
Is that because it gives them less time for their Apple astroturfing?
Very much looking forward to reading about this on Daring Fireball.
I wonder how much this has to do with Larry Page's meeting with Steve Jobs in 2010-11.
http://googlesystem.blogspot.ie/2011/10/how-steve-jobs-influ...
http://www.androidauthority.com/larry-page-and-steve-jobs-ad...
http://googlesystem.blogspot.ie/2011/10/how-steve-jobs-influ...
http://www.androidauthority.com/larry-page-and-steve-jobs-ad...
So here I am, with my beefy SSD machine, a 50 Mbit/s connection, a JS engine that is orders of magnitude faster than anything we had a few years ago, HTML5 offline storage, HTTP/2, still waiting >5sec for several Google properties to load, waiting >15sec for CEF-based Spotify to load, knowing that with today's tech, these things could fire up within <100ms.
It's no disaster if I have to wait for a few seconds, but especially for secondary tasks (like looking up an address on Maps or playing a song) which I do en passant while focusing on something else, I find that waiting for only a few seconds can already steal my focus. When I fire up a music app (be it non-Google Spotify, Google Play Music or whatever), it would be great if at least the search form was available immediately. Knowing that it won't, that instead my expensive PC will go sluggish for a few moments, I find myself just avoiding these things increasingly often.
And it's sad to know that Google once was pretty obsessed about reducing these little latencies wherever possible. Today, they develop SPDY and QUIC to save a few ms, then throw web frameworks at me that take whole seconds to load.
It's not that I didn't appreciate beautiful interface design. It's nice to have a mobile OS that arguably looks better than iOS. But it also was pretty awesome to have an almost latency-free experience (and good information design, making efficient use of my screen), even with an old netbook and shaky GPRS internet on the train.