Google’s Principal Designer For Search And Maps Explains Material Design

Google’s design work was center stage at I/O this year, from the keynote through sessions and things being demoed on the show floor. The changes run across Google’s range of devices and platforms, and embrace a new set of design principals grouped under the central concept of ‘Material Design.’

I spoke to Jon Wiley, Principal Designer of Search and Maps and Google, about the process of changing the company’s design language across its platforms and products. Material Design doesn’t necessarily throw out Google’s existing design work, according to Wiley, but it does represent a comprehensive new way of thinking about software interaction in the context of modern devices.

“It’s definitely an evolution, although I do think at this point that we’ve also pushed it farther, and we’ve been working pretty hard on that,” Wiley explained. “We talked [during the keynote] about [how] material is the metaphor, and there were actually two metaphors that guided us in terms of thinking about how we could design specifically for high-density displays with touchscreens.”

Touchscreens, combined with high resolution screens with very high pixel-per-inch counts, have conspired to give device users very different expectations around what software should feel like in use. We no longer stare at crudely rendered green text on a black field, after all.

“That affords kind of a new dimension of interaction and interactivity – you’re physically interacting with software interfaces, and so I think that people have far greater expectations,” Wiley said. “They have all the expectations that they have with beautiful, functional, useful design in the physical world that we’ve had for a very long time, they’re bringing those expectations to the software that they’re interacting with because of the nature of the medium.”

“Mouse and keyboard dominated the input/output mechanism with computing devices for quite some time, and we’ve only had widely available touchscreens and high density displays for a few years,” he added. “We initially saw a lot of interface design that was ‘well, we’ll go take what we know, and we’ll jam it on these smaller screens, just kind of jam it on there.’ And we started [...] over a year ago, really thinking about if i’m someone who uses software and i’m coming to the table with all of these expectations about the physical interaction of things and how they behave, all of that is informed by some basic rules and underlying physics.”

That’s where Material Design comes in; the entire system is engineered to mimic real world analogs, without going all the way and becoming what we know as ‘skeuomorphic,’ where interfaces try to offer up almost photorealistic renderings of analogous surfaces in the real world – like a Moleskine for a notebook app, for instance.

“The Material metaphor cuts through a lot of this – we say, ‘what is this made of, what are some of the basic physics of this material?’,” says Wiley. “What’s nice about software is that it doesn’t have to be completely constrained by real-world physics, but you do want to set up an environment where it’s internally consistent.”

Building these physically sound worlds allows Google’s designers to create interface and interaction heuristics that users grow accustomed to and recognize across platforms. Which means that for users, intuiting required behavior becomes much easier.

“It’s actually an imposed set of constraints, but by imposing constraints it enables you to creatively solve within an internally consistent framework of how things work,” Wiley explained. “That way, as you use the software, you’re doing the task on one device, then you’re doing the task on another device, and you’re using multiple applications to solve whatever problem you have, that it doesn’t feel like you’re jumping around from one universe of physics to another universe of physics – that everything feels consistent in terms of how you interact with it.”

Material Design talks about real world analogs like paper and ink, but Google also considered another metaphor to guide its new animations and transitions, which are a big part of its visual and interactivity overhaul.

“The other metaphor that’s driven us quite a bit [...] comes from Fred Gilbert, who’s a director of design for Google+, is that software has followed a metaphor of film and television editing, where each interaction is a series of jump cuts and this is amplified on touchscreen devices,” said Wiley. “The actual world and software design and interaction is probably better suited to a metaphor of theater, where you’ve got almost a proscenium that you’re seeing things happening on. A bad play would go ‘Scene.’ and then a curtain would come down and then you’d wait a while and the curtain would come back up and there’d be something completely new.”

To counter that, Google wanted to pin down a visual language that would not just entertain with flourishes and animated shifts, but that would also inform a user, providing contextual information about how you might interact with the incoming interface as its being set up.

“We were looking at all this software and that’s what’s happening – you’re doing these really important things, and you’re interacting with the software and it’s doing these jump cuts, where you do this and it does this other thing and it’s actually really jarring,” said Wiley. “So we started thinking about how we can actually convey a sense of continuity, where you’re going from one state to the next and it’s done in a thoughtful, composed fashion.”

While Google made Material Design seem like a brand new revolution in software aesthetics during the show, it’s actually something the company has been working on for years, which pops up across its range of products. Wiley says that it’s also the product of Google’s unique approach to product development, where teams from distinct projects talk to each other all the time, and in this way they arrived collaboratively at the new principles. As Wiley said, it’s still relatively early days for high density displays and touchscreens, but it’s far enough along that any efforts to help deepen our experience of interacting with them is worthy of praise.

window.TechCrunch.loader.on( 'gravity-beacon', function(){ window.tc_loadGravityScript( 'recirculation' ); } );

View the original article here