Hacker Newsnew | past | comments | ask | show | jobs | submitlogin
Material world: how Google discovered what software is made of (theverge.com)
80 points by nkurz on June 28, 2014 | hide | past | favorite | 41 comments


Software is made of a set of symbols unique to its particular function, and user interaction at its most primitive is no more than the relationship of those symbols to the ones present in the mind of the user.

The latest fads in user interaction design seem to ignore this perspective, and instead treat "UI" as another abstraction layer of unique symbols on top of software, then expecting all software to be designed top-down based off this "unified design language". This approach unfortunately ignores the user, providing further indirection away from the underlying software and it's function, herding the user into a church of the designer's own construction where they are now forced to worship interaction in the abstract as a prerequisite to using the software (or at least blindly perform whatever rituals it demands).

The aim of design unification is often a false path, born out of convenience for the designer, and it's pursuit shows a certain level of disrespect to both the user and other designers. Programming languages - arguably interaction design in its purest form - are a more interesting path towards better software (see Smalltalk, Swift playgrounds, and the work at VPRI).

Material is not what software is made of, but it is a pretty good sign of what marketing is made of these days.


And here we see the middle-brow dismissal in its natural habitat...

Of course it's marketing; they're doing a huge marketing push on this. Even writing "Material" makes me feel like I'm helping some marketing team somewhere.

But saying that this is made up out of whole cloth completely ignores the fact that not only does it engage with the existing design language of other mobile platforms, it also flows quite nicely from "holo" and cards from previous Android versions. Moreover, it's fairly loose as design guidelines go, providing recommendations but not forcing you into a particular unified design.

The designer in that article from yesterday got it quite right: this is post-rationalization, taking what already existed and trying to find the unifying aspects of what gave clarity and discarding what was confusing. That is not the same thing as a dictated UI.

Your response is generic and could be copy-pasted on any article claiming to be about common aspects of a design language. This is exactly why it's voted up (and why it fits "middle-brow" to the t), because if you actually brought up any actual specifics about the article or "Material" it would be immediately obvious that claims of ignoring a relationship with what the user knows or with how the software is actually written are overblown and theatrical.


I don't necessarily disagree with what you're saying, but 90 percent of the developers usually develop their apps themselves - and do so badly, not just in terms of aesthetics, which is immediately obvious, but also in terms of UX.

For those 90 percent of developers, a really solid set of tools and resources like this for any platform is a godsend - and not just for them, but for their users, too, who don't have to put up with poorly designed and ugly apps.

How I wish Linux distros had the same type of design tools that Google, Apple and Microsoft are giving to their developers. 98 percent of Linux programs are garbage, and it's what's kept me from Linux for a long time (among other things, but this was definitely one of the reasons). Canonical has done a little work to improve this, but it's not as good as it could be, and even their store still looks like a mix of modern store with a 90's app store.

As for the other 10 percent of developers, who really know what they're doing in terms of design, they tend to not follow the platform's design guidelines much, or at all anyway, if they really think they can design their app in a unique way that sets them apart, and that's also better for the user.


A long time ago, programming was the way to interface with the computer. So people looking at making programming more usable came up with visual languages, and that spun off into the whole academic HCI industry that we have today.

That being said, material design is a pure visual design language and says nothing about interaction design.


I consider visual design to be a part of interaction design, and taking one without the other is a failure to understand design (to the limited extent it can be understood at all). An example: a traffic light's visual design is fundamental to its interaction design.


Right, but visual and interaction design are different activities with different outputs. An interaction design language is more about patterns of flows while visual design language is about style and metaphor. Contort them at your own peril.


Style and metaphor are integral parts of interaction design. When a user clicks a button to dismiss a dialog, what should happen?

If the experience you're trying to create (in line with the brand) is more playful, then maybe the modal should bounce out of view. If it's a very serious corporate app that people are just using because they have to, then the modal should either quickly fade, or just immediately disappear. One would be inclined to call this "style".

What about when a user is asked to input a date and time? There are two visual metaphors that come to mind: a calendar and a clock. The interaction designer has a few choices here. Date + number picker, date + clock (cool metaphor for selecting a time, but a non-standard UI pattern that could confuse people). This is an interaction design problem, not a visual design problem.

Perhaps you're referring to style and metaphor as the color of buttons and the background texture of panels. That I would say generally falls more into the realm of visual design; however, colors of buttons convey different semantic information, which affects how people interact with your app.


> the experience you're trying to create (in line with the brand)

Everything wrong with design, in one line."Function follows form" at ts worst.


I naturally see the visual language as an output and the interaction language as an input, both interfacing with the holistic design space that I am trying to explore across the design process. They are not two discrete activities, but two forms of participation in a singular activity, with a design of the thing as a single output. I have taken this approach to designing things for a long time now, with no great peril beyond philosophical curiosities such as this.


Could you please point out a platform that provides an interaction design language in addition to the standard visual design language? Interaction design is very application specific, and I'm not sure how much can be guided at the platform level.


Like [1] or [2]? Maybe I'm misunderstanding what you're asking for, but it's not uncommon to provide interaction guidelines...

[1] http://www.google.com/design/spec/animation/responsive-inter...

[2] https://developer.apple.com/library/ios/documentation/UserEx...

edit: oh, maybe by "patterns of flows" you mean the user's flow through an application, as opposed to individual interactions? That's seems less often addressed, but it is still out there: [3]

[3] https://developer.apple.com/library/ios/documentation/UserEx...


"Material is not what software is made of, but it is a pretty good sign of what marketing is made of these days." --> this!


Designers hate it when design guidelines are called marketing, usually said by those who have no clue about what design is and are compensating for their own ignorance.


Quoting someone and then saying "this" adds absolutely nothing to the conversation. An upvote is sufficient.


Not, it's not always sufficient - given no points are shown, there may be no visible way to see that anyone agrees (or disagrees) with a point at all.

I do feel that 'this' on its own is a bit trite, and doesn't add much, but it doesn't add 'absolutely nothing' to the conversation - it's a bit of seasoning, like a dash of salt or pepper.


More like a glob of processed cheese.


I find a lot of the behaviors of these UIs to be surprising in an undesirable way. When a UI does something unexpected I should be surprised by how much sense the interaction has, rather than the novelty of it or a cool animation. I should be able to anticipate the behavior in a future context.

They are touting this supposed underlying physical metaphor (almost as if that is their own newly developed idea in UI), but it sure looks like a mask over the fact that they just threw in a bunch of shiny animations everywhere with much less regard for physical metaphor and reproducibility than one should expect.


Could you be more specific? Which Material interaction do you think you could improve upon?


Interaction is like dance: You just know when it's right. Even though there are visual languages for movement, the best way to explain is by example.


so asking for an example that's awkward would be right on point, then.


I should be surprised by how much sense the interaction has

Agreed. Principle of least astonishment.


I love the visual direction, and I think it will work very well for a diverse set of Google products. The style guide is beautifully done and well articulated.

In terms of interaction design, however, it doesn't break any new ground, apart from better transitions (but at times, too much).

> So the team set about creating this metaphorical material, which is a little bit like magical paper.

A bit of nitpicking: "a bit like magical paper" can hardly be called a Metaphor. It's just a loose analogy. In fact, I have to force my imagination to see the paper-ness in the UI, otherwise it just feels like flat UIs with realistic shadows.


There is no interaction design in the document, it is purely a visual design language. In general: look and feel, typography, layout, animation -> visual design; story boarded user interaction flows -> interaction design (at least in America, in Europe the terms are used quite differently).

I don't think the design language breaks any new ground so much as it sets a strong set of guidelines for what an application should look and feel like.

All UIs are metaphorical, necessarily.


>A material metaphor is the unifying theory of a rationalized space and a system of motion. The material is grounded in tactile reality, inspired by the study of paper and ink, yet technologically advanced and open to imagination and magic.

What does any of that even mean?


A cynical translation: "We finally realised that Apple was onto a good thing with their minimalism, layered UI and UI as a metaphor for physically interacting with your data. So we're putting a lot of fancy words together to make it sound like we're doing something amazing and new, while all we're actually achieving is explicitly stating what Apple has assumed to be common sense for decades. After all if we want all these Android developers to conform to a common human interface guideline ruleset rather than inventing their own UI for every new application, we have to make that ruleset sound sexy and awesome!"

I love how the guy presenting on stage starts talking about a new material that will provide tactile feedback, as if Google is already launching phones with shape-shifting screens. Some Android fans are going to be mighty disappointed when we don't have tactile morphing screens in the stores for Christmas.


"Finally"? Apple announced iOS 7 barely a year ago, and they were far from 'minimal' before. Google has been using this design since Google Now was launched a year before that.


I think the parent was making a reference to the original Macintosh GUI guideline [1] (human interface guideline). They are quite famous in the UI / UX community as being a pioneering way[2] of explaining and thus unifying the look and feel of third party applications.

[1] http://interface.free.fr/Archives/Apple_HIGuidelines.pdf

[2] http://hci.stanford.edu/publications/bds/4p-guidelines.html


Oh I see. But that still doesn't validate his cynicism, as Google has been doing that for quite some time as well for Holo [1]. It's not as if this is the first time that Google has a "design language" for Android.

[1] http://developer.android.com/design/index.html


Let's get our history straight - Microsoft probably initiated the trend with Metro. Google launched Holo with Android 4.0 and Apple jumped onto this particular ship last of all.


(self reply) - I'd misread your post and thought you were making an 'apple invented flat' comment. Apologies.


"What does any of that even mean?"

The new guidelines are much better than what they had before. The new visual design is also much better. However, some of the language used to describe the new design sounds inflated and a bit pretentious (it's ripe for parody!)

They've gone for a clear and uncluttered visual look. Hopefully, the next iteration of their guidelines will also include simple, clear and unpretentious copy.

An example of a really well-written design patterns guide is from the gov.uk site. It's not an equivalent of the Google design guide, but in terms of how to write guidelines and recommendations, it's the best example I've seen

https://www.gov.uk/service-manual/user-centred-design/resour...


Their metaphor for materials is the combination of two ideas: A streamlining/optimization of screen area, and a set of rules that define how things move. The material metaphor is based on things we can touch in real life. However, this metaphor is not going to be strictly adhered to in order to take advantage of the technology it's implemented on and provide a good user experience.


> You couldn’t do anything you wanted with them, just like you can’t just do anything with physical objects.

I find this pretty funny considering all the objects in the video(s) seem to transform/split/create/shapeshift into new object all the time.


After reading this morning about it, going out, then getting back and reading about it again, I still literally don't have a clue what they're talking about.


The title leaves a lot to be desired. "Software" is more than a visible interface. "Discovery" is more than articulation.


That's a very charitable comment. I was struck by the outright arrogance and hubris of such a title. Of course I'm sure no one at Google would use those words, it's just some tech blogger or editor with a knack for linkbait titles.


This seems to be more of an approach to UI design rather than software design as a whole. Maybe they've "answered" what UI is, but for me this doesn't answer what software is made of.


specifically, the idea that UI elements should behave as if they were tangible objects isn't a new idea. this is what apple have been doing for.. quite a while, and honestly I didn't think this was breakthrough stuff - elastic bounce on scroll views, smooth, clean, and consistent UI transitions, and previously skeuomorphic design principle.. the idea that that interactions with a interface should mirror our interactions with things in real life doesn't seem like a shocking revelation.

what's worse is that they have had this epiphany, and then.. seemingly ignored it.


I think the term 'skeuomorphic' has become a little muddled but for the sake of argument let's distinguish between 'functional' and 'decorative' skeuomorphism.

It was an excess zeal for the latter kind that Apple quite rightly got criticized for. The green baize in Games Center and the leather-bound notebooks in wherever.

UX/UI people have been talking about 'affordance' for years and if a button looks raised due to subtle shading then that aids in recognising that it's clickable.

Techniques such as this have been around since the birth of the GUI.


A little more complex version of hypercard?


The sample phone screen they showed gave me the creeps. All the little stacked up sheets reminds me of a desk stacked with unopened bills. I can do without that kind of real world clutter in my UI. It helps me to focus on one thing at a time, not have a bunch of slivers beckoning around the edges of the current "window", thank you very much.




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: