Semantics of Icons and Pictograms

According to Abdullah and Hubner (Pictograms, Icons, and Signs) the Learning Icon™ is not necessarily an icon at all. In fact, their descriptions of a pictogram are probably more in keeping with my current designs being tested for this study. (Book cover from Amazon).

Both icons and pictograms can form signs, however, and that seems to be the important bit so not all is lost! Beside which, depending on what takes the designers fancy with the Learning Icon™ and its mode of operation, I’m sure it will cross all boundaries as seen fit.

There are commonalities in their design but their definitions vary. Icons are described to be almost whimsical in nature (like ‘emoticons’ in MS Messenger) while pictograms impart information in the serious way of the road-traffic or hospital department sign.

Pictograms

Abdullah and Hubner use the Collins Dictionary definition of pictograms: “another word for a pictograph”, which is, “a picture or symbol standing for a group of words…” Herbert Kapitzki (Prof Visual Communications at the University of Arts, Berlin) is referred to as going further, “A pictogram is an iconic sign that depicts the character of what is being represented and through abstraction takes on its quality as a sign.” This meets my interpretation, if I am honest. Kapitzki sub-categorises pictograms as:

• Iconogram: “An iconic sign, which as an illustrative representation emphasise the points in common between the signifier and the signified”.


• Pictogram: ”An iconic sign that represents complex facts, not through words or sounds but through visual carriers of meaning”.


• Ideogram: “Corresponds to the sign as a symbol, which relates to the object or concept referred to independently of any formal identification with it”. (Apple Mac’s apple logo is used – it’s an apple but means the computer company and its name, “apple computers”.


• Logogram: “Conceptual representation like writing. A visual referential linguistic sign that does not take the phonetic dimension into consideration”. The use the AEG logo.


• Typogram: This is suptly different to the Logogram. “Typographical representation. A sign, also a composed sign, derived froma written repetoiur such as the alphabet”. Think of the camera and photocopying giants, “Canon”.

He also lists, “Cartogram” (topographical device), “Diagram” (you guessed it, but he makes it sound complicated), and “Phonogram” (signifies sounds like a whistle).

Poor Examples

Just as you believe Kapitzki to be a sensible bloke Abdullah and Hubner include a section of his pictograms for use in health and social services. Check these out and comment whether you feel them to be a great as I do:

Is this a sign for us to see the black nurse nursing a broken arm? No, it’s to signify a baby nurse (a nurse of babies). “Oh, yeah.” You declare…

A couple or three points:

1. She’s a “she” (tight uniform that emphases the breasts and a girle-nursie hat). That’s just so out of date now. In fact, it doesn’t meet the University of Portsmouth’s equality guidelines and it makes my girle-nursie wife laught, too. Tch.


2. You need to recognise the sign for babies before you can work this out.


3. Once you know what it is it becomes more "obvious"

It is encouraging that even a poorly conceived or illustrated sign can be learned and then become useful. Many poorer signs are placed (uselessly in some cases) beside long descriptions of text.

The next image (No. 27) is a star. As a clinical person I worked it out from my experience of anatomy and physiology of the ear, and some good luck. Actually, I had to read it in the book text. What’s it signify?

Ear, nose, and throat. Hmm. Sometimes the slavery to a style is a barrier to meaning, I say!

I like these two. The top one (No. 20) is obviously the place where magicians perform levitation sketches and (No. 23) is the doctor’s special place for assaulting their patients.

 

And, finally. Of course the person depicted on the left (No. 9) is a doctor and the one on the right (No.10), a nurse. I mentioned before how icons can go out of date? Well, here’s a prime example of sexism that used to be logical deduction. You younger women don’t know how grim it really used to be. Anyway, enough Kapitzki-bashing.

And, just because it's funny (thanks, Nick) here we are returning to toilet humour with a Swiss toilet sign. Culturally challenging? Perhaps in some places this would be funny. In a Mosque or Church...probaly enough to start a fight.

Colour Meaning in Pictograms

We know colouring is affected by culture and syntax of meaning, but where I am currently using the following colours in my Battlefield Casualty Drills prototype others may use them differently.

• Red – danger or extreme hazard


• Amber – caution, there may be a danger


• Blue – standard instruction or event / equipment


• Green – direction of flow in an algorithm, including start points

Originally I had planned to utilise colour backgrounds (I call them fields) to denote the varying elements of the medical subject: airway, breathing, circulation, etc. The problem quickly arose, however, that I needed more colours than I could reliably claim to be correctly perceived by all my clients: some of whom are colour-blind to some degree. I chose colours that, when rendered as greyscale, still showed contrast between them and I also elected to de-emphasise the importance of their colour,; the meaning of their symbols being the primary indicator of where they may sit in the order of things. Ontological order is indicated by the vertical space on the page layouts as most of the information is formed in algorithms that run down the page as with a gravity.

Coincidentally, this layout of hierarchy raises a cultural problem: up to down, left to right. Not everyone writes in these ways. I discounted the issue for now as the majority of the clients are English-aware, Western culture-based, or otherwise familiar with the chosen domestic syntax. Back to colours and icon design.

Examples of regularly used colours

British motorway signs have a blue field with white symbols infont. In Cyprus they are green with white while primary routes have the blue and white mix. The photograph below shows a Cypriot primary route sign. Interestingly, the colour used for sites of touristy interest are brown as they are in the UK. Cyprus was a British colony until the 1960s and still hosts two British Sovereign Base Areas and a large number of British Ex-pats (ergo, the bilingual element), so I would have expected the signs to bare British rather than Greek codes?

It seems that colour variance of meaning is both standard (stop signs all over the World are red) and local (the road signs described above). It must be difficult to get a World standard then, where the adaptation of a colour scheme perceived to derive from the West may not sit well with many countries away to the East, who have their own colour cultures and may take unkindly to having Western values imposed upon them.

That being said, I recall road signs in Saudi Arabia, Thailand, and Canada to follow the white with black, green with white, and blue with white themes. Each of the airports employed yellow and black icons on their signs. In India the signs seemed to follow local dialects. Hey! Variety is the spice of life, don’t you know, but perhaps we can roam toward a common standard after all?

The Berlin Transport Services use the following colour coding

• White on blue field = disabled facilities.


• Black on yellow field = denote general directions (like airports).


• White on red field = symbol of measures to counter dangers (e.g., fire extinguisher).


• White on green field = denotes protection from danger, like running away through doors (fire exits).


• White on dark-grey field = denoting companies.

In a learning software, I don’t think it matters too much about what colours are used as long as it’s consistent throughout each software, though they should fit in with the cultural perceptions of the intended audience.

The same goes for shape. Most of those described by Abdullah and Hubner are square or circular. It all seems very formal – similar to the icons I have already demonstrated in my BCD work, which needed to demonstrate some formality for their bredth of deployment and to meet the needs of the organisation for which they were intended. They also match the formality of the style of pictogram or icon used across the health services. I think, again, this is where the Learning Icon™ and Learning Object trades with icons, pictograms, pictographs, and other visualizations in that there are great graphic freedoms for designers, but the client will most likely want something that goes with the flow.

Particularly encouraging parts of the Abdullah and Hubner saga is their acknowledgment that visualizations can:

1. Replace text


2. Include text


3. Impart meaning rapidly


4. Be easily learned if new to the user


5. Be useful cross-culturally (Berlin needed icons / pictograms on the transport system to accommodate the 160 different nationalities living there)


6. Have design rules (more later)

The book also outlines the previously surmised conclusion that icons can change meaning according to context or text, which Abdullah and Hubner describe as their environment. A "NO ENTRY" sign on a long wall or illustrated within a book does not have the same meaning as one posted on a gate or at the beginning of a route. In fact, the physical environment becomes a part of the overall semiotics of the sign.

Sequencing

My findings regarding the sequencing of images into enlarged meaning have been pretty solid. The book not only confirms this in the case of their icon definition, but also within the sign its self: symbols arranged sequentially to impart a concise meaning like name hieroglyphs in ancient Egyptian texts.

The example of a safety sign below is from www.hendersonsigns.co.uk. It combines a symbol of a person with those of a fire and a direction arrow - all in the same pictogram. This opens a great deal of opportunity to sequence icons as well as the symbols within them allowing for a far wider scope in their meaning and possibly the learning opportunities they might attend to.

Summary

Although I found this book late in the project I’m glad I did. It now amplifies what I have already discovered about icons and signs and formalises my thoughts toward their use as being ‘do-able’. The really neat bit is that it is full of crap icons, which is very encouraging for a novice designer like me that people pay for such poorly executed iconographic solutions.

1. Colour choice can be doctrinal but do not have to be dogma.


2. An icon (pictogram) graphic format is available to apply to the Learning Icons™ being developed for this particular project.


3. Even poorly composed, conceived, or designed icons can become recognisable / useful


4. Icon decoding can be environmentally dependent.

Couldn't resist this! ;)

From www.cartoonstock.com (click the image for the link).

Icons and Grammar

more to follow soon…

Cloud Watching

Have you ever stared at the clouds and seen faces, scenes, or other recognisable patterns in them? Perhaps you’ve had a go at ink-blots (Rorschach Inkblots)and had your psyche judged on the weirdness of the result?

The best willed Search results in a load of hocus-pocus around why we see what we believe we see in ink blots and clouds, towels hanging on the back of a door in the dark, etc., but there are proper foundations in the science of perception that allow us to rationalise our brain's desire to see what may not be there.

Think of a “first look, first kill” philosophy of fighter jets; then, on reaching a shared understanding with me, imagine an early human-type thinking they’ve just seen a leopard (or Sabre-Toothed tiger!!). “I think I just saw a puddy-cat”, as Tweety would claim. If this first impression, the initial perception was ignored the true encounter with the predating beast could be quite short-lived and end in a smelly deposit of cat pooh. However, if the early person-type took flight it may:

1. Escape predation.
2. Flush out said predator and make an informed decision to scarper.

So, perhaps we are attuned to rapid perception. It may have been a necessity. It still is, in reality. Taken in the broader spectrum of semiotics our rapid and correct interpretation of a look flashed across our lover’s or boss’ face might make a huge difference in our stress level for the remains of the day – or your married life. When driving, our recognition of hazards (whether advertised by signs or interpreted through experience or the environmental changes) is essential to our safe progression at the National speed limit. We learn to recognise some signs (signs in the broadest sense) and we instantly perceive threat (or stimuli) from others.

Applied to the design of icons for graphic user interfaces (GUI) the anticipation of what might be perceived as a way-marker, warning, or enticement must make the resulting graphics more successful in their rapid cognition and correct interpretation?

So, cloud watching is a good illustration of why we need careful design of out Learning Icons™ but not a cause of it. Cloud watching our GUI and Learning Icons™ will lead to a mix of interpretations and the idea is that they lead to only one concise meaning – unless they are context sensitive, in which case they still need to be concise but in their relevant setting or syntax.

If we consider that there are people for whom the recognition of a sequence of letters interspaced as words with individual and grouped meaning dependent on the context or text of their use then we can assume these people will be slower to cognate copy (text, print, writing, etc.) than the average or gifted reader. This group of people used to be considered to be a minority only because the majority of them dropped out of school into menial labour when compared to those with good reading and writing ability who went on to buy expensive houses in posh cul-de-sacs where the poorer-achieving majority were seldom seen (except on Tuesdays to take away the rubbish – but the interaction was pretty poor considering our achievers were either at work or still in bed on a day off, following a night shift, or when playing hooky ready for BBC2’s Wimbledon coverage).

I digress. Anyway, imagine we can appeal to these poorer reader’s sense of survival by providing icons that are deliberately designed to be either recognised easily – or learned to be recognised easily: to be quickly cognated? The problem is determining what will work best: simple uncomplicated iconic forms, or indexical pictograms? Do we propose what will work, or do we consult with the users and test the results until we either reach our Pot-Noodle (tasteless, maybe, but hugely successful, according to Ben Elton in, “Air”) or mediate a solution for most of the people most of the time?

This project is to explore the foundations of the creation of icons for learning, Learning Icons™. The icons need to be useful. They need to be placed in sequences, to have individual as well as group meaning that may change according to context or ‘text’. Their GUI design needs to be intuitive and fit to purpose across a range of users or within a specified range of users. There will not be a single Learning Icon™ design, I’m sure. There will be variety according to the need and ability of the user, the intention of the learning provider, and the fashions of design abound at the time of their development.

Let’s not forget, although some navigational GUI icons have been sustained for some 20-odd years, their actual appearance has changed quite dramatically. Yes, we had clothes 20-years ago, but our clothes are still clothes, as icons are still icons, but the technology behind textiles as well as GUI design has moved on along with our and commerce’s preferences, or fashion.

I tried a clothing analogy and chose not to use it originally as many of our clothing fashions are returning to their routes of the past as fresh ideas of how to cover our essential bits (or to accentuate them) continue to allude our designers. I also tried cars: same problem – although there are more bells and whistles and choices of trim and additional-cost technologies, they tend to still have 4-wheels (yes, 5 with the steering wheel) and a body shell, which although ‘modern’ is increasingly reliant on car shapes from the past – or the desire to have personal rocket cars in the garage during the 50’s and 60’s (1st Ford Cortinas and Consuls).

So too with icons. You don’t like my icon design today? Maybe, just maybe you will love them in 10-years’ time?

I bring this fashion point up because of my own challenged prejudices. I like uncluttered simple icon designs, so clever they work. They may take a furrowed brow at first, but once informed of their specific meaning in that specific context or ‘text’ you’ll go, “oh, yeah!” The fashion (thanks to greater processing power) is to have larger and more elaborate and, in the case of Microsoft Vista icon, beautiful pictograms: even user-activated animated or video-shoe-horned multi-media devices. Gorgeous.

I am therefore doggedly following my own preference in the visual design of my prototype Learning Icons™. It doesn’t really matter if they work; if the user agrees they mean what they should and seldom mean what they shouldn’t.

A caution though. I developed two icons to mean one or two rescuers (first aiders). I lived with them throughout their initial design and user-testing and loved them. On showing them to two new observers last week, one (Simon, you git) said, “I know what that one is before you tell me, Pat. It’s an ‘i’ for ‘information’.” I looked down at my paper model of a Learning Icon™ that could be used in a face-to-face learning environment, all beautifully crafted, colourfully printed, and diligently cut out to stand up on its own, icon to its face and textual explanation of its meaning and context within. He was right. It was not a stylized body with a head deliberately disembodied, but it was an ‘i’ for ‘information’.

What was interesting was that the single-person / rescuer icon had been derived from the 2-rescuer and multiple rescuer icons developed earlier. I had missed something through my own clouded perception formed from habit over only a matter of minutes. I had learned what the "i" had meant as representing a person and accepted the single "i" as such, completely ignoring my culteral learning to see it as the "i" of information.

No matter how clever you think you are at this game (and I am getting to be clever) I think that, while the meaning of an intended icon design is pre-ordained by the matter of its being designed to denote an aspect of the user’s learning, it will seldom mean the same thing to everyone all of the time. This results in three findings (a good ol' traditional semiotic triad):

1. Icons should be labelled (at least when first encountered)
2. Icons need to link to a glossary.
3. Icons will still never mean exactly what you want until you explain what they mean.

You have a furrowed brow, my casual lay-reader. And you, the experts! You're nodding knowingly, I can tell.

Here’s an example. Think of the sign for a male toilet (not a toilet with a willy, but a toilet, ablution, or washroom designed for gentlemen and esquires to empty their bladders and bowls in – into toilets, not onto the floor, at least outside London and Glasgow).

The sign you will think of in the UK, and across much of the World will be of a symbol for a man; a bloke. It may have additional attire such as lederhosen or a Trilby hat, but it’ll essentially be a bloke.

What’s it actually mean? It means, “man”. A girlie one with a skirt/dress would mean, “woman”. Male or female. Yet, in these days of open sexuality and hedonistic desires to express cross-gender freedoms or to avoid fungal infections between testicles and thighs, neither sign can actually be relied upon to represent the silhouetted shape of a man or woman anymore. That aside, (a sigh from the most Politically Correct among you) is the fact that the symbols do not indexically represent a toilet or urinal. They have been learned to represent the appropriate washroom / toilet to use according to our society’s current understanding of a gender type-cast.

My argument? The design of icons is, perhaps, less important than we think. Perhaps, in the same way we recognise a dress, car, or toilet door sign, the icon will need to be learned at some point in our educational journey through time and space. Then the challenge is to make that learning process as efficient as we can so as to avoid overly burdening our busy learner with learning anything much more complicated than the subject they’ve chosen to study in the first place.

This is my argument for simple, clear, and concise use of shapes in the icon design. You may differ; you may illustrate to me how wrong I might be. At this moment though, I am content this is the immediate solution to staying on track with my exploration of the Learning Icon™ as a learning device in eLearning as well as in the classroom. I don’t want to be overly-burdened with any more on the aesthetic design, but only now on the cognitive and GUI design of the icons.

Prettier icons can be left to the graphicist professionals. May I be one, one day, too.