7 ms·

Am I the only one who gets a headache trying to decipher tile layouts like this? My eyes bounce back and forth and I still have no idea how the information is

Am I the only one who gets a headache trying to decipher tile layouts like this? My eyes bounce back and forth and I still have no idea how the information is structured or what's important. I appreciate that Google is sharing all of this though.

joezydeco 11y ago
It's gonna get worse before it gets better.... http://beta.united.com/ http://beta.united.com/ It it a button? Or a dialog box? Maybe it's an ad. Flip a coin!
- troycarlson 11y ago
  Exactly...I don't understand it :( The new Azure portal looks very similar and it's borderline unusable. Unless I'm just resistant to change and will eventually warm up to it but it seems to violate a lot of fundamental design principles.
  - blockross 11y ago
    Kinda of topic but from the PoV of a third-party developper who had to test a lot of workflows in this new Azure portal: it's indeed a nightmare. Why do I have to click so many times and watch so many panel opening/closing animations before getting to basic features? Also closing 5 panels before opening a new one feels like a huge waste of time.
  - MCRed 11y ago
    I can assure you, it's not just you. To me, this is more of an artistic style than a design. A designer needs to communicate usability to the user. You need to know what's a button and what's not. You need to know the borders. And you need to be able to look at the interface without it causing undue strain (this is the part that google got wrong- bright colors are an easy way to make something look fresh but they increase eye strain.) The impact isn't so bad, though because once you get past this style into an app you're looking at a mostly white screen with color for the buttons and the buttons are well placed in standard places most of the time so you can know they are buttons.
  - oldpond 11y ago
    Exactly. This style just screams Windows 8 MS Surface design, and it's popping up all over. I think designers are having trouble blending "touchable" with "informative". The emphasis seems to be on touchable from the ground up now.
- nandhp 11y ago
  I actually like that homepage. It seems like a nice alternative to tabs, especially if they put useful information in the collapsed tiles (essentially becoming Windows Live Tiles or whatever they're called).
  - leeleelee 11y ago
    It might look kind of cool at first, but it puts additional barriers in between the user and actually doing something useful like entering data in a form, booking a flight, etc. For example, if I haven't been to the site before, I might have to explore the interface a bit before I get to the part of the interface I want. Clicking on those tiles makes things shift and bounce around, the content portion of the screen constantly moves left to right. Way too much difficulty for doing something so simple. Designs should be visually appeasing, but not at the expense of ease of use or ease of understanding.
- Alex3917 11y ago
  That's inspired by Windows Metro, not Material Design. In fact Material Design was created partly as a reaction against that style of design.
- Jare 11y ago
  That site is very clean, readable, understandable and (it seems) perfectly usable.
  - fsck--off 11y ago
    The contrast of the blue text(62a9e3) in the dropdown menu against the pure white background fails all WCAG guidelines. So it is not perfectly usable.
    - DanBC 11y ago
      Do you have a link to that guideline? I know there are a bunch about allowing users to override whatever the webdesigner specifies, and about having sensible contrast.
      - jfuhrman 11y ago
        WCAG 2.0 level AA requires a contrast ratio of 4.5:1 for normal text (14 point and bold or larger) and 3:1 for large text (18 point or larger). Level AAA requires a contrast ratio of 7:1 for normal text and 4.5:1 for large text. http://www.w3.org/TR/WCAG20/ http://www.w3.org/TR/WCAG20/ http://webaim.org/resources/contrastchecker/ http://webaim.org/resources/contrastchecker/
  - joezydeco 11y ago
    It's better than the current setup. But there are still some oddball things in there. For example: why is that credit card ad hanging off the center tile like that? Why isn't it shaped like the other tiles?
- TYPE_FASTER 11y ago
  Woah, it's like a mashup of the old site and Windows 8 live tiles...
- anigbrowl 11y ago
  So true. People seem to forget that the reason we went with fake 3d UI in the first place was because people were having trouble with the previously-obtaining flat design. For a while, there was a nice simple visual grammar that told you what was editable, what was functional, and what was structural. Now I feel like we're falling back in the days of early Sierra videogames where some puzzles just required you to keep clicking around the screen until you found the invisible path. Skeumorphism was out of control but the trend has gone too far in the opposite direction, to the point where 'beautiful' has been turned into an empty marketing buzzword - it's now a synonym for obscurantists minimalism.
- calsy 11y ago
  This is not material design. Also material design is not a safe guard for implementing crap user interfaces. In this case, if you decide to have moving tiles that disorientate the user and think 'well its material design', no that's actually just poor design.
- pbowyer 11y ago
  There is something about the search form I can't put my finger on - not enough contrast or dimensionality? Anyway, it didn't jump out as a "put your details here and press search" action, and my eyes kinda glossed over it while looking over the page.
jfuhrman 11y ago
Well at least it loaded for me in Opera, unlike the Google I/O site which reminded me of the dark days of the single browser web.
- FreakyT 11y ago
  Opera basically is dead though, so I don't think one can reasonably expect new websites to test for it. Now, if it didn't work in Firefox or IE11, then that would be significantly more questionable. Edit: I'm assuming we're talking about classic Opera, not the Chromium build that is currently called Opera but is actually Chromium.
  - jfuhrman 11y ago
    That's exactly what people said with their "Designed for IE" websites back during 2000 to 2004. Whatever happened to coding according to web standards? This isn't a small boutique shop that cannot afford testing, this is a huge multinational company.
    - FreakyT 11y ago
      > That's exactly what people said with their "Designed for IE" websites back during 2000 to 2004. Hardly. Mozilla/Gecko may have been obscure at the time, but it was under active development. Opera is very definitely dead. > Whatever happened to coding according to web standards? So by "web standards" do you mean "older web standards supported by an outdated browser"?
      - jfuhrman 11y ago
        >Hardly. Mozilla/Gecko may have been obscure at the time, but it was under active development. O Firefox had about 3% share at the end of 2004, even less before that. >Opera is very definitely dead Huh what? Opera is still under active development. http://blogs.opera.com/desktop/ http://blogs.opera.com/desktop/ >So by "web standards" do you mean "older web standards supported by an outdated browser"? No, I mean current web standards.
morb 11y ago
Back button doesn't work right on that site. It gets you back to the top of previous page, it doesn't take you down where you were on the page. I love modern web UX. (Firefox & Chromium. )
- tomphoolery 11y ago
  Modern Web UX: "Because hey, who really cares about disabled people?"
  - deleted 11y ago
    [deleted]
  - Artemis2 11y ago
    That's more the guy who implemented the website that gave up on UX. Not a very good testimony to their "design language".
- Haghn 11y ago
  Middle clicks on links are also pretty broken. Sometimes they do open the link in a new tab, something they open the link in the same tab, sometimes they do nothing. As someone who use mainly workstations with a at-least-three-buttons mouse, I feel web browsing is getting increasingly annoying.
  - leppr 11y ago
    Agreed, I'm not sure why Google is assuming everyone browsing their site will do so on mobile devices. Overriding the right/middle-click is hardly ever good UX design, and I'm wondering how they even managed to make it so inconsistent across tiles.
kzhahou 11y ago
Extensive user testing has shown that the "headache" you're experiencing is actually from a rush of incredible clarity and intuitiveness with this new design! :-P
zxcvcxz 11y ago
Ehh.. It's like reading a comic book. Wasn't too hard for me to figure out. I'm not a fan of Material design though, I just think it's tacky.
- spankalee 11y ago
  Do you mean Material Design is tacky? Polymer is just a library to help you make Web Components. They don't have to be Material Design.
  - zxcvcxz 11y ago
    Yeah that's what I meant. I fixed the original comment.
legohead 11y ago
I've had Androids since way back, and while the UI has continuously gotten prettier, it has gotten harder and harder to use. I can 'feel' these new concepts as they roll them out, and then just get frustrated by them. It feels like they come up with certain standards/rules, and then have to adapt their UIs to it. So buttons are put in confusing places, with weird icons. Take the phone dialer for instance. I press the phone icon. How do I get to a dial pad? Why didn't it just give me a damn dialpad to begin with? The dialpad button is a little blue square with dots in some kind of matrix that sort of looks like a dialpad. Every time - every time - I make a call, I have to go through this ritual again of figuring out where the dialpad is. Even though I know where it is, it doesn't look or feel right. And that's just the beginning. The whole dialing process, finding contacts, etc. has been totally broken. Just so the UI is pretty and meshes well with itself. And this is a phone!
- chrismarlow9 11y ago
  Haha. I remember that. The hardest feature for me to figure out after getting my phone was how to actually call somebody. Also after installing skype I started getting popups when I would call about "Do you want to use your phone or skype to call?". Why do I have to click so much to make a call I kept asking myself? Then I figured out the double tap on the home key and "Hi Galaxy" and my life changed forever. I use it waaaayyy more than I've seen anyone I know using Siri. The only annoying thing now is when I disable gps and then try to use maps from voice while driving things get wonky because I'm driving, trying to enable GPS, and trying to deal with maps popups telling me gps isn't on and whatnot. I just forget to re-enable it before I drive somewhere so it happens quite a bit. I also actually sat down and read the manual for the phone and looked up tips and tricks online. Really studied it as opposed to just expecting to "get it out of the box". I know the whole "It just works" mantra is great, but if you're willing to spend a little time reading and researching you can have a great mobile experience instead of just blindly ignoring things that don't appear to immediately work/make sense. In a nutshell, they really are little computers now, and putting in the time to learn it well will open up doors for you.
- JoshTriplett 11y ago
  On the other hand, a dialpad takes up a lot of room, and for many cell users, the common case is calling a contact, not dialing a number. The only time I ever use the dialpad is for "press N to Do a Thing" interfaces, such as my voicemail (which automatically opens the dialpad for exactly that reason) or my employer's conference-call system.
techpeace 11y ago
As do I, but I don't appreciate that I can't select any of the text on that page.
spotman 11y ago
No, this website, combined with the fonts, makes it look very out of place, and just awkward.
dominotw 11y ago
Only thing worse than material design is web animations. I am not sure if its a side effect of designers getting carried away but I find most of the web animations useless.
pimlottc 11y ago
It also loads each tile on demand; if you're scrolling quickly, all you see is a bunch of empty colored boxes with titles.
paganel 11y ago
I have an older version of FF and I only got to see a (britghish) blue screen, with nothing on it. I guess that's what they call minimal design nowadays.
capex 11y ago
Its probably designed for a phone/tablet audience, and that's where material design shines. Porting it to the desktop web doesn't produce the same results because you're not 'touching' the screen.
Malcx 11y ago
It's not just the layout, the terminology is based on presumed knowledge. The second panel of information is a video covering "color theory" and goes off almost straight away talking about using "the 500s" and moving to "the 700s". I've no clue what this means. What is a 700? Strangely a google search yields no results as to what this means, but the video takes it as fact I should know what it's on about.
- Animats 11y ago
  They're referring to Pantone series 500 and 700 colors.[1] Obviously, you're expected to understand the Pantone Color System. There's a whole color industry, and a trade organization for it, the Color Association of the United States. They're not as influential as they used to be, but they still orchestrate, among other things, the cycle of consumer electronics from white to black to off-white to grey and back to white again. (You thought that just happened by accident?) The Material Design people are trying to promote that concept for web sites, so last year's web sites will look dated as the recommended colors change. [1] http://www.pantone.com/pages/pantone/color_xref.aspx http://www.pantone.com/pages/pantone/color_xref.aspx [2] http://www.colorassociation.com http://www.colorassociation.com
- clay_to_n 11y ago
  I think they expect you to be familiar with the Material Design spec and the Colors page: http://www.google.com/design/spec/style/color.html http://www.google.com/design/spec/style/color.html
homulilly 11y ago
Not to mention all the wasted space. A menu with 16 items shouldn't take up 7 pages, it's like they're trying to give me RSI.

joezydeco 11y ago

It's gonna get worse before it gets better.... http://beta.united.com/ http://beta.united.com/ It it a button? Or a dialog box? Maybe it's an ad. Flip a coin!

troycarlson 11y ago
Exactly...I don't understand it :( The new Azure portal looks very similar and it's borderline unusable. Unless I'm just resistant to change and will eventually warm up to it but it seems to violate a lot of fundamental design principles.
- blockross 11y ago
  Kinda of topic but from the PoV of a third-party developper who had to test a lot of workflows in this new Azure portal: it's indeed a nightmare. Why do I have to click so many times and watch so many panel opening/closing animations before getting to basic features? Also closing 5 panels before opening a new one feels like a huge waste of time.
- MCRed 11y ago
  I can assure you, it's not just you. To me, this is more of an artistic style than a design. A designer needs to communicate usability to the user. You need to know what's a button and what's not. You need to know the borders. And you need to be able to look at the interface without it causing undue strain (this is the part that google got wrong- bright colors are an easy way to make something look fresh but they increase eye strain.) The impact isn't so bad, though because once you get past this style into an app you're looking at a mostly white screen with color for the buttons and the buttons are well placed in standard places most of the time so you can know they are buttons.
- oldpond 11y ago
  Exactly. This style just screams Windows 8 MS Surface design, and it's popping up all over. I think designers are having trouble blending "touchable" with "informative". The emphasis seems to be on touchable from the ground up now.
nandhp 11y ago
I actually like that homepage. It seems like a nice alternative to tabs, especially if they put useful information in the collapsed tiles (essentially becoming Windows Live Tiles or whatever they're called).
- leeleelee 11y ago
  It might look kind of cool at first, but it puts additional barriers in between the user and actually doing something useful like entering data in a form, booking a flight, etc. For example, if I haven't been to the site before, I might have to explore the interface a bit before I get to the part of the interface I want. Clicking on those tiles makes things shift and bounce around, the content portion of the screen constantly moves left to right. Way too much difficulty for doing something so simple. Designs should be visually appeasing, but not at the expense of ease of use or ease of understanding.
Alex3917 11y ago
That's inspired by Windows Metro, not Material Design. In fact Material Design was created partly as a reaction against that style of design.
Jare 11y ago
That site is very clean, readable, understandable and (it seems) perfectly usable.
- fsck--off 11y ago
  The contrast of the blue text(62a9e3) in the dropdown menu against the pure white background fails all WCAG guidelines. So it is not perfectly usable.
  - DanBC 11y ago
    Do you have a link to that guideline? I know there are a bunch about allowing users to override whatever the webdesigner specifies, and about having sensible contrast.
    - jfuhrman 11y ago
      WCAG 2.0 level AA requires a contrast ratio of 4.5:1 for normal text (14 point and bold or larger) and 3:1 for large text (18 point or larger). Level AAA requires a contrast ratio of 7:1 for normal text and 4.5:1 for large text. http://www.w3.org/TR/WCAG20/ http://www.w3.org/TR/WCAG20/ http://webaim.org/resources/contrastchecker/ http://webaim.org/resources/contrastchecker/
- joezydeco 11y ago
  It's better than the current setup. But there are still some oddball things in there. For example: why is that credit card ad hanging off the center tile like that? Why isn't it shaped like the other tiles?
TYPE_FASTER 11y ago
Woah, it's like a mashup of the old site and Windows 8 live tiles...
anigbrowl 11y ago
So true. People seem to forget that the reason we went with fake 3d UI in the first place was because people were having trouble with the previously-obtaining flat design. For a while, there was a nice simple visual grammar that told you what was editable, what was functional, and what was structural. Now I feel like we're falling back in the days of early Sierra videogames where some puzzles just required you to keep clicking around the screen until you found the invisible path. Skeumorphism was out of control but the trend has gone too far in the opposite direction, to the point where 'beautiful' has been turned into an empty marketing buzzword - it's now a synonym for obscurantists minimalism.
calsy 11y ago
This is not material design. Also material design is not a safe guard for implementing crap user interfaces. In this case, if you decide to have moving tiles that disorientate the user and think 'well its material design', no that's actually just poor design.
pbowyer 11y ago
There is something about the search form I can't put my finger on - not enough contrast or dimensionality? Anyway, it didn't jump out as a "put your details here and press search" action, and my eyes kinda glossed over it while looking over the page.

jfuhrman 11y ago

Well at least it loaded for me in Opera, unlike the Google I/O site which reminded me of the dark days of the single browser web.

FreakyT 11y ago
Opera basically is dead though, so I don't think one can reasonably expect new websites to test for it. Now, if it didn't work in Firefox or IE11, then that would be significantly more questionable. Edit: I'm assuming we're talking about classic Opera, not the Chromium build that is currently called Opera but is actually Chromium.
- jfuhrman 11y ago
  That's exactly what people said with their "Designed for IE" websites back during 2000 to 2004. Whatever happened to coding according to web standards? This isn't a small boutique shop that cannot afford testing, this is a huge multinational company.
  - FreakyT 11y ago
    > That's exactly what people said with their "Designed for IE" websites back during 2000 to 2004. Hardly. Mozilla/Gecko may have been obscure at the time, but it was under active development. Opera is very definitely dead. > Whatever happened to coding according to web standards? So by "web standards" do you mean "older web standards supported by an outdated browser"?
    - jfuhrman 11y ago
      >Hardly. Mozilla/Gecko may have been obscure at the time, but it was under active development. O Firefox had about 3% share at the end of 2004, even less before that. >Opera is very definitely dead Huh what? Opera is still under active development. http://blogs.opera.com/desktop/ http://blogs.opera.com/desktop/ >So by "web standards" do you mean "older web standards supported by an outdated browser"? No, I mean current web standards.

morb 11y ago

Back button doesn't work right on that site. It gets you back to the top of previous page, it doesn't take you down where you were on the page. I love modern web UX. (Firefox & Chromium. )

tomphoolery 11y ago
Modern Web UX: "Because hey, who really cares about disabled people?"
- deleted 11y ago
  [deleted]
- Artemis2 11y ago
  That's more the guy who implemented the website that gave up on UX. Not a very good testimony to their "design language".
Haghn 11y ago
Middle clicks on links are also pretty broken. Sometimes they do open the link in a new tab, something they open the link in the same tab, sometimes they do nothing. As someone who use mainly workstations with a at-least-three-buttons mouse, I feel web browsing is getting increasingly annoying.
- leppr 11y ago
  Agreed, I'm not sure why Google is assuming everyone browsing their site will do so on mobile devices. Overriding the right/middle-click is hardly ever good UX design, and I'm wondering how they even managed to make it so inconsistent across tiles.

kzhahou 11y ago

Extensive user testing has shown that the "headache" you're experiencing is actually from a rush of incredible clarity and intuitiveness with this new design! :-P

zxcvcxz 11y ago

Ehh.. It's like reading a comic book. Wasn't too hard for me to figure out. I'm not a fan of Material design though, I just think it's tacky.

spankalee 11y ago
Do you mean Material Design is tacky? Polymer is just a library to help you make Web Components. They don't have to be Material Design.
- zxcvcxz 11y ago
  Yeah that's what I meant. I fixed the original comment.

legohead 11y ago

I've had Androids since way back, and while the UI has continuously gotten prettier, it has gotten harder and harder to use. I can 'feel' these new concepts as they roll them out, and then just get frustrated by them. It feels like they come up with certain standards/rules, and then have to adapt their UIs to it. So buttons are put in confusing places, with weird icons. Take the phone dialer for instance. I press the phone icon. How do I get to a dial pad? Why didn't it just give me a damn dialpad to begin with? The dialpad button is a little blue square with dots in some kind of matrix that sort of looks like a dialpad. Every time - every time - I make a call, I have to go through this ritual again of figuring out where the dialpad is. Even though I know where it is, it doesn't look or feel right. And that's just the beginning. The whole dialing process, finding contacts, etc. has been totally broken. Just so the UI is pretty and meshes well with itself. And this is a phone!

chrismarlow9 11y ago
Haha. I remember that. The hardest feature for me to figure out after getting my phone was how to actually call somebody. Also after installing skype I started getting popups when I would call about "Do you want to use your phone or skype to call?". Why do I have to click so much to make a call I kept asking myself? Then I figured out the double tap on the home key and "Hi Galaxy" and my life changed forever. I use it waaaayyy more than I've seen anyone I know using Siri. The only annoying thing now is when I disable gps and then try to use maps from voice while driving things get wonky because I'm driving, trying to enable GPS, and trying to deal with maps popups telling me gps isn't on and whatnot. I just forget to re-enable it before I drive somewhere so it happens quite a bit. I also actually sat down and read the manual for the phone and looked up tips and tricks online. Really studied it as opposed to just expecting to "get it out of the box". I know the whole "It just works" mantra is great, but if you're willing to spend a little time reading and researching you can have a great mobile experience instead of just blindly ignoring things that don't appear to immediately work/make sense. In a nutshell, they really are little computers now, and putting in the time to learn it well will open up doors for you.
JoshTriplett 11y ago
On the other hand, a dialpad takes up a lot of room, and for many cell users, the common case is calling a contact, not dialing a number. The only time I ever use the dialpad is for "press N to Do a Thing" interfaces, such as my voicemail (which automatically opens the dialpad for exactly that reason) or my employer's conference-call system.

techpeace 11y ago

As do I, but I don't appreciate that I can't select any of the text on that page.

spotman 11y ago

No, this website, combined with the fonts, makes it look very out of place, and just awkward.

dominotw 11y ago

Only thing worse than material design is web animations. I am not sure if its a side effect of designers getting carried away but I find most of the web animations useless.

pimlottc 11y ago

It also loads each tile on demand; if you're scrolling quickly, all you see is a bunch of empty colored boxes with titles.

paganel 11y ago

I have an older version of FF and I only got to see a (britghish) blue screen, with nothing on it. I guess that's what they call minimal design nowadays.

capex 11y ago

Its probably designed for a phone/tablet audience, and that's where material design shines. Porting it to the desktop web doesn't produce the same results because you're not 'touching' the screen.

Malcx 11y ago

It's not just the layout, the terminology is based on presumed knowledge. The second panel of information is a video covering "color theory" and goes off almost straight away talking about using "the 500s" and moving to "the 700s". I've no clue what this means. What is a 700? Strangely a google search yields no results as to what this means, but the video takes it as fact I should know what it's on about.

Animats 11y ago
They're referring to Pantone series 500 and 700 colors.[1] Obviously, you're expected to understand the Pantone Color System. There's a whole color industry, and a trade organization for it, the Color Association of the United States. They're not as influential as they used to be, but they still orchestrate, among other things, the cycle of consumer electronics from white to black to off-white to grey and back to white again. (You thought that just happened by accident?) The Material Design people are trying to promote that concept for web sites, so last year's web sites will look dated as the recommended colors change. [1] http://www.pantone.com/pages/pantone/color_xref.aspx http://www.pantone.com/pages/pantone/color_xref.aspx [2] http://www.colorassociation.com http://www.colorassociation.com
clay_to_n 11y ago
I think they expect you to be familiar with the Material Design spec and the Colors page: http://www.google.com/design/spec/style/color.html http://www.google.com/design/spec/style/color.html

homulilly 11y ago

Not to mention all the wasted space. A menu with 16 items shouldn't take up 7 pages, it's like they're trying to give me RSI.