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:
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.
>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.
> 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.
This is why it was a good idea to launch the N7 first - N7 is "close-enough" to phone-size that phone-scaled apps appearing aren't jarringly awful, as long as they support landscape rotation.
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...
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.
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).
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.
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:
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.
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.
I find iOS 7+ design language to be very clean and legible compared to iOS 6. When screen real estate is limited, all of the bevels, divisions, and shadows adds a lot of clutter where they can't be afforded.
I mention 4 different products, I was demonstrating there is not a single one of their products that hasn't got quite obvious UX issues that they never seem to even notice.
And I haven't even added the new home page Chrome redesign on Android now hiding the most recently viewed web in landscape mode just so it can show a massive Google logo. It's very annoying.
And their search still wastes a mass of real estate on the right hand side even when there's nothing to go there which resulted in the snippets of text being too short to be useful.
I could go on and on ;) And I haven't even started on Google Play Music which has so many things wrong with it, not showing album years, it's a nightmare if you try and go "back" and a ton of other annoyances that spotify doesn't have.
All of their products feel like they're just not very well thought out. But technically speaking they're brilliant and that makes up for it.
You hit the nail on the head. For as brilliant as Google may be in many ways, visual/UX design is not one of them. Google Apps for Business is nearly impenetrable, and AdWords and Analytics are not far behind.
Come to think of it, this material manifesto sounds a bit like a company of engineers trying to force their will onto visual design.
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.
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.
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.
Yes, just because something is conceptually the same doesn't mean it is functionally the same.
A lot of reductionist like to state 'This was done before', and ignore the subtle differences that make the implementation better and actually very different in application.
For example, animations were no where near as smooth in the Apple Lisa days, nor shadows able to show such subtle differences as to communicate 8+ layers. Even just these two things combine to make a very different experience in the real world.
Those two things also have absolutely no dependence on UI design, but are a natural consequence of faster computers with more dense displays. I don't understand what the obvious functional difference is between drop shadows http://upload.wikimedia.org/wikipedia/en/5/52/Apple_Lisa_Off... here and drop shadows in any other application or webpage.
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.
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?
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.
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.
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.
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:
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).
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.
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.
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.
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.
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.
I suspect I don't notice this as much because I'm rarely googling highly ranked keywords - usually if I have to google something, it's specific and more educational or a news items.
I can see how some of the contextual interface stuff would be annoying, but some of it I actually like. For example, when googling for a sports team name, if they are playing a game at that particular time, the first thing you'll see is the game score.
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?
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.
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.
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.
http://iamralpht.github.io/fab