Icon Design Formulae (or “Format”)

A Ramble on Designing the Learning Icon™ Graphics

In their book, Pictograms, Icons &Signs – A guide to information graphics Abdullah and Hubner offer a graphical formula to the design of pictograms for information that meets my “lay-person’s” opinion developing over some years of using such devices and the need of my current project.

Although they describe their graphic signs as pictograms, I am satisfied that the flexibility of the Learning Icon™ concept allows for the use of pictograms, icons, thumbnails, videos, or whatever else one might choose to represent the information of learning opportunity contained within (if acting as a Learning Object) or linked to (if more an action-on device).

Technology and graphic-editing-suite experience will affect the quality and design of graphics, and the personal choice of graphic suite will affect the interoperability of designs between designers, clients, and learners alike. For this reason, and to avoid bogging down in the detail within this project the following design procedure is employed using Microsoft Office products, which are accessible across the client organisation:

1. Icon Design Matrix. This MS Word document contains a table with design notes for each icon required (extracted from the existing texts) and prototypes sketched in my favourite graphic suite and imported as small JPEG files.



2. PowerPoint Icon Design Space. This MS PowerPoint slide allows the prototype pictograms to be developed individually while using common graphical parts to make up the required symbols. It is not important to save each step as Step 3 (below) calls for the transfer of the finished design to its own slide show.



3. Individual Icon Space. Each icon drafted in the PowerPoint Icon Design Space is copied and pasted into its own slide show. Here, it is manipulated into its first-stage prototype of the 3D-style card or paper Learning Icon™, which doubles as the repository for the graphic. The PowerPoint icon is copied and pasted as a PNG format image, which is far more scalable than PowerPoint graphics once they contain line thicknesses and fonts!



4. BCD Prototype. The finished PNG graphics are shoe-horned into the prototype BCD Aide Memoir drawn straight from the extant text-box-based version (Jan 07). (This process originally omitted the PNG format and the time taken to reduce the scale of the PowerPoint graphics was burdensome – this element of the process has therefore been delayed).



5. Product Prototypes. Although not essential to the project, for some light relief a number of product prototypes are being developed (such as the 3d-style Learning Icon™). These are only tinsel, but serve to demonstrate the Learning Icon™ as being a far wider strategy than to be only a graphical learning device on a screen. (See the Conceptual Model – link open in a new window).

Abdullah and Hubner detail some useful design formatting guidance for the creation of pictographic signs. These include the standardisation of size, line width, colour-coding, etc. It also includes a process of determining the sign’s (in the broadest semiotic sense) intended function. This is in-line with the process I have developed from other references meeting a little trial and error. However, their format is concise, meets the needs of this project’s prototype Learning Icons™, and fits in a smaller space than the journey toward discovery my dissertation gives to the subject of getting the message right.

Should I cut my dissertation text? No. The process is important enough to qualify as essential to the development of a Learning Icon™. There’s little point in determining to design a set of icons to find later that they are undecipherable to the clients!

Pertinently, I have already drafted a passage or two on the need to instantly recognise some signs but that others may need to be learned with no detrimental effect to the client. I subjected my wife to the (poorly-designed, I feel) “Baby Nurse” pictogram illustrated in this blog at Semantics of icons & pictograms. I’ve repeated it below for ease of reference.

Anyway, my wife was shown the icon without any reference and announced it was someone (possibly a nurse) with a broken arm. When I showed her the accompanying sign for babies, she pretty quickly corrected her guess to being “someone with a baby – it must be a baby nurse”. A day later, after a torrid day at work, my wife came home to the same icon being shoved in front of her nose. “What was this?” I demanded. “The bloody baby nurse, now let me get in!”

Okay; not the most scientific primary research, I’ll grant you, but it shows me that the “burden” discussed between my friends and I (and in my references) on the learner having to learn a new sign is only small. Skill fade, or a lack of familiarity may impede but a short text label should jar the memory should it lapse?

Consider road traffic signs, the Highway Code, and your driving test - sorry if that brings back bad memories but, hey, that's science for you. You probably zip about the national road network subconsciously deciphering signs such as "uneven road surface" (that should be double humped bridge), "wild animals on the road", and "level crossing with a gate ahead". These are not straight forward signs until they are learned. Part of the theory test is to demonstrate your knowledge of these signs significance. It doesn't make you a bad driver; it makes you a better one. Loose arguments, but it's late and I'm sure you're intelligent enough to work out where I am going with this yourselves.

Actually, here’s where Abdullah and Hubner and I part, or the Learning Icon™ demonstrates that it really is a unique application in colliding worlds brought together by developing learning theory and technology. They claim a pictogram should not be accompanied by words: that it should be well enough designed to be instantly decoded by the observer (yeah, “baby nurse”). What they fail to discuss fully is that their examples need to be learned: that the language of symbols is not a natural one, though they do mention "symbol dyslexia". However, why kick the messenger; if a text label will assist the learner with recognising the meaning of the Learning Icon™ why not let it?

On "symbol dyslexia", it reminds me of a piece of on-the-spot-research conducted for my 1st Year. Two friends of mine with different forms of diagnosed dyslexia examined my embryonic ideas of Learning Icons™ and disappointed me in their declaration, "it's the white space, Pat.

It wasn’t “symbol dyslexia” but the white space between them that caused some difficulty. Learning Differences must be addressed (not necessarily within the body of my report) but I owe my colleagues the investigation of whether learning differences need result in greater care in the icons’ design – especially as I have adopted the use of text in them following earlier research to involve the client group with their design.

Participants were offered a choice of 2 icon designs for common and not-so-common concepts from the project trauma topic. For example, a symbol developed to denote “Airway”, or the letter “A”. Almost without question the group sample of 25 opted for the “A” as is convention. Similarly “BLS”, “BCD”, “CUF”, etc. (Don’t worry what they are, they’re just further examples of the preference for letters in the symbols).

This avoidance of learning differneces aside, Abdullah and Hubner's design guidance is comprehensive. Here’s a synopsis toward how I will modify my similar approach to meet what is obviously a clever employment of simple principles (remembering these are for their idea of pictograms such as “No Smoking” and road traffic or safety signs):

1. Conception: list the themes to be designated
   • Directions
   • Warning
   • Request
   • Ban
   • I would add “learning” here


2. Design:
   • Overall format (for Learning Icons™; icon, thumbnail, video, animation, etc?)
   • The bearer (the screen, or folding card for classroom work, or an item of equipment)
   • Design grid: relationships between angles, shapes, and space
   • Line thickness: Narrow ½ unit, Standard 1 unit, Thick 2 units
   
   
   
   • Colours to be used and how they are to be used
   
   
   • Shape selection (possibly according to aesthetic or existing syntax – warning triangles, etc.
   
   
   • Cultural neutrality
   
   
   • Lettering
   
   
   • Abstraction: reducing the ideal idea into its simplest but most easily recognisable form to give maximum impact
   
   
   • Pictorial rhythm and balance: straight and parallel lines may be mathematically correct but aesthetically out of balance. This can cause a distraction.
   
   


3. Pictorial language: what is in use already, what conventions exist, what needs to be new?

Added to this, I think they allude to it, is the overall consistency of the designs between related icons (those employed with one another). Consistency assists cognition, of course.

Once the symbology has been decided and the field (background) on which it sits has been determined the icon should come together. An earlier illustration of what I believed an icon should be is to the left. I don’t think it to be more than 1mm away from the descriptions of Abdullah and Hubner, and remains the conceptual design key of my project Learning Icons™.

Abdullah and Hubner also include a useful insight into building graphical symbols from lines and circles. This is a technique I have used on a number of occasions and it is again good to see that where I lack formal training I enjoyed a great deal of quality art tuition during my schooling and the company of an exceptionally creative family group.

Summary

Again, the usefulness of this book find has been immeasurable and well-timed. If I had found it earlier then I would undoubtedly missed out on, or skimmed over a depth of knowledge about the graphical design of icons (and pictograms) toward developing effective Learning Icons™ to test. What good would icons like the "Baby Nurse" above be where I am to measure learning? This is no mean feat in it's self, so distraction of my learners through bad design could be a disaster. Similarly, if the Learning Icon™ is to take off within my organisation for the routine delivery of BCD, then the project needs to look the part - to look and prove to be effective.

I make no apology then, in this my MSc project toward eLearning, that I have delved into and trawled the world of semiotics and graphic design. E-Learning is very visual in its approach, especially that delivered by Internet and CD/DVD-ROM, etc. What good is page turning on a screen when there can be an alternative to bulky texts in one layer, or another - deeper one? For page turning, see the BCD instructor resource (pilot e-Learning example) at the link. In fairness, this has been modified of late and is beginning to appear much more of a benefit to learning than it did on my first preview. The page screenshot below shows that visualization of fracture images helps in the recognition of broken bones on a casualty.

As it stands at the moment, I am using Learning Icons™ on the upper level of the learning design from which learners delve into a larger Learning Object. With care in design and a slight cultural change, why mightn’t the icons go deeper to new levels? Why use text?

The image below is a mock-up of implementing the Learning Icons™ (in their simplest "dumb" form) within the same eLearning package. There is still a bulk of text, which can be reduced using video, animations, Learning Icons™, or other visualization technique.

More on icons replacing text later...

....

Learning Icon™ - Why an Icon?

A Warm Up

This week, a great friend of mine who still allows me to speak of Learning Icons™ took a meaningful breath and leaned across from his comfortable chair over our tea and toast. With a concerned and sincere look on his face he quietly asked, “Why icons?”

I realised that I have not really explained that in this blog although I do have many great references regarding visualizations in learning (see Google; it’s about the only search string that turned up trumps).

Now, I know there may some disadvantages listed for icons, but I can’t help but notice these disadvantages are very pertinent to icons appearing in your software menu bars but I believe the same cannot apply solidly to an icon that performs a higher function than denoting a button. “Press me here” just doesn’t cut it along side a “check out this concept” Learning Icon™. So I’ll stick to the positives while blogging in here, if you don’t mind. If you want some icon bashing try out the “Problems With Icons” dit at this link. But do remember the function of the Learning Icon™ really is different.

There’s loads of great information out there on semiotics (the science of signs and symbols), syntax, linguistics, design, visualization etc., but I don’t want to bore you with references and research here on this page.

My aim is to help you to understand, or to refresh your opinion, that icons can be used in learning because it’s logical, natural, and all round a great idea and that common preconceptions of icons being only virtual buttons on a screen are worth only second-hand pants*.

Back to Icons Being Great

Icons are present not only in our everyday graphics user interface (GUI) such as the MS Windows operating system, Web pages, or other software, but all around us in advertising, on domestic appliances, in our cars, on the back of coaches, on service station signs, in airports, railway and bus stations, in the back of the settee (!!!), and in far more places than I care to list because my fingers are tired already.

Icons convey meaning easily. Verbs are difficult to get right it seems, but nouns seem easy. Icons also work across culture and language to some degree, though without care in design there may be confusion out of context.

Icons can also be placed in sequences to convey wider meaning and, like English words; their meaning can change subtly according to their text or syntax. [Intended IMAGE (gents sign and sign for a man) – as in people carried in a lift].

Also, in the case of people with learning differences or other cognitive reasons why reading text can be difficult icons can be easier to interpret or learn. Words can change meaning within sentances according to their text or context, but icons can more readily change their meaning by changing their shape, colour, or other style signature.

Icons can save space where text could otherwise eat it up and in repeated appearances icons are more acceptable than repeated words or sentences where we get so hung up on grammar rules we can’t always sit easily when the rules appear to have been broken. (How many times have you read “had had” in a book and had to re-read it to ensure the meaning was correct?)

Icons are visualizations, which are used in everyday life including education and advertising. Both areas affect the way we behave or think – a great advantage to girls shopping or still studying (don’t get all PC-uppity, there’s good research to suggest women are advantaged over men in these skills, o who’s to say it’s not due to a better reception to visualization?), which must prove something.

Of course, like visualizations, icons can date quickly. A common example from reading is the floppy-diskette GUI icon denoting, “to save” a file. I can’t use floppies at work and some of my younger colleagues (I’m sure) giggle coyly or snigger in a demeaning fashion as I pull out or even mention a floppy di… See? You’re off on that already. Similarly, if we were using Learning Icons™ in eLearning, icons will need to be kept up to date with the course content, overall presentation style, etc.

Icons are also easy to operate if they are interactive. They can have roll-over effects applied to them and they can be dragged and dropped around the screen in formative and summative assessment or in simple “copy me” activities, etc.

Good, or well-designed icons may even be easy to recall from memory. We are made in a way that allows almost instant recognition of outlines, colours, and key shapes because we used to need to rapidly know if the shape in the bushes was something we wanted to run after or run away from. A delay in either choice could spell out either hunger or supper for either party.

Icons and their component symbols can be concatenated within sequences, algorithms, or other ontological layout structure.

The speed of recognition of well-rehearsed icons can even speed up the signalling of instructions to people. Try explaining the workings of a washing machine to a bloke! No, you’re right forget it. Just add a couple of simple-to-workout icons on the dial and off he goes proudly wagging his tail because he finally got something right – if he didn’t mix the colours with the sensitive whites…

You don’t Believe Me? Try and Example

Seriously, paint the following onto a large board and flash it in front of a large executive car as it is driven down the motorway, “Slow down, there’s a road-rozzer around the corner flashing lazers at those exceeding the speed limit”. The car is travelling very fast.

This particular type of car will likely be in the middle lane and being a pedestrian on a motorway can earn you as many points as speeding, so let’s keep this in our heads now, okay? Anyway, if the text is large enough for Mr BMW-driver to read it he’ll either misinterpret the message, ignore the message and cuss you for being a pedestrian (“humf. Bad enough in the bloomin’ city, never mind on my motorways”), or take so long trying to read the thing and then work out what it means he’d be long past the road-rozzer before, behind a furrowed brow would come an expletive used after the watershed on Channel 4.

Next, use an image. There’s an example alongside here. In case it doesn’t load for technical reasons or because you still have dial-up it’s a speed-trap lazer. Now you know what it represents you’ll probably critique it as being totally crap, but at least if you saw it in another page of this blog you’d like as not recognise it? Well, Mr BMW driver would be 90% certain to misunderstand this, or ignore it if he couldn’t work it out in the context of the motorway and his excessive speed, or he can just make out the outline of a panda car down the tarmac. Not much good, this icon, then?

Ah-ha, I say. How about the one here? It’s words. It uses (UK) motorway sign colouring of blue with white surround making it attractive as an official sign. It’s written in similar white font, too. I reckon it’d work well. If you don’t agree, how about the one below. It’s got a red surround and cautionary yellow background or field with black contrasting font. They are the same words.

I’d hope you’d agree that one of the last two signs is likely more effective than a great speech-representative text?

Punch Line

So, are the text signs still icons? Why not? Are words and letters not just symbols, too? What’s the point here, then? I think it’s that I’m asking you to re-open your mind on what an icon is like my friend who asked, “Why icons?”

I hope you’ll have repeated my friend’s, “Ah, I see.”

Summary

Icons are great at imparting information and can easily be employed in learning as visualizations and as Learning Object-style devices in the form of Learning Icons™.

Icons don’t have to be full of symbols or made of complex images suited to larger thumbnails (becoming all the rage) but can be text-based, too.

Icons can be used in sequences to form a wider meaning.

Footnotes

*For International visitors. Pants are not trousers or leggings, strides, or Jeans but underwear. I refer, of course to soiled pants worn throughout a hot Summer’s day after a night on a curry following drinking water from a dodgy tap or fawcet / faucet, or drinking far too much real ale**).

**”If you feel the bottom is dropping out of your World, drink real ale and feel the World dropping out of your bottom***”.

***(USA) “Ass”. But then the joke’s not so funny, which is why Brits think the Yanks have no sense of humour. It’s unfair, I know, but the evidence is plain to see.