Tuesday, 5 August 2014

Is Google Material the future "stuff" of mobile?

Google has recently launched, if that is the right word, their new unified UI. It is named Material  Design and has made big waves in the UX and design communities. When it arrives on commercial products end users will be able to experience this new approach to user interfaces.

Develop a single underlying system that allows for a unified experience across platforms and device sizes. Mobile precepts are fundamental, but touch, voice, mouse, and keyboard are all first-class input methods.

So consitancy is a core principle, lets come back to this later.

The inspiration, or foundation material is paper and ink:

The material is grounded in tactile reality, inspired by the study of paper and ink, yet technologically advanced and open to imagination and magic.

John Wiley, one of the Principle Designers at Google, gave this insight about how Material Design cameabout:
I'm one of the instigators of material design. It actually came about a couple of years ago when we were working on a design problem involving Google Search. I was looking at mobile results on cards and I asked "what is this made of?" People gave me funny looks, like "what do you mean? It's just pixels." But I didn't think that was a good answer.
When you physically interact with software – actually touching the cards and links and buttons, etc. – you bring a lot of expectations around how physical objects behave. If the interface isn't thoughtful about those expectations – if it's just a bunch of pixels – it leaves you with a rather unsatisfying and inauthentic experience.

The key point is “what is this made of?” . We spend hours staring at and prodding and swiping this stuff but what is it? A good question.

Material Design is the work of a design team, whose heritage and inspiration is the 2.5D world of layers of paper. It is graphic design minimalism applied to digital design and is a direct response to and rejection of the skumorphic design which typified the first few iterations of the Apple mobile IOS. Skumorphisim grew to be seen as an over ornate and decorative form of UI design. A gothic form of UI design. Its attempts to literally ape the physical appearances of the core analog devices indicative of an application’s function became to be viewed as excessive and unnecessarily visually complex.

We need to take a few steps back to understand the initial rational for skumophic design.  Skumorphic design is a visual imitation  of another object by replicating its visual form, shape and functionality. Lets start by looking at the two worlds, that of the being presented to the viewer in one form or an other and the world of experiences, memories and cultural inheritance of the user. As Don Norman putsit :

In the world of design, what matters is:
1.    If the desired controls can be perceived
1.a. In an easy to use design, if they can both readily be perceived and interpreted
  1. If the desired actions can be discovered
    2.a. Whether standard conventions are obeyed

When a design borrows from or copies aspects which make it easier to perceive its function then it helps the user to match their model of how the system will behave to the actual system model. This borrowing form the established norms of a previous medium or cultural experience is not unique to the computer user interface.

Often when a new form or medium appears the creators seek an appropriate reference point or model upon which to build the new way forward. They learn from the past. When Guttenberg created the first movable type he chose a typeface which mimicked the gothic script of hand produced bibles.

Detail from the Guttenberg bible

A page In order to achieve a look which mimicked the hand manuscript his typeface, Blackletter, had over 300 characters to accommodate the many ligatures and flourishes of the then traditional model.  Although his method of production was revolutionary Guttenberg employed the established aesthetic, he was using a new technology to improve the production of books but was sticking with the understood and expected visual appearance. Partly for commercial reasons, but also because that was what he and his audience knew and expected.

The first moving pictures with a constructed narrative were modeled on the experience of watching a theatre performance. The camera was static and contained none of the techniques we now expect, pans, close ups, cuts etc. It was only later that film developed a language of its own.

The revolutionary Windows, Icons, Mouse, Pointer, user interface developed by Xerox took the existing office desktop as its central metaphor. The environment where these new desktop computers were to be used was in a paper based office environment. WIMP desktop UI is still the default model for PCs Laptops etc.

When Apple sought to enter the smartphone market it was clear the WIMP and desktop metaphor was not applicable. They retained the notion of icons and buttons which were touched instead of clicked, but did away with windows and a pointer. The notion of files was now hidden from the user and the limitations of screen size meant windows were infeasible. Instead of using a consistent model across the system screens and all applications, each Apple app was designed to express the functionality it provided by mimicking its analog equivalent. Its hard to remember but making a tablet work for users was an unsolved problem until the iPad came along. Others had failed and, one of the reasons Apple did succeed was to do with making it unlike a computer. Skumorphism was a big element in this.

Skumorphic designs were employed to help users understand the capabilities of the new mobile computing platform. Buttons were given visual clues, highlights and shadows to give a 3D appearance and lift them off the screen. Functional areas which required users to touch were given clear boundaries.

Where there was no real world analogy which could be readily employed, or widely understood by the audience, then a new visual language should have been applied. This was the case in most elements of the actual system level of the iOS UI but not so with some of the Apple apps. While it makes sense to mimic a calculator or a note pad, a feature such as “find my friends” has no real world equivalent.

I would argue that for this new medium a skumorphic approach made good commercial and usability sense. The stuff that the early iOS UIs were made of was, in the case of applications, the stuff the users already knew, and in the case of system level interface items it was buttons, switches and sliders and established concepts such as dialog boxes. What failed was the need to acknowledge that not every application needs to be skumorphic and those without analog equivalents, or where slavish mimicry hindered usability, a different design approach was needed.

A new language for a new medium


Google’s Material world is an attempt to move beyond the previous medium and to create a new digital language which is appropriate to the new mobile digital world. The argument is that the user base understands how to interact with mobile technology and the skumorphic approaches of the past are no longer necessary or desirable.

I question the universality of a paper based metaphor, but the looseness of its definition means it should be adaptable to many different circumstances. I am concerned that the dominance of a minimalism aesthetic may result in throw the baby out with the bath water. The affordances and cultural heritage which gave skumorphic designs their validity and could be used to the user's benefit. But they are removed from the new language and users will need to take a greater leap to learn how to work this new stuff. This is always the case as a medium develops and the benefits of a truly digital language should out weight what is lost.

However the primary aim of establishing a consistent experience across different mobile platforms is welcome, but harder to achieve. In terms of the OS level, it is within Google’s power to at least deliver consistency within non-forked versions. When it comes to 3rd party applications the problems are much harder.

Consistency is a cornerstone of user good human computer interaction. It provides users with a stable predictable environment where things happen as they expect. Items are in the same locations. Visual symbols have the same meaning regardless of the application they are used in etc.

Today achieving consistency is much harder than it has ever been. For a while Apple achieved this for their desktop environment. Early 3rd party applications for the first few iterations of the desktop OS, had a somewhat cavalier approach to consistency. Application developers ignored many of the Apple Interface Guidelines. Finding items in menus on some early packages was a pot luck affair. Over time the (much smaller ) development community appreciated the benefits of consisteny over the need to be unique and the consistency of the Apple environment became one of its strongest assets. While there were notable exceptions such as Kai Krause most Apple applications were easy to switch between.

Then the CD-ROM era and subsequently the web created a free for all development environment where anything went. While this was good for experimentation and innovation, consistency went out the window. With millions of developers and no agreed set of guiding principles or unifying force, consistent patterns and behaviors have only been adopted through mimicry, conservatism, and recognition of the benefits of following best practice.

The same is true for mobile applications. Many iOS and Android developers embraced skumorphism, others experimented with new ways of delivering content and functionality within a touch environment. As Apple has found even with its much stricter policing of the distribution process, imposing a consistent UI experience across all apps is very hard.

Google will show case Material Design with Gmail and its core apps. I have no doubt that these will be visually stunning. Some of the biggest names in the app ecosystem will readily adopt it. The appetite for a shift away from skumorphism is widespread in the design community. However, the example of Windows 8’s touch tiled UI demonstrates that while it is visually appreciated by designers, not all applications fulfill its potential. In the case of Material the design guidelines are a beautiful expression of its capabilities, we will have to see if this new material will be the unifying aesthetic of Android experiences.

No comments:

Post a Comment