Can you design for the future using the past?

Posted on 28/02/2013


Past-future-present design. Web semiotics and designing for the future using the past

Flat web design an example of flat web design
There’s been a lot of chat about flat design, of late. If this term doesn’t mean anything to you then take a look at these examples.

Firstly, you’ve got to admit that flat design isn’t really that flat. What it does do is avoid overly “buttonifying” (hideous word for a hideous thing) web pages and taking design cues from real world, physical objects (e.g. a tape deck, video player or TV screen). This more common approach is referred to as skeumorphic and is generally (although not always fairly) frowned upon by designers.

Skeumorphic  web design

ibooks app ipad
It’s all apples and oranges really, and not worth wasting characters arguing which is better. However, it did get me thinking about how we use signs, symbols and meaning in digital environments.

Web semiotics, if you will. There’s so much you could analyse to understand how the web works and conveys information, but I’ve not got time. Instead I’d like to focus on the humble icon.

Icons & Graphics – what are they for?

Icons are simplified visual clues. They’re a bit like a hieroglyph, in that they resemble what they are supposed to represent. These graphical shortcuts are friendlier on the eye and save space where you might need a whole phrase to explain something (especially important for mobile designs because there’s not a lot of space).

Above all, a good icon should instantly mean something to the end-user. It should provide a clue to what it does without any prompt, description or instruction. All of this relies upon the user’s past experiences of that shape.

arrow symbol icons
E.g. the humble arrow.
Since the dawn of the hunter gatherer, people have used arrow-like projectiles. We all know that the sharp pointy end travels forwards, the blunt end indicates where it came from.

So seeing an arrow on a page, a phone or a computer means a) this is where something goes or b) movement is possible in this direction. Simples.

What’s crucial is that someone can work out what a shape means or does, but this doesn’t mean that an icon always has to be familiar. Take the three lines that appear on apps like Foursquare and Facebook:

facebook navigation foursquare navigation

You might see these and think “list” and you wouldn’t be far wrong (it actually opens the menu on iOS and Android devices). But regardless of whether you know that, you can work it out by pressing it. Tap the icon and hey-presto, the menu opens. Experiences – and therefore meaning – can be generated within software, websites or apps.

Here’s where flat vs skeumorphic debate comes in:

When should you fall back on past experiences and design conventions?

When should you create your own?

The vast majority of icons rely on a past experience. This can be as simple as a floppy disk image for the save function or even harking back to the analogue age where documents were typed on paper, stored in files and kept in filing cabinets (resulting in the PDF, .doc, folder and archive icons). Likewise, typical icons for searching and zooming in (a magnifying glass or a plus button) both rely on pre-digital concepts for their meaning.

It doesn’t have to be this way. We can create meaning within software so why not define new shapes and allocate them meaning? Why create future facing design with the symbols and techniques of the past?

There is no simple answer, but I know where I stand on this. In order to have a device or app that can be used immediately, we need to ease people into it. If we reinvent the wheel with every new device, then we require people to learn and re-learn everything, all over again. Nobody wants to do that.

Instead, we need design that gives users a frame of reference. We can introduce different amounts of “new” depending on the intended audience. Design has every right to recreate and redesign icons. Without this, how would anything improve? More savvy users will be able to adapt and gradually, new conventions establish themselves. However, interfaces should avoid being entirely unfamiliar to reduce the amount of effort and cognitive load of a first time user.

cockpit aeroplane car interior
(Some people see: aeroplane cockpit. Others see automatic car driving view.

What is straightforward depends on what you’ve used in the past.)

Sometimes there is no escaping skeumorphism. Learn to live with it and never stop trying to design for the future.