Icons, Symbols and a Semiotic Web

Semiotics, loosly speaking, is the study of signs. Simple enough. What becomes difficult is defining what a 'sign' actually is.

When we think of signs we think of the things on the left there don't we? We think of something visual like a signpost. But, 'signs' are made up of many different components - words, sounds, body language and context - all of which combine to create a visual language which help us understand something, be that the way to the beach, or if somebody doesn't really like us the first time we meet them.

What this article isn't about

This article is not about semiotics. I'm not going to go into great depth about it as it is such an indepth field I've barely scratched the surface over the past few months. What I am going to talk about is the usage of semiotics in Information Architecture, Wayfinding and Icon design for the web. It's a big subject so this will probably be an introduction to something I will cover in more depth in a chapter of a book I'm currently writing (more about that another later).

Starting at the beginning

We've established that semiotics is the study of signs, and signs can be made up of all sorts of stuff like language, pictures, body language etc. but what does all this mean in a practical sense? Well, it might help to give you a brief overview of the field of semiotics, then go into some of the theories that help make up it's core.

Modern day Semioticians, not only study 'signs' - it goes much deeper than that - they study how meaning is formed. They study how people first of all interprate a sign, how they then draw on cultural or personal experience to understand a sign. In that sense semiotics is about communication (see the parallels with design?).

There are three main areas of semiotics; the signs themselves, the way they are organised into systems and the context in which they appear.

We'll have a look at the first of these in this article.

The Signs themselves

Charles Sanders Peirce is an American philosopher recognised as the founder of modern semiotics. Peirce was interested in how we make sense of the world around us and in this sense was less concerned with the linguistic aspect of semiotics pioneered in the early 1900's by the Swiss professor of linguistics, Ferdinand de Saussure.

Peirce proposed that signs could be defined as three categories; Icon, Index and Symbol.

1. Icon - An Icon sign is a sign that resembles something, such as photographs of people. An icon can also be illustrative or diagrammatic, for example a 'no-smoking' sign.
2. Index - An Index signs is a sign where there is a direct link between the sign and the object. The majority of traffic signs are Index signs as they represent information which relates to a location (eg, a 'slippery road surface' sign placed on a road which is prone to flooding)
3. Symbols -
A symbol has no logical meaning between it and the object. Unfortunately the web is littered with bad examples of this type of sign, but there are good one's - a homepage icon which is a house for example. Other off screen symbols which may help explain the difference are flags. Flags are symbols which represent countries or organisations. Again, the crossover to design and branding is very evident in these signs.

Saussure however proposed a simpler structure of what a sign is:

1. a 'signifier' (signifiant) - the form which the sign takes; and
2. the 'signified' (signifi?) - the concept it represents.

For Saussure, a sign is the combination of the two. But, what does this all mean in terms of the web?

Semiotics and the web

The web is full of signs. Think about it.

Most users want to accomblish a task on a website, in order to do that they have to navigate to the right place. In order to do that, they have to follow signs. See?

Not only visual signs either. Let's consider Information Architecture for a moment.

IA is a field of web development concerned with the organisation of information. I once had a good IA friend of mine describe to me what got her excited about her job. 'I make lists', she said with a big smile. 'Then', she continued, 'I make lists within lists'. Sounds thrilling doesn't it? We went on to discuss words and how they effect what she does.

'Words matter', she said. 'Probably more than anything. You can have a bad design, but if the words are right and in the right place, the user will generally find what they need.'

The conclusion from this conversation was that words are also signs on the web. The right word in the right place - isn't that what navigation is all about? Context. Let's move now into something a little more visual.

Let's take the example of designing an icon system for an online application. The parallels to software design are obvious - well designed GUI's have pretty good icons, or should I say signs. So what should you do to make these icons understood by the user?

Here's my top three:

1. Be conspicuous - Be bold.
2. Leave 'creativity' to the bad designers - This is not the place to do something different. If a convention exists, use it.
3. Location, location - Be in the right place.

There are more, but that's my top three to creating successful signage (don't forget that icons on the web are signage and when designing them you are designing a signage system, like it or not.

So, what about signage systems?

Well, I'm not going to get into that for this article (you'll have to wait for the book for that one). Signage systems are as important as the individual signs. Collective meaning and overall association are the elements that make signage systems work (next time you're in an airport, have a look at the signage system!)

One last thing...

Be sure to check back over the next couple of months for updates on the book, which will include a chapter on semiotics and icon design. It'll probably be self-published initially (with a pdf download and options to buy a bound full-colour book) and be available here for a modest sum. Oh, and it's a got a working title of 'Five Simple Steps on Design'. That should give you an idea of what it's about :)

Comments

Commenting is not available in this section entry.

I'm a graphic designer from near Cardiff in the UK. I've been a designer for over ten years now and primarily work on the web. I'm still partial to a bit of print every now and then though. I used to work for Agency.com in London as an Art Director before working as a Senior Designer for the BBC in sunny Cardiff. This was all before I took leave of my senses and formed my own design consultancy, Mark Boulton Design Ltd.

I've got a thing about grids and typography and occasionally ramble on about them to anyone who will listen.

Mark Boulton Design

If you're after simple, clean and effective web design; let me know.