7 ms·

Google’s Quest to Write the Rulebook for Interactive Design

108 points by InternetGiant 12y ago

VeejayRampay 12y ago
Well, I'm not sure I want them to write the Rulebook for anything, the more competition and the more variety the better, but one sure thing, I do like the looks of the apps redesigned to stick to the new set of conventions for their "Material Design". It somehow combines the minimalism and simplicity of the "Flat UI" fad with the more sophisticated aspects of more modern interfaces. I wish I could get a taste of it on my Nexus 4 with Android L but I guess that's not happening.
- drzaiusapelord 12y ago
  N4 is getting lollipop.
  - divegeek 12y ago
    OTA update should be showing up any day now. I don't think specific dates for specific devices have been given, but it was supposed to start rolling out yesterday.
  - VeejayRampay 12y ago
    Didn't know. That's nice, thanks for the information.
i_am_ralpht 12y ago
I love the way Material Design looks, but I think there's still a way to go with how it responds to input. I made a prototype last weekend of a more fluid Floating Action Button: http://iamralpht.github.io/fab http://iamralpht.github.io/fab
- cpursley 12y ago
  This is really impressive! Do you mind sharing the js source up on a repo?
  - i_am_ralpht 12y ago
    Here's the source https://github.com/iamralpht/iamralpht.github.io/tree/master/fab/demo https://github.com/iamralpht/iamralpht.github.io/tree/master... although it's not terribly beautiful...
    - cpursley 12y ago
      Thanks! Regarding the copyright - would that be alright if I use parts of it on a project as long as I attribute the source to you?
      - i_am_ralpht 12y ago
        My bad, I updated it with APSLv2. If that's no good then send me an email (my address is in the page) and we can figure something out. Happy hacking!
- emehrkay 12y ago
  This is really nice. Is this workflow, creating new interactions by dragging the circle, an official Material Design thing?
  - i_am_ralpht 12y ago
    Circle masks are part of Material Design, but I haven't seen anything with draggable Floating Action Buttons (prior to making this). Obviously they've had a draggable circle for the insecure lock screen for a while, but (to me) it never felt as good. As I mentioned in the notes, Facebook Home was my main inspiration for this work. It's kind of a mash-up of that and Material...
- drzaiusapelord 12y ago
  I love it also, but as someone who has owned a Nexus 10 for almost two years, I really don't think I can justify another Android tablet. From an app perspective, unlike the android phone experience, you feel second class all the time. From Facebook to Twitter, the Android tablet version of those apps are just terrible. Amazon apparently has some war with google over its Fire line and making Fire more attractive than Google products, so we'll never get Prime Video on the Android tablet. Little things like the in-flight video on Southwest doesn't work with android (although they give you hilariously outdated instructions to use an android device with flash installed). I have a little remote control Romo robot I use to videochat with my infant son when I'm at work, and they gave up on their android app. Every startup launches an iOS app that's solid and good looking with a "coming soon" Android app that either never gets here or is a goddamn mess. That's on top of the other tomfoolery with the N10 like the random battery drains and random reboots, although this might just be old age. I just don't feel the Android tablet experience is there yet and considering Apple's dominance in this area, it may never be there. Developers just aren't making it a priority and often we just get a stretched out phone app, if we get anything. Its shameful how little this has changed in the past couple years.
  - badlucklottery 12y ago
    >we'll never get Prime Video on the Android tablet You can now but it requires some user intervention. Amazon's video app can't be installed via the Play store for whatever reason but, if you select a video in the main Amazon app, it asks you to sideload the video app by enabling non-store apps for a bit. Install it an everything works as expected.
    - coldpie 12y ago
      Yep, it works great. > Amazon's video app can't be installed via the Play store for whatever reason Amazon has their own Android app store that they're pushing very aggressively. When you selected the video in the Amazon app, it actually brought you to the Amazon app store to download the video app. You have to enable side-loading because the Amazon app store isn't the Play store: it's not allowed to install stuff.
  - 12y ago
- TeeWEE 12y ago
  While i like the animation, the fact that you have to "drag" your finger over the screen, to "tap" on a button, seems weird to me.
- deleted 12y ago
  [deleted]
- billiam 12y ago
  It's WebkitCSSMatrix dependent. Did you even try to make it work with one of the polyfills for CSSMatrix so it would work on Firefox?
  - i_am_ralpht 12y ago
    Sorry, I didn't try any polyfills; I had a few hours on a weekend and compatibility wasn't on my list. I did do that for a previous project[1] and it was more work than I had time for. I'd love it if Firefox included a CSSMatrix implementation, it's incredibly useful. That and a method to get the absolute transform of an element including all the fiddly transform-origin stuff would be wonderful (I remember roc talking about something like this, but don't remember what happened). [1]: https://github.com/iamralpht/tboard https://github.com/iamralpht/tboard a spelling game for my kids, inspired by the worksheets they get at school.
- agumonkey 12y ago
  Nice ideas. The 'undo' gesture is still a little bit too 'allowing' to me. I mean the point where I switch from selected-contact to alternative-contact is a bit too obscure. Plus the animated circles are a too heavy on the user at that point. A more discrete animation would ensure the intent is right. The visual lingo for going forward could be different to help discrimate.
easytiger 12y ago
> An excerpt from the material design spec, showing how raised buttons can enhance usability I'm pretty sure that was worked out 30 years ago.
- lnanek2 12y ago
  Indeed, I was reading usability text books in college many years ago pointing that out. But Google threw all that out with flat design and now they have to reinvent it. They always have been very bad at taking in external ideas, so lets all just pretend they didn't just rediscover something everyone knew, otherwise they will throw it out again under the not invented here heading.
  - Ensorceled 12y ago
    I was just thinking that. "It's still flat design but now with these usability enhancing shadows, let's call it Material Design and this whole project a Quest!" It's a drop shadow and I spent days figuring out how do to the way our design guy wanted it done in C and Assembler almost 30 years ago.
    - hahainternet 12y ago
      Could you point us to this user interface of yours that used drop shadows in 1984? I'm not even doubting you, just interested.
      - easytiger 12y ago
        This is the calculator from Apple Lisa in 1983: http://en.wikipedia.org/wiki/Apple_Lisa#mediaviewer/File:Apple_Lisa_Office_System_3.1.png http://en.wikipedia.org/wiki/Apple_Lisa#mediaviewer/File:App... But borders basically are what we are talking about.
        hahainternet 12y ago
        It's not really comparable is it? I mean yes, shadows have been around for quite a long time, but Google's new design is particularly interesting I think.
lnanek2 12y ago
Sure would be nice if they started getting the basics right. When I moved all the primary actions for my apps into the top right action bar, no colors no gloss no 3d no labels as Google requires, users could no longer find them. Complaints went up. Successful app metrics went down. User testing where you have a user try to accomplish a set goal using an app had less completes. Google is just doing whatever looks pretty and ignoring user testing.
- thomasahle 12y ago
  I'm pretty sure the ... menu in the top right should be for the _least_ used actions, not the most frequent..
snowwrestler 12y ago
This picture is meant to show the value of drop shadows as a guide to interactivity: http://www.wired.com/wp-content/uploads/2014/11/MD234.jpg http://www.wired.com/wp-content/uploads/2014/11/MD234.jpg Yet arguably the most important buttons--the persistent OS navigation at the bottom--do not have drop shadows or any other kind of affordance. So which is it? Are drop shadows essential to interactivity or not?
- izacus 12y ago
  Do you really expect a one-size-fits-all answer for such a complex thing like a UI?
- Phrodo_00 12y ago
  The OS navigation are the least important buttons for the app, and since the user is (supposed to be) familiar with them need the less amount of emphasis.
- bjz_ 12y ago
  The other thing to consider is that the persistent navigation should recede into the background - drop shadows on everything would detract from the app's content. I would assume that the affordances are also less necessary because the persistent navigation is more commonly used. Anyway, this might not be the reasoning by the designer, and it might not actually work in practice, but it could be one justification... rules are there to be broken.
- talmand 12y ago
  I wouldn't define the second example as having buttons at all, they are just text that can be interacted with. If they outlined the white buttons and left the color on the other then they would have a proper example of buttons comparing with/without drop shadows.
sanketdasgupta 12y ago
Even though material design looks really good, it will really take time to get acquainted and running in the app ecosystem. I hope all new apps follow this, then the bigger players will also follow. Otherwise, this is going nowhere.
drewblaisdell 12y ago
Here are the actual Material Design specs: http://www.google.com/design/spec/material-design/introduction.html http://www.google.com/design/spec/material-design/introducti...
- bsimpson 12y ago
  It's great to see they're being updated. They were embarrassing for the first 4 months, with obvious typos and duplicated content.
mattmanser 12y ago
I find the floating buttons a bit of a bizarre choice, to me they look like they should be dragged, not clicked. Then again, it's just a picture, but why should we listen to what they're saying? They keep getting their own products wrong. One recent example is the android gmail app, where it's never clear when it last refreshed the data and you find yourself constantly pulling down to get it to refresh, it says it has, but then a minute or two later suddenly emails from hours ago appear. I've just switched to myMail and it's honestly a lot better. And the new maps interface is really rubbish, you constantly feel like you're fighting it, things have stupidly slow animations for no good reason, it's not actually clear what's, what. And the navigation in FPS mode is so bad and has been for years. Hell, and this one has always bugged me, they still after 7 years, hide the really important apps you have on google apps for business in a stupid little drop down hidden in a "more" link which isn't even clear it's a more link. Meaning the "platform" it's supposed to be is actually just a mail app with some links tacked on. Like Apple don't say much, but then release something and nail it, while Google talk as if they're an authority but consistently release complete messes. This is actually getting me pissed off. How can they be thought leaders? Even their own site has rubbish UX choices: http://www.google.com/design/spec/components/buttons.html http://www.google.com/design/spec/components/buttons.html Just look at the menu, it's a complete disaster UX wise. Click menu choices just open accordion sub menus, they make the cardinal sin of forcing the user to click again and do extra work. And one of them, the "Material Design", that just opens another menu with just one, YES JUST ONE, option of "Introduction". How can you call yourself thought leaders and yet get something as basic as a menu so wrong? It's like some sort of joke I don't get. Did no-one at google try and use their own site to see how useless it is? It's not a good UX. So how can you design good UX for the rest of us if you can't get that right? And they even have .html in their paths. Argh. Hello 1990.
- cageface 12y ago
  Are we so used to praising Apple for design that we haven't noticed that their last two releases of iOS have been a disaster from both an aesthetic and usability point of view? They certainly haven't "nailed" much of anything in UI design lately. Personally I find Material much more thoughtful, rational and functional and that's the same take I've heard coming from just about every professional designer I've heard take the time to voice an opinion.
fdej 12y ago
Every few years, a new generation of design graduates will enter the industry and "rewrite the rulebook" by simply doing the opposite of what the previous generation did. We will thus have to live with the five-year flat/unflat fashion cycle for the foreseeable future.
- paulojreis 12y ago
  Those are just trends, designers aren't trying to rewrite the rules with that. Besides that: I think any thoughtful (interaction) designers would cringe at the idea of a rulebook (at least, at the idea of a prescriptive rulebook such as this example).
- Animats 12y ago
  This may get to be a cycle, like the cycle of consumer electronics through beige, black, white, gray, and back to beige again. That used to be coordinated by the Color Association of the United States. Here's a 2005 report for HP, announcing that green was out and white was coming in: http://www.hp.com/large/ipg/assets/bus-solutions/color-trends-in-the-corporate-world.pdf http://www.hp.com/large/ipg/assets/bus-solutions/color-trend...
gavinpc 12y ago
I prefer to call this "material modeling," because before you put a pixel on the screen, you have to ask yourself how all the components fit together in the state machine that you are building. The analogy to the physical world breaks down, IMHO. Virtual space is completely fungible, and we aren't ready to give that up (even assuming it were a good idea): almost everything stretches, shrinks, mutates, appears and disappears. I know part of their objective (which I applaud) is move away from this kind of paradigm (or lack of one). But in practice, you have to stop at some point and say "close enough." They say elsewhere, for example, that it's better for transitions to be fast than smooth. It's in that little interval that you can sweep the impedance mismatch (between the designer's model and the user model) under the rug. Anyway, I'm glad that we're talking about the rational basis for one design or another, rather than treating it as an impenetrable art.
deleted 12y ago
[deleted]
gjvc 12y ago
Add a data grid which isn't a complete pain in the ass, and people will bite their hands off. Much of the the user end of "Enterprise IT" is glorified form fill-in, and the web does it really terribly. It's been about 20 years -- why are the simple things still disproportionately difficult to do well on the web? Like, you know, tabulate, sort, and filter data? On a positive note, the documents at http://www.google.com/design/spec/material-design/introduction.html http://www.google.com/design/spec/material-design/introducti..., show how much consideration is required to just do the basics well, for example buttons http://www.google.com/design/spec/components/buttons.html http://www.google.com/design/spec/components/buttons.html It's not that the good stuff on the web is so bad, it's that the lowest common denominator is just far too low.
wmeredith 12y ago
Oh lord, I hope they don't succeed. Google seems more intersted in their products looking "cool" than being easy to use. Search is awful compared to 5 years ago. Gmail is worse. Google documents has turned into a real mess. Google Analytics has one of the most impenetrable dashboards I've come across. Exacerbating all of this is the fact that they won't stop redesigning their shit. Their interfaces change monthly. Now, I'm not a user who demands nothing ever change, but I can't even learn any of this stuff before it's "new and improved". Blegh.
- debaserab2 12y ago
  I can understand the negative impression of the recent GA, drive, and Gmail - but how exactly is search awful compared to five years ago? Unless you're referring to the algorithm changes, I don't see the argument that the interface itself is harder to use now than five years ago.
  - wmeredith 12y ago
    Seriously? Google's SERP pages are now 75% ads above the fold. Hell, on a netbook you may not even see ANY organic search results. A couple quick examples: Google "work at home" (no quotes) and you'll see eight sponsored results and three organic results. Google "credit card" (no quotes) and you'll see NINE sponsored results and TWO organic results. This is on a Macbook Pro 15" running Chrome. it's also worth noting that Google's current gen algo with hit you with a penalty if you "run too many adds above the fold". They also have carousels, maps and product photos. Google has fully become the search engines they used to despise. It's basically a paid directory. I'm a power user so I scroll down, but the first content listing will see 33% of the clicks on the page. 40% of Google users don't know the ads are even ads. Further reading... https://econsultancy.com/blog/62249-40-of-consumers-are-unaware-that-google-adwords-are-adverts https://econsultancy.com/blog/62249-40-of-consumers-are-unaw... http://www.anticareer.com/google-tells-you-to-do-one-thing-but-it-is-ok-if-they-do-the-opposite/ http://www.anticareer.com/google-tells-you-to-do-one-thing-b... http://www.affhelper.com/googles-hypocrisy-exposed/ http://www.affhelper.com/googles-hypocrisy-exposed/ http://www.branded3.com/blogs/will-google-penalise-itself-for-excessive-ads-above-the-fold/ http://www.branded3.com/blogs/will-google-penalise-itself-fo...
Animats 12y ago
"What’s a key attribute of a good UI? It disappears. It does not draw attention to itself. It enables the user experience, but is not itself the experience." -- Kathy Sierra, Serious Pony That's the problem. The functional purpose of the UI is to get you to the content or let you do something, then get out of the way. The business purpose of the UI, though, is to get customers to buy the thing. "Sell the sizzle, not the steak". That's the driving force behind this endless tweaking of graphic elements. Here's another kind of UI - automobile dashboards. http://www.darkroastedblend.com/2012/05/car-dashboards-as-works-of-art.html http://www.darkroastedblend.com/2012/05/car-dashboards-as-wo... This is worth careful study. Match up the dashboards with various computer UIs.

108 points by InternetGiant 12y ago

Well, I'm not sure I want them to write the Rulebook for anything, the more competition and the more variety the better, but one sure thing, I do like the looks of the apps redesigned to stick to the new set of conventions for their "Material Design". It somehow combines the minimalism and simplicity of the "Flat UI" fad with the more sophisticated aspects of more modern interfaces. I wish I could get a taste of it on my Nexus 4 with Android L but I guess that's not happening.

drzaiusapelord 12y ago
N4 is getting lollipop.
- divegeek 12y ago
  OTA update should be showing up any day now. I don't think specific dates for specific devices have been given, but it was supposed to start rolling out yesterday.
- VeejayRampay 12y ago
  Didn't know. That's nice, thanks for the information.

i_am_ralpht 12y ago

I love the way Material Design looks, but I think there's still a way to go with how it responds to input. I made a prototype last weekend of a more fluid Floating Action Button: http://iamralpht.github.io/fab http://iamralpht.github.io/fab

cpursley 12y ago
This is really impressive! Do you mind sharing the js source up on a repo?
- i_am_ralpht 12y ago
  Here's the source https://github.com/iamralpht/iamralpht.github.io/tree/master/fab/demo https://github.com/iamralpht/iamralpht.github.io/tree/master... although it's not terribly beautiful...
  - cpursley 12y ago
    Thanks! Regarding the copyright - would that be alright if I use parts of it on a project as long as I attribute the source to you?
    - i_am_ralpht 12y ago
      My bad, I updated it with APSLv2. If that's no good then send me an email (my address is in the page) and we can figure something out. Happy hacking!
emehrkay 12y ago
This is really nice. Is this workflow, creating new interactions by dragging the circle, an official Material Design thing?
- i_am_ralpht 12y ago
  Circle masks are part of Material Design, but I haven't seen anything with draggable Floating Action Buttons (prior to making this). Obviously they've had a draggable circle for the insecure lock screen for a while, but (to me) it never felt as good. As I mentioned in the notes, Facebook Home was my main inspiration for this work. It's kind of a mash-up of that and Material...
drzaiusapelord 12y ago
I love it also, but as someone who has owned a Nexus 10 for almost two years, I really don't think I can justify another Android tablet. From an app perspective, unlike the android phone experience, you feel second class all the time. From Facebook to Twitter, the Android tablet version of those apps are just terrible. Amazon apparently has some war with google over its Fire line and making Fire more attractive than Google products, so we'll never get Prime Video on the Android tablet. Little things like the in-flight video on Southwest doesn't work with android (although they give you hilariously outdated instructions to use an android device with flash installed). I have a little remote control Romo robot I use to videochat with my infant son when I'm at work, and they gave up on their android app. Every startup launches an iOS app that's solid and good looking with a "coming soon" Android app that either never gets here or is a goddamn mess. That's on top of the other tomfoolery with the N10 like the random battery drains and random reboots, although this might just be old age. I just don't feel the Android tablet experience is there yet and considering Apple's dominance in this area, it may never be there. Developers just aren't making it a priority and often we just get a stretched out phone app, if we get anything. Its shameful how little this has changed in the past couple years.
- badlucklottery 12y ago
  >we'll never get Prime Video on the Android tablet You can now but it requires some user intervention. Amazon's video app can't be installed via the Play store for whatever reason but, if you select a video in the main Amazon app, it asks you to sideload the video app by enabling non-store apps for a bit. Install it an everything works as expected.
  - coldpie 12y ago
    Yep, it works great. > Amazon's video app can't be installed via the Play store for whatever reason Amazon has their own Android app store that they're pushing very aggressively. When you selected the video in the Amazon app, it actually brought you to the Amazon app store to download the video app. You have to enable side-loading because the Amazon app store isn't the Play store: it's not allowed to install stuff.
- 12y ago
TeeWEE 12y ago
While i like the animation, the fact that you have to "drag" your finger over the screen, to "tap" on a button, seems weird to me.
deleted 12y ago
[deleted]
billiam 12y ago
It's WebkitCSSMatrix dependent. Did you even try to make it work with one of the polyfills for CSSMatrix so it would work on Firefox?
- i_am_ralpht 12y ago
  Sorry, I didn't try any polyfills; I had a few hours on a weekend and compatibility wasn't on my list. I did do that for a previous project[1] and it was more work than I had time for. I'd love it if Firefox included a CSSMatrix implementation, it's incredibly useful. That and a method to get the absolute transform of an element including all the fiddly transform-origin stuff would be wonderful (I remember roc talking about something like this, but don't remember what happened). [1]: https://github.com/iamralpht/tboard https://github.com/iamralpht/tboard a spelling game for my kids, inspired by the worksheets they get at school.
agumonkey 12y ago
Nice ideas. The 'undo' gesture is still a little bit too 'allowing' to me. I mean the point where I switch from selected-contact to alternative-contact is a bit too obscure. Plus the animated circles are a too heavy on the user at that point. A more discrete animation would ensure the intent is right. The visual lingo for going forward could be different to help discrimate.

easytiger 12y ago

> An excerpt from the material design spec, showing how raised buttons can enhance usability I'm pretty sure that was worked out 30 years ago.

lnanek2 12y ago
Indeed, I was reading usability text books in college many years ago pointing that out. But Google threw all that out with flat design and now they have to reinvent it. They always have been very bad at taking in external ideas, so lets all just pretend they didn't just rediscover something everyone knew, otherwise they will throw it out again under the not invented here heading.
- Ensorceled 12y ago
  I was just thinking that. "It's still flat design but now with these usability enhancing shadows, let's call it Material Design and this whole project a Quest!" It's a drop shadow and I spent days figuring out how do to the way our design guy wanted it done in C and Assembler almost 30 years ago.
  - hahainternet 12y ago
    Could you point us to this user interface of yours that used drop shadows in 1984? I'm not even doubting you, just interested.
    - easytiger 12y ago
      This is the calculator from Apple Lisa in 1983: http://en.wikipedia.org/wiki/Apple_Lisa#mediaviewer/File:Apple_Lisa_Office_System_3.1.png http://en.wikipedia.org/wiki/Apple_Lisa#mediaviewer/File:App... But borders basically are what we are talking about.
      - hahainternet 12y ago
        It's not really comparable is it? I mean yes, shadows have been around for quite a long time, but Google's new design is particularly interesting I think.

lnanek2 12y ago

Sure would be nice if they started getting the basics right. When I moved all the primary actions for my apps into the top right action bar, no colors no gloss no 3d no labels as Google requires, users could no longer find them. Complaints went up. Successful app metrics went down. User testing where you have a user try to accomplish a set goal using an app had less completes. Google is just doing whatever looks pretty and ignoring user testing.

thomasahle 12y ago
I'm pretty sure the ... menu in the top right should be for the _least_ used actions, not the most frequent..

snowwrestler 12y ago

This picture is meant to show the value of drop shadows as a guide to interactivity: http://www.wired.com/wp-content/uploads/2014/11/MD234.jpg http://www.wired.com/wp-content/uploads/2014/11/MD234.jpg Yet arguably the most important buttons--the persistent OS navigation at the bottom--do not have drop shadows or any other kind of affordance. So which is it? Are drop shadows essential to interactivity or not?

izacus 12y ago
Do you really expect a one-size-fits-all answer for such a complex thing like a UI?
Phrodo_00 12y ago
The OS navigation are the least important buttons for the app, and since the user is (supposed to be) familiar with them need the less amount of emphasis.
bjz_ 12y ago
The other thing to consider is that the persistent navigation should recede into the background - drop shadows on everything would detract from the app's content. I would assume that the affordances are also less necessary because the persistent navigation is more commonly used. Anyway, this might not be the reasoning by the designer, and it might not actually work in practice, but it could be one justification... rules are there to be broken.
talmand 12y ago
I wouldn't define the second example as having buttons at all, they are just text that can be interacted with. If they outlined the white buttons and left the color on the other then they would have a proper example of buttons comparing with/without drop shadows.

sanketdasgupta 12y ago

Even though material design looks really good, it will really take time to get acquainted and running in the app ecosystem. I hope all new apps follow this, then the bigger players will also follow. Otherwise, this is going nowhere.

drewblaisdell 12y ago

Here are the actual Material Design specs: http://www.google.com/design/spec/material-design/introduction.html http://www.google.com/design/spec/material-design/introducti...

bsimpson 12y ago
It's great to see they're being updated. They were embarrassing for the first 4 months, with obvious typos and duplicated content.

mattmanser 12y ago

I find the floating buttons a bit of a bizarre choice, to me they look like they should be dragged, not clicked. Then again, it's just a picture, but why should we listen to what they're saying? They keep getting their own products wrong. One recent example is the android gmail app, where it's never clear when it last refreshed the data and you find yourself constantly pulling down to get it to refresh, it says it has, but then a minute or two later suddenly emails from hours ago appear. I've just switched to myMail and it's honestly a lot better. And the new maps interface is really rubbish, you constantly feel like you're fighting it, things have stupidly slow animations for no good reason, it's not actually clear what's, what. And the navigation in FPS mode is so bad and has been for years. Hell, and this one has always bugged me, they still after 7 years, hide the really important apps you have on google apps for business in a stupid little drop down hidden in a "more" link which isn't even clear it's a more link. Meaning the "platform" it's supposed to be is actually just a mail app with some links tacked on. Like Apple don't say much, but then release something and nail it, while Google talk as if they're an authority but consistently release complete messes. This is actually getting me pissed off. How can they be thought leaders? Even their own site has rubbish UX choices: http://www.google.com/design/spec/components/buttons.html http://www.google.com/design/spec/components/buttons.html Just look at the menu, it's a complete disaster UX wise. Click menu choices just open accordion sub menus, they make the cardinal sin of forcing the user to click again and do extra work. And one of them, the "Material Design", that just opens another menu with just one, YES JUST ONE, option of "Introduction". How can you call yourself thought leaders and yet get something as basic as a menu so wrong? It's like some sort of joke I don't get. Did no-one at google try and use their own site to see how useless it is? It's not a good UX. So how can you design good UX for the rest of us if you can't get that right? And they even have .html in their paths. Argh. Hello 1990.

cageface 12y ago
Are we so used to praising Apple for design that we haven't noticed that their last two releases of iOS have been a disaster from both an aesthetic and usability point of view? They certainly haven't "nailed" much of anything in UI design lately. Personally I find Material much more thoughtful, rational and functional and that's the same take I've heard coming from just about every professional designer I've heard take the time to voice an opinion.

fdej 12y ago

Every few years, a new generation of design graduates will enter the industry and "rewrite the rulebook" by simply doing the opposite of what the previous generation did. We will thus have to live with the five-year flat/unflat fashion cycle for the foreseeable future.

paulojreis 12y ago
Those are just trends, designers aren't trying to rewrite the rules with that. Besides that: I think any thoughtful (interaction) designers would cringe at the idea of a rulebook (at least, at the idea of a prescriptive rulebook such as this example).
Animats 12y ago
This may get to be a cycle, like the cycle of consumer electronics through beige, black, white, gray, and back to beige again. That used to be coordinated by the Color Association of the United States. Here's a 2005 report for HP, announcing that green was out and white was coming in: http://www.hp.com/large/ipg/assets/bus-solutions/color-trends-in-the-corporate-world.pdf http://www.hp.com/large/ipg/assets/bus-solutions/color-trend...

gavinpc 12y ago

I prefer to call this "material modeling," because before you put a pixel on the screen, you have to ask yourself how all the components fit together in the state machine that you are building. The analogy to the physical world breaks down, IMHO. Virtual space is completely fungible, and we aren't ready to give that up (even assuming it were a good idea): almost everything stretches, shrinks, mutates, appears and disappears. I know part of their objective (which I applaud) is move away from this kind of paradigm (or lack of one). But in practice, you have to stop at some point and say "close enough." They say elsewhere, for example, that it's better for transitions to be fast than smooth. It's in that little interval that you can sweep the impedance mismatch (between the designer's model and the user model) under the rug. Anyway, I'm glad that we're talking about the rational basis for one design or another, rather than treating it as an impenetrable art.

deleted 12y ago

[deleted]

gjvc 12y ago

Add a data grid which isn't a complete pain in the ass, and people will bite their hands off. Much of the the user end of "Enterprise IT" is glorified form fill-in, and the web does it really terribly. It's been about 20 years -- why are the simple things still disproportionately difficult to do well on the web? Like, you know, tabulate, sort, and filter data? On a positive note, the documents at http://www.google.com/design/spec/material-design/introduction.html http://www.google.com/design/spec/material-design/introducti..., show how much consideration is required to just do the basics well, for example buttons http://www.google.com/design/spec/components/buttons.html http://www.google.com/design/spec/components/buttons.html It's not that the good stuff on the web is so bad, it's that the lowest common denominator is just far too low.

wmeredith 12y ago

Oh lord, I hope they don't succeed. Google seems more intersted in their products looking "cool" than being easy to use. Search is awful compared to 5 years ago. Gmail is worse. Google documents has turned into a real mess. Google Analytics has one of the most impenetrable dashboards I've come across. Exacerbating all of this is the fact that they won't stop redesigning their shit. Their interfaces change monthly. Now, I'm not a user who demands nothing ever change, but I can't even learn any of this stuff before it's "new and improved". Blegh.

debaserab2 12y ago
I can understand the negative impression of the recent GA, drive, and Gmail - but how exactly is search awful compared to five years ago? Unless you're referring to the algorithm changes, I don't see the argument that the interface itself is harder to use now than five years ago.
- wmeredith 12y ago
  Seriously? Google's SERP pages are now 75% ads above the fold. Hell, on a netbook you may not even see ANY organic search results. A couple quick examples: Google "work at home" (no quotes) and you'll see eight sponsored results and three organic results. Google "credit card" (no quotes) and you'll see NINE sponsored results and TWO organic results. This is on a Macbook Pro 15" running Chrome. it's also worth noting that Google's current gen algo with hit you with a penalty if you "run too many adds above the fold". They also have carousels, maps and product photos. Google has fully become the search engines they used to despise. It's basically a paid directory. I'm a power user so I scroll down, but the first content listing will see 33% of the clicks on the page. 40% of Google users don't know the ads are even ads. Further reading... https://econsultancy.com/blog/62249-40-of-consumers-are-unaware-that-google-adwords-are-adverts https://econsultancy.com/blog/62249-40-of-consumers-are-unaw... http://www.anticareer.com/google-tells-you-to-do-one-thing-but-it-is-ok-if-they-do-the-opposite/ http://www.anticareer.com/google-tells-you-to-do-one-thing-b... http://www.affhelper.com/googles-hypocrisy-exposed/ http://www.affhelper.com/googles-hypocrisy-exposed/ http://www.branded3.com/blogs/will-google-penalise-itself-for-excessive-ads-above-the-fold/ http://www.branded3.com/blogs/will-google-penalise-itself-fo...

Animats 12y ago

"What’s a key attribute of a good UI? It disappears. It does not draw attention to itself. It enables the user experience, but is not itself the experience." -- Kathy Sierra, Serious Pony That's the problem. The functional purpose of the UI is to get you to the content or let you do something, then get out of the way. The business purpose of the UI, though, is to get customers to buy the thing. "Sell the sizzle, not the steak". That's the driving force behind this endless tweaking of graphic elements. Here's another kind of UI - automobile dashboards. http://www.darkroastedblend.com/2012/05/car-dashboards-as-works-of-art.html http://www.darkroastedblend.com/2012/05/car-dashboards-as-wo... This is worth careful study. Match up the dashboards with various computer UIs.