Mark Boulton

Semi­ot­ics, loosly speak­ing, is the study of signs. Simple enough. What becomes dif­fi­cult is defin­ing what a ‘sign’ actu­ally is. 

When we think of signs we think of the things on the left there don’t we? We think of some­thing visual like a sign­post. But, ‘signs’ are made up of many dif­fer­ent com­pon­ents — words, sounds, body lan­guage and con­text — all of which com­bine to cre­ate a visual lan­guage which help us under­stand some­thing, be that the way to the beach, or if some­body doesn’t really like us the first time we meet them.

What this art­icle isn’t about

This art­icle is not about semi­ot­ics. I’m not going to go into great depth about it as it is such an inde­pth field I’ve barely scratched the sur­face over the past few months. What I am going to talk about is the usage of semi­ot­ics in Inform­a­tion Archi­tec­ture, Way­find­ing and Icon design for the web. It’s a big sub­ject so this will prob­ably be an intro­duc­tion to some­thing I will cover in more depth in a chapter of a book I’m cur­rently writ­ing (more about that another later).

Start­ing at the beginning

We’ve estab­lished that semi­ot­ics is the study of signs, and signs can be made up of all sorts of stuff like lan­guage, pic­tures, body lan­guage etc. but what does all this mean in a prac­tical sense? Well, it might help to give you a brief over­view of the field of semi­ot­ics, then go into some of the the­or­ies that help make up it’s core.

Mod­ern day Semi­ot­i­cians, not only study ‘signs’ — it goes much deeper than that — they study how mean­ing is formed. They study how people first of all inter­prate a sign, how they then draw on cul­tural or per­sonal exper­i­ence to under­stand a sign. In that sense semi­ot­ics is about com­mu­nic­a­tion (see the par­al­lels with design?).

There are three main areas of semi­ot­ics; the signs them­selves, the way they are organ­ised into sys­tems and the con­text 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 Amer­ican philo­sopher recog­nised as the founder of mod­ern semi­ot­ics. Peirce was inter­ested in how we make sense of the world around us and in this sense was less con­cerned with the lin­guistic aspect of semi­ot­ics pion­eered in the early 1900’s by the Swiss pro­fessor of lin­guist­ics, Ferdin­and de Saussure.

Peirce pro­posed that signs could be defined as three cat­egor­ies; Icon, Index and Symbol.

1. Icon — An Icon sign is a sign that resembles some­thing, such as pho­to­graphs of people. An icon can also be illus­trat­ive or dia­gram­matic, for example a ‘no-smoking’ sign.
2. Index — An Index signs is a sign where there is a dir­ect link between the sign and the object. The major­ity of traffic signs are Index signs as they rep­res­ent inform­a­tion which relates to a loc­a­tion (eg, a ‘slip­pery road sur­face’ sign placed on a road which is prone to flooding)
3. Sym­bols — 

A sym­bol has no logical mean­ing between it and the object. Unfor­tu­nately 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 sym­bols which may help explain the dif­fer­ence are flags. Flags are sym­bols which rep­res­ent coun­tries or organ­isa­tions. Again, the cros­sover to design and brand­ing is very evid­ent in these signs. 

Saus­sure how­ever pro­posed a sim­pler struc­ture of what a sign is:

1. a ‘sig­ni­fier’ (sig­ni­fi­ant) — the form which the sign takes; and
2. the ‘sig­ni­fied’ (sig­nifi?) — the concept it represents.

For Saus­sure, a sign is the com­bin­a­tion of the two. But, what does this all mean in terms of the web? 

Semi­ot­ics and the web

The web is full of signs. Think about it. 

Most users want to accom­b­lish a task on a web­site, in order to do that they have to nav­ig­ate to the right place. In order to do that, they have to fol­low signs. See? 

Not only visual signs either. Let’s con­sider Inform­a­tion Archi­tec­ture for a moment.

IA is a field of web devel­op­ment con­cerned with the organ­isa­tion of inform­a­tion. 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 con­tin­ued, ‘I make lists within lists’. Sounds thrill­ing doesn’t it? We went on to dis­cuss words and how they effect what she does.

‘Words mat­ter’, she said. ‘Prob­ably more than any­thing. You can have a bad design, but if the words are right and in the right place, the user will gen­er­ally find what they need.’

The con­clu­sion from this con­ver­sa­tion was that words are also signs on the web. The right word in the right place — isn’t that what nav­ig­a­tion is all about? Con­text. Let’s move now into some­thing a little more visual.

Let’s take the example of design­ing an icon sys­tem for an online applic­a­tion. The par­al­lels to soft­ware design are obvi­ous — well designed GUI’s have pretty good icons, or should I say signs. So what should you do to make these icons under­stood by the user?

Here’s my top three:

1. Be con­spicu­ous — Be bold.
2. Leave ‘cre­ativ­ity’ to the bad design­ers — This is not the place to do some­thing dif­fer­ent. If a con­ven­tion exists, use it.
3. Loc­a­tion, loc­a­tion — Be in the right place.

There are more, but that’s my top three to cre­at­ing suc­cess­ful sig­nage (don’t for­get that icons on the web are sig­nage and when design­ing them you are design­ing a sig­nage sys­tem, like it or not.

So, what about sig­nage systems?

Well, I’m not going to get into that for this art­icle (you’ll have to wait for the book for that one). Sig­nage sys­tems are as import­ant as the indi­vidual signs. Col­lect­ive mean­ing and over­all asso­ci­ation are the ele­ments that make sig­nage sys­tems work (next time you’re in an air­port, have a look at the sig­nage 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 semi­ot­ics and icon design. It’ll prob­ably be self-published ini­tially (with a pdf down­load and options to buy a bound full-colour book) and be avail­able here for a mod­est sum. Oh, and it’s a got a work­ing title of ‘Five Simple Steps on Design’. That should give you an idea of what it’s about :)