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.a. In an easy to use design, if they can both readily be perceived and interpreted
- 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