New tricks

A touch of interaction design

I was shown this video from design powerhouse Frog recently, which sparked an interesting train of thought on how much things have changed since I left university ten years ago. The Frog folks quite rightly point out that not so long ago, the form of a consumer product was determined by the mechanical components within, hence the well-worn phrase all of us learned as law: ‘form follows function.’ Consider the form of a record player or a toaster, both immediately recognisable to us as objects which do a specific job. By contrast, in recent years affordable and flexible digital technologies have meant many consumer products now comprise a touchscreen and printed circuit board in a box. Crudely put, this has had the effect of turning many products into a flat, black rectangles, from music players to telephones to baby monitors.

In generating product form, us design types have found our job changing somewhat. Differences in form have become more subtle, nuanced and tactile as products have become smaller and many mechanical elements have been replaced by electronic or entirely virtual alternatives. Beyond the form, the means of interaction with the product has in many situations shifted from buttons and dials to prodding and swiping a pane of glass, as touchscreens allow the interface to change on the go, better suiting different users or situations.

In just a few years, the unstoppable momentum of the mobile phone industry has compounded this change further. In one sense it has raised the bar of consumer expectation. Now that many consumers use expensive, precision-engineered mobile phones all day long, they expect the same level of quality from any other black rectangle in their life. Creating a consumer product that meets expectations requires painstaking attention to detail, quality materials and – for reasons I am about to get to – a design team who are prepared to learn new tricks and collaborate with others.

Bill MoggridgeIDEO founder and digital interface pioneer, famously worked on the industrial design for one of the first laptops, the GRiD Compass launched in 1981. Initially approaching the task in terms of mechanical form and function, Moggridge unexpectedly found himself more and more involved in the design of that which appeared on screen. In his words: “I would have to learn to design the interactive technology instead of just the physical object in order to make the system more easily usable.”

I consider this a milestone in recent design history and since then the importance of interaction design (a term Moggridge coined) for industrial designers has grown to the point where it often overtakes the physical. The upshot of this is that the person responsible for the overall consumer experience – the industrial designer – is today dealing a little less with plastic and metal and instead a little more with the virtual world behind the glass, something my contemporaries and I had little or no training in at university. Interaction design, a discipline that seemed niche at the time of my graduation, is now absolutely critical to any new product design, and this brings a pretty steep learning curve for some established design houses.

I’ve been involved in interaction design for around ten years now, typically bespoke interfaces for new products, also web and in recent years app design for mobile devices. Several years ago, whilst working on a new interface for a home electricity /gas monitor, I began to struggle with communicating my vision. Traditionally, industrial designers sketch forms and mechanical ideas on paper and build models in order to convey how a physical product will look, feel and weigh. You can easily test positions for buttons, try out grip shapes and understand if it’s comfortable to hold. Like any industrial designer, I spent years mastering the skills to do this. Trouble is, those skills don’t help so much when you’re designing a touchscreen slab and everything the consumer cares about happens in pixels.

My early process for designing a digital interface was to make Photoshop mockups of how the on-screen interface would look, and present these static images to the team software engineer, who would take them as graphic assets and begin coding the bespoke interface based on his or her understanding of the ideas. In order to explain my vision for how things on screen would animate, swipe, slide around etc, I had to communicate with a lot of hand-waving and ‘swoosh’  and ‘zoom’ noises. As you might expect, often things were lost in translation, though it was entertaining for anyone else looking on.

Initially I had very little understanding of things such as memory management, power consumption and software compatibility. and the saving grace of any design would be a patient software engineer who got the vision and was prepared to ‘spar’ with me in order to achieve the best possible design.

I realised quickly that I was in danger of becoming a bit old-fashioned and was going to have to move with the times in order to design the new wave of digital products. In earnest I began to experiment with new tools for designing digital interfaces.


That was four years ago and since I’ve tried many different processes, from building interactive presentations in Powerpoint, to Windows Phone emulators on a PC, to a Blue Peter-style presentation made entirely out of paper, cardboard and pipe cleaners! I could have signed up to a course and began learning to code, but I felt the tool I needed was one more intuitive to the creative professional. I needed to be able to ‘sketch’ an interface and quickly make it clickable and animated. What we in the industry call ‘wireframes.’ Then I needed to ‘model’ it: get it on to a phone so that I could share it with the client and test it out.

This is a fast-paced industry and new options are coming and going all the time. My current tool of choice is Axure RP, which is the best fit I’ve found so far for modern industrial design practice. This allows me to quickly turn my static Photoshop images into screens you can click and use, or even build a wireframe that looks and feels like a sketch, but with the added bonus of interactivity. Crucially, I can get this on to an iPhone or Android phone within minutes to determine if the button really is big enough, or if that animation needs to be sped up a little, which is useful for consumer trials.

At Kinneir Dufort, where I’m involved in the design of blood glucose meters for patients with diabetes, getting this on-screen interface right is critical as it’s the means by which some people manage their own health. A confusing interface that leads to a mistake in insulin delivery could mean the difference between life and death in extreme cases, so we need to get it right. Tools like Axure enable the team to communicate our ideas far better than before, and let us test our designs with consumers regularly to iron out any problems.

It seems to me industrial designers are just starting down this road and it will be fascinating to see how our skill-set develops in the years to come. As digital devices play an ever-growing role in our lives, designers must respond by learning the skills necessary to design the world behind the screen, else we’re simply not in control of the whole experience.

As products change, so must designers, or we risk being left behind.

Matt Corrall