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.

The aim of material design is defined as:

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

2. 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 3^rd 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 3^rd 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.

Related articles

• What is the Point of Material Design?
• Google's New, Improved Android Will Deliver A Unified Design Language
• This is Material Design, Android's New UI Paradigm

Fin, ring based interaction device

I have always thought the finger and rings are ideal places for control devices. This new project seems very versatile and natural to use. Would work well with Google Glass.

More... 

"Psst! Want to buy a smart watch?"

Pebble, Google, Samsung, Sony, Qualcomm and soon Apple are all getting into the wearable game. A day does not seem to go by without another candidate for our wrists, belts, or eyes. Some are highly targeted towards specific markets, such as Nike, Garmin or Fitbit's sports devices. Even auto manufacturers are getting in on the game, Nissan today launched the Nismo, which monitors both telemetry such as speed and driver heart rate, all to improve safety and driver abilities. But with so many offering we are sitting at that confusing time when a new technological opportunity throws up many wild and diverse solutions. To take advantage of all these you would need arms like a street corner hustler.  

Unlike traditional wearable accessories where design, fashion and quality of materials play an important part, the decision process for tech wearables is more complex. Top amoungst many is battery life, this may be an area of consumer education. As phones switched from relatively dumb devices into today's smart phones we have become accustomed to the nightly recharging ritual. So maybe we should not think of smart watches in terms or normal watches, but as mini computers. Other considerations are usability, comfort, and a desire to look more or less like a geek. 

The big consideration is about ecosystems and capabilities. As most offerings will not be stand alone devices but paired to your mobile, the choice of OS is important. If you are wedded to either Android or IOS then you require a lot of impetus to switch. Either OS will promise a platform where third parties can develop apps to meet your every need. The Davids entering the market against these Goliath's face an up hill battle. But as we know, in technology the newstart can sometimes cause major disruption.

Individual companies bringing in task specialised watches will have a distinctly hard time. Being an you are established brand within a domain helps.  Or if the device targets an an activity where it is already established that you need to dress appropriately - sports, biking, medical then consumers may be willing to strap on a special it device. But if it is a  more integrated activity, such as driving, the barriers to donning automobile specific wearables is high. 

After years of research in the lab, the world of wearable tech is just starting to enter the mainstream. Many players want a slice of the $8.36 billion pie. As a consumer, my advice would be to hold my fire and give it a year before purchase. By then we will be on mark two or three of devices and the some of the early problems will have been ironed out and the best of a new generation of useful wearable apps should be clear.

Windows 8 review

Over the course of the last couple of years my view of Microsoft has changed. They have seemed to be on a roll. First with the original surface – those bespoke multi touch tables, then Kinect and its promise of coming to the desktop, and recently with Metro, the new Surface and Windows 8. Microsoft seemed to me to be on the up. They were the guys who were innovating, who were not content with the exiting paradigms. With Metro, I had my concerns about the design approach of mixing two UI approaches in one OS, but hey the design was refreshing and far away from the skeuomorphic tendencies of the Apple mobile offerings. What’s more they proudly boasted “Windows 8 is the most widely used and tested pre-release product we’ve ever delivered,”. Bring it on.

So, it was with great anticipation that, on the day of its release I installed Windows 8. Admittedly my laptop was ancient, I bought it when Vista had just been launched, but one of the great things with Windows 8 is that it will still run on this old hardware. Sure it would be better to have a touch screen machine, but money is tight. I did look at getting a new machine, and was tempted by all the new laptops pre installed with the new OS. Some of which looked very affordable. But these are the non touch screen models. The cheapest touch screen Dell I could find was £879.

So I was stuck with my old PC, and I suspect I am in the same boat as the bulk of Windows 8 users, either upgrading or using a cheap machine and no touch UI. So what is it like?

Metro a promise unfulfilled

It is fast to load. But although it was the launch day, it still required updating – as it does on an annoyingly frequent basis. On first impressions it looks slick and tight. The tiles look good and bright, the Metro, (or whatever it is now called) UI is attractively simple looking. But, oh how quickly a dream can be destroyed.

Once you start to use the touch UI it starts to fall apart. The simplicity and cleanliness of the UI is partly down to its distinct lack of functionality. The core apps such as IE, calendar, maps seem so paired down that their functionality is compromised. Surely what has been learnt form the IOS App revolution is that touch screen does not have to mean lack of functionality. Surely even the most basic calendar would make it easy to switch between day, week, month and even year views? But in Windows 8 these options are hidden in the bottom task bar. It seems impossible to move an event from one day to another by dragging, or any other method except going in and changing the event parameters. Could be my lack of touch, but come on get this right.

The issue of off screen controls is surely one which must have raised some issues during the testing. A central tenant of a WYSIWYG interface is the notion that functions are laid out in front of the user, or represented by visual labels or icons. With Metro functionality is hidden at the side, top and bottom. As a new user I found this very hard to get to grips with. What can I do here was never clear. Design concept  over function.

The whole design of Metro seems to be an antidote to the increasing skeuomorthism of Apple’s recent designs. Skeuomorphism is the practice of making a design appear to look like its real world counterpart. So the Apple calendar has a stitched leather header and torn paper embellishments. The design establishment has heavily criticized the approach. Interestingly it does not seem to be a turn off with the general public, or maybe that even in this day of social media they are yet to voice an opinion. It is seen as rather tacky and over ornate. It is against the modernist aesthetic of simplicity and form follows function where the UI is a highly functional element of the design and almost fades into the background. Rather than attempt to draw attention to itself.

The UI is so slimed down it fails to contain sufficient content. Edward Tufte has long crusaded for higher information density. 

"Match the information density in your presentation to the highest resolution newspapers [The Wall Street Journal has the highest resolution of all]" Tufte

While this may be extreme, Metro seems to be taking the PowerPoint school of UI design and putting as little content as possible into its screens. Metro is not alone this delusional view of communication is rife in the marketing and design community. It is taken to its extreme in apps like Haiku Deck where you are advised to only use minimum words to explain a concept. At least in a presentation the presenter will expand upon the limited message. On a device you are alone and want to consume, not simply admire the design.

And then there is the idea that you do not need to see more than one browser window at once. Surely there is a way of implementing tabs or some other solution. The general lack of multiple windows in the Metro UI is odd for a laptop or PC UI. Granted it is a common limitation of mobile and tablet OS – the notable exception being the defunct WebOS – but once you are on a laptop it should be supported. Microsoft’s answer to this is to make Metro only one half of the OS. (Update, I found the multiple windows – off the top of the screen )

Metro takes minimal design to the extreme. The basic button, is a building block of UI design since the days of the Xerox Star. In Metro it has been stripped down to a level where it is merely a symbolic image with or without a label. Sometime the symbol has no enclosing boundary and the text looks the same as other on screen text. The act of rolling over (which is nonsense on a  touch screen) is  sometimes the only way of knowing that the area is interactive. This is following trends in web design, where visual design and the expected sophistication of the end user negates the need for clear, or what is perceived as excessive visual clues. As someone with a background in design and fine art the design of Metro was alluring. But time and again in web UI evaluation we find that users do need clues. They are not as sophisticated or as quick to grasp what to do or how to do it as we would like. Websites are fashion victims. Of course there is a bedrock of usability design, but the visual design and design tricks evolve and follow trends. Often short term trends. This is not what one wants for an interface which has to last for years. It is a core element and should rid itself of the notion of fashion. I feel Metro is a UI of today, but it is already failing because of its design stance.

Desktop and the demise of the start button

If you want to do real work and forget about touch then you launch the desktop. So now instead of having to learn one way of interacting users have to learn two. Is this a good idea? I expect not, it is a comprimse of a legacy system combined with the need to keep up with new forms of interaction.

The desktop is an evolution of the Windows of the past, but it does have at least one fundamental change which make it harder for old hands to transition. That is the removal of the start button.  I can understand that the start button may not easily sit at the bottom right hand corner anymore because you could have your desktop beside a Metro app. Then it would be easier to miss a hotspot in the corner of that “window”. But its complete removal is a bit extreme.

Once you have managed to get to the desktop, a single click on the Metro start page, but not a global element of the off screen Metro functions – then you instinctively reach for the location of the old start button to run a program. If you click the spot where start was you are thrown back into Metro. To actually open an app without starting from a file you need to:

·      switch back to Metro,

·      access the all apps button from the off screen bottom taskbar,

·      right click on an application and then the bottom taskbar will appear and give you the option to pin to the taskbar.

You are not pinning to this taskbar you will not see any visual indication that you have achieved your task or any confirmation. You are not pinning to the Metro taskbar but the desktop taskbar.

I can’t think of a worse way to introduce people to the new desktop. There is no intuitive way of doing this. There does not seem to be a way of doing it within the desktop environment. I want to change the desktop so I have to go into Metro? If you use the desktop help and search for “start button” you don’t find anything useful. Because the start button does not exist, so there is no help relating to this feature. Try “pin applications to taskbar”, nope no joy. This is bad.

I may be missing something, but I approached Windows 8 as a novice user, I did not watch the introduction videos till after I had struggled for a while, and even then they were of little help. I am an experienced design and usability professional who has worked in UI for 24 years, used more operating systems and their various incarnations than I care to remember. But in the end I had to reach for Google to find an answer to this basic, basic task.

I will battle on with Windows 8 to find its hidden depths. Admittedly within Metro there are some nice features, but I see these problems as fundamental issues. Microsoft may innovate and test to the nth degree, but they still don’t get it user interface or experience design.

Passbook is the stepping stone to your digital wallet

Over eleven years ago Apple launched iTunes and with it revolutionised the music industry. This fall they will add one more app to the core suit of tools in IOS, Passbook. It is the first step along a path which will revolutionise the way we make payments.  Apple describes it as: 

 " With Passbook, you can scan your iPhone or iPod touch to check in for a flight, get into a movie, and redeem a coupon. "



Passbook is a single place for all your digital boarding passes, coupons, loyalty cards and vouchers. Some commentators have criticised the lack of integration with any real payment system. The limitation to coupons, tickets etc is merely aggregating the functionality offered by multipul single branded apps, such as airline apps etc. I think this is missing the point.

Initially Apple is out to change the way we think about our wallet, and they are doing this in small steps. First there is the social change. I agree that other apps do some of these function, but by pulling al this functionality into one place and making it part of the core offering they make the functionality available to all IOS users. In doing so they will have the opportunity to allow far more users to try and get use to using their iPhone as a replacement for functionality previously supplied by pieces of paper and plastic cards. It is about starting a behavioural change. Once the convenience and simplicity of this approach becomes understood, its use will become mainstream. Of course it requires brands to adopt the Passbook approach along side or in place of their own apps. But lets assume the benefits of the lower barrier to entry and the universality of the approach will perswade many to come on board.

Once the behavioral change takes place Apple can release Passbook 2.0, and make the killer move that will enable users link to and to make use of their iTunes account to make payments.  How the final payment solution is delivered,  NFC equiped iPhones or QR codes or via Bluetooth 4 is still to be seen. Whatever solution the costs for retailers in terms of new equipment will be a factor, but we can assume Apple is looking at the complete ecosystem and will ensure the system will be attractive to retailers.

In June of last year Apple had 225 million iTunes account holders, a number that dwarfs that of the largest banks. As of February this year Apple had sold 316 million IOS devices. Of that approx 180 million were iPhones and 75million were iPod touch. Put a payment version of Passbook in the pockets of even a minority of these users and you have a huge base of potential customers.

Of course as has been said on ReadWriteWeb it could all go tits up and be an also ran, but I doubt it. By taking a slow and steady approach Apple will initiate another revolution. The foundations laid by iTunes, iPod, IOS and iPhone will allow Apple to go where no other company can feasibly reach.