Scolling is smooth in IE on a Surface Pro 3, but not in Firefox. That's pretty typical.
What's unusual is that it's visibly janky in Firefox on this desktop with an i7 and a Quadro FX 580. Sure, it's not a brand new workstation, but it should be able to scroll a webpage...
Unfortunately, since the w3c standards don't include any constraints for performance, it's entirely possible Google's code is optimized for Chrome and iOS and not (yet?) Firefox.
You sound just like all of my feature-creepy enterprise customers. Yeah dude, looks nice, but it's not snappy. Make it so it's snappy. Or no money for you.
It's more that if you have a site that's designed to showcase how good your company is at designing websites, and the site doesn't run well on a high end laptop, then it doesn't say much for your design, as it suggests you emphasise form over functionality.
Yes! Of course that's your point and I agree because the whole idea of this design concept was for Google to show us how much they care about usability and they somewhat failed at that if you had that experience. It was more of a joke from a grumpy old man who had flashbacks from scary moments where deals where made with much money involved and where the specifications changed daily.
EDIT: Ahh, you're talking about the transition from the homepage to the video page. I spent most of my time watching on the individual video pages, so I didn't really notice this interaction TBH.
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.
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.
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.
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.
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.
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).
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.
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.
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.
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.
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.
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.
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.
Yes, but that is based on Chromium, so it really isn't Opera. I assumed you meant "classic" Opera, since I would assume that the Chromium-based product would render sites equivalently to Chromium.
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.
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.
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.
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
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!
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.
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.
gosh, i could go on and on about the phone dialer.
What is the most frustrating thing about it is the "hang-up" button is a gigantic red button and right below it are the really minute buttons to fire up the dialpad, mute, conference, contacts, etc. Yep, what are the chances you will accidentally hang up while trying to find the dialpad or quickly mute your conversation.
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.
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.
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.
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.
Your opinion is a data point, I'm not arguing against you below, because that would be futile- your opinion is a fact of how things are from your perspective.
Amazing to have gone from the one and only minimalist design company, standing out dramatically as a result to "pretty generic" in the perception of someone I'm guessing is under 30?
The interesting thing is, nobody, nowhere seems to be doing things as purely as Apple in terms of design, including their website...yet from your perspective you it seems generic, which means you feel like you see it everywhere.
Don't be so hard on them, they've done a fantastic job. Material design is a purely graphic framework, not a way to decide which feature is going where (which googles still desesperately sucks at).
The guys that created material design should be put in charge much more, because they're obviously the only one that have a true vision for that company. To me, that reflection should have been made on the very first iteration of android. Much like microsoft went with tiles, and ios initialy went with skueumorphics ui.
Exactly! And, as such, they should advertise it as it is. Merely graphical stuff, not an UI revolution, not better usability nor UX (where are the tests saying so?). I wish they just admit that they're trying to make something which looks cool (nothing wrong with that), not necessarily better UX-wise.
But ultimately the pixels are colored, are they not? To me this reads as a way to acceptably talk about degrading designers...
"Well we aren't employing those pesky 'Pixel Pushers' anymore. No. We are moving towards a jazz inspired design, it's more important and sophisticated than just coloring pixels"
Please. Give it a rest.
(^ In case it needs to be pointed out that's not an actual quote from anything anyone said.)
There's no better case for Google putting zero thought into design than this new website.
Hover the search icon and you have the grid you wish.
I would also do the same thing, isn't because a thing is hidden or need a gesture/action (in this case, the hover status), that the thing doesn't need to be in the grid.
That's not a very graceful way of handling that though. I'm not saying it's not ok to break the grid, but at least make it logical. The element isn't even visible without interaction.
Our design team is trying to use Material guidelines in an upcoming app. I needed to remind them that while there are good elements in the guidelines, there is a lot that isn't good and they need to leave those parts behind. This certainly reinforces that feeling for me.
lol, downvoted for expressing anti-Material sentiment.
Google design guidelines as put in place by Google are hit-or-miss. Just look at switching between accounts on say, Google Analytics. Multiple view refreshes and double the user actions to do what once could be done from the same view with a click to logout and a click to login followed by typing your credentials.
Did Google fire their UI and UX team? Wow. Is this Web 3.0 - the final chukkah for full-on awful craptastic interfaces that finally drive us back to lean text sites?
Isn't 'Google Design' a bit of an oxymoron to begin with?
I mean isn't their entire hiring process designed to weed out people whose strength is design, to the point where now when they need to compete on design they go out and spend $20 million to acquihire a team ala Sparrow or get a big name like Duarte.
People laughed at Marissa choosing fonts at Yahoo but forget that she was the only person holding down the design fort at Google and was undervalued and passed over.
The most iconic feature of "material design" to me is the "create" button in the lower right-hand corner. Except if you're in landscape in, say, Gmail, it's in the center bottom since it's a part of the message list.
Can someone explain why a create button is given this privileged and inconsistent position instead of being in a menubar like every other button in every app ever?
The Floating Action Button or FAB is supposed to be more than just a single action, usually it's a menu of the most used actions (in Google Inbox for example it allows you to compose an email, invite others, add a reminder and lists your most recent contacts.)
Its probably in the same group because A) they want people to invite others and keeping it there helps people remember they can and B) its pretty much the same class of action as sending an email.
the yellow button at the very bottom is invite. Its hardly obnoxious, I can just continue to click and I don't have to think about it at all most of the time. (the top three are my three most frequent contacts)
I'm also wondering the same thing. This new trend of putting a create button in the bottom right of the screen seems counter intuitive and annoying. Fortunately, both the Mint and Reddit apps allow it to be turned off, but I'm not looking forward to seeing this spread to other applications.
This thing is infuriating, I never remember how to create a new file in Google Drive now (it's the bottom right FAB located at a place yet unexplored in every desktop UI ever).
as you can see, "new" is in the same place its always been. No FAB.
EDIT: in retrospect, you might be talking about the docs site. (docs.google.com rather then drive.google.com) I spose the only thing I have to say about that is that no design guidelines are a magic bullet, and that I have no idea why they even have that separate docs site.
I always go into a previously created sheet or document and press create new. I really could not find it until I complained to a colleague and he told me
I preferred the iOS1-6 Design and the Win95-Win7 Design. Though Material Design as in Android 5 is very nice. One cannot compare it to Metro of Win8 with its distasteful colors.
It can be learned, by the same techniques you use to learn system internals: You can first do a quick scout for the big items (e.g. grid systems, typography instead of data structures, algorithms) so that you get the big picture, and then study designs that you like for the details of how they used these items together (like how you study frameworks, libraries or OSs)
I appreciate material's approach to replicating real world physics look. I'm curious though what other designs could be very productive even if they aren't intuitive out of the box and require some training to use them. Interfaces like the command line, APIs, text and even human languages require significant time to learn but they are worth the effort as they allow us to express an incredible range of concepts succinctly.
Idk but I'm not the biggest an of the implementation of Material Design. I like the principles but some of the elements are just really ugly–i.e. the huge heroes.
For strange reasons I am getting the same vibe I got when I was viewing Google's Wave promotion, as if Google had uncovered the best thing ever. Everyone at Google seems super excited about their new things. I suppose when they're in their own little silo universe everything seems exciting and right.
Again I am only speaking about the feeling I got after watching the promotion video.
You are totally right. I would just add that the meme "designers are rockstars and vital to the information age" doesn't originate from Google. It originated from designers themselves. The designers have now fully infected Google... None of these problems are new. People have now contemplated them for an entire generation in science fiction books and movies, video game interfaces, CAD interfaces, music instrument interfaces, art, Xerox, Media Lab, etc.
Really though, animated interfaces are a short-term fad which is subject to boom and bust cycles just like 90s icons graduated to high-res icons and then back to microsoft tile icons. When peoples' hardware can no longer handle the animations and they learn to associate animation with skipped frames, impeded workflow, etc., the cycle will revert itself.
Visual feedback from user actions is a good idea, provided that 1) it happens every time, and 2) it happens right now every time, even if it takes time for the action to complete. Not seeing that mandated.
192 comments
[ 3.5 ms ] story [ 242 ms ] threadA good test of an organization or person isnt how they are, but how they adapt. And the signs are promising here.
What's unusual is that it's visibly janky in Firefox on this desktop with an i7 and a Quadro FX 580. Sure, it's not a brand new workstation, but it should be able to scroll a webpage...
Not that I'm too excited to hear Google --Google-- go all Jonathan Ive and wistfully pontificate about design though...
Sure looks like it was improvised and not thoughtfully designed.
And I love that it's 100% free for any use.
EDIT: Ahh, you're talking about the transition from the homepage to the video page. I spent most of my time watching on the individual video pages, so I didn't really notice this interaction TBH.
I appreciate that Google is sharing all of this though.
http://beta.united.com/
It it a button? Or a dialog box? Maybe it's an ad. Flip a coin!
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.
Also closing 5 panels before opening a new one feels like a huge waste of time.
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.
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.
http://www.w3.org/TR/WCAG20/
http://webaim.org/resources/contrastchecker/
For example: why is that credit card ad hanging off the center tile like that? Why isn't it shaped like the other tiles?
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.
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.
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.
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"?
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/
>So by "web standards" do you mean "older web standards supported by an outdated browser"?
No, I mean current web standards.
And this website reliably crashes Google's own Chrome[1] on iOS on an iPhone 4s. It's fucking stupid that we've gone so far backwards with web design.
(Firefox & Chromium. )
As someone who use mainly workstations with a at-least-three-buttons mouse, I feel web browsing is getting increasingly annoying.
I'm not a fan of Material design though, I just think it's tacky.
Polymer is just a library to help you make Web Components. They don't have to be Material Design.
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!
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.
What is the most frustrating thing about it is the "hang-up" button is a gigantic red button and right below it are the really minute buttons to fire up the dialpad, mute, conference, contacts, etc. Yep, what are the chances you will accidentally hang up while trying to find the dialpad or quickly mute your conversation.
that in a nutshell, is how I feel about Microsoft Office.
I am not sure if its a side effect of designers getting carried away but I find most of the web animations useless.
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.
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 [2] http://www.colorassociation.com
Amazing to have gone from the one and only minimalist design company, standing out dramatically as a result to "pretty generic" in the perception of someone I'm guessing is under 30?
The interesting thing is, nobody, nowhere seems to be doing things as purely as Apple in terms of design, including their website...yet from your perspective you it seems generic, which means you feel like you see it everywhere.
The guys that created material design should be put in charge much more, because they're obviously the only one that have a true vision for that company. To me, that reflection should have been made on the very first iteration of android. Much like microsoft went with tiles, and ios initialy went with skueumorphics ui.
Exactly! And, as such, they should advertise it as it is. Merely graphical stuff, not an UI revolution, not better usability nor UX (where are the tests saying so?). I wish they just admit that they're trying to make something which looks cool (nothing wrong with that), not necessarily better UX-wise.
Super interesting concept. The abstraction of design.
"Well we aren't employing those pesky 'Pixel Pushers' anymore. No. We are moving towards a jazz inspired design, it's more important and sophisticated than just coloring pixels"
Please. Give it a rest.
(^ In case it needs to be pointed out that's not an actual quote from anything anyone said.)
There's no better case for Google putting zero thought into design than this new website.
I mean what is this? http://i.imgur.com/dGCCLzx.png (my attempt at balancing the grid on the bottom.)
I would also do the same thing, isn't because a thing is hidden or need a gesture/action (in this case, the hover status), that the thing doesn't need to be in the grid.
The changelog.... found it
Google design guidelines as put in place by Google are hit-or-miss. Just look at switching between accounts on say, Google Analytics. Multiple view refreshes and double the user actions to do what once could be done from the same view with a click to logout and a click to login followed by typing your credentials.
I mean isn't their entire hiring process designed to weed out people whose strength is design, to the point where now when they need to compete on design they go out and spend $20 million to acquihire a team ala Sparrow or get a big name like Duarte.
People laughed at Marissa choosing fonts at Yahoo but forget that she was the only person holding down the design fort at Google and was undervalued and passed over.
Can someone explain why a create button is given this privileged and inconsistent position instead of being in a menubar like every other button in every app ever?
here's a gif of me mousing over the FAB in my inbox: http://imgur.com/LuEZ57c
the yellow button at the very bottom is invite. Its hardly obnoxious, I can just continue to click and I don't have to think about it at all most of the time. (the top three are my three most frequent contacts)
Though I agree the whole thing is inconsistent.
as you can see, "new" is in the same place its always been. No FAB.
EDIT: in retrospect, you might be talking about the docs site. (docs.google.com rather then drive.google.com) I spose the only thing I have to say about that is that no design guidelines are a magic bullet, and that I have no idea why they even have that separate docs site.
That's the one! Google's products are so confusing sometimes.
Put the tool up in the toolbar and stop blocking my content. The cynic in me assumes it's there because they like circles.
But my design sense is awful. My sites never look as polished as I'd like them to. How can I get a design sense?
(spoiler: page renders really poorly in chrome)
Again I am only speaking about the feeling I got after watching the promotion video.
Really though, animated interfaces are a short-term fad which is subject to boom and bust cycles just like 90s icons graduated to high-res icons and then back to microsoft tile icons. When peoples' hardware can no longer handle the animations and they learn to associate animation with skipped frames, impeded workflow, etc., the cycle will revert itself.
Material design is a good example for this.