Semiotics of an Hamburger

on

concept

“To learn a language is one of the most difficult things that we can do in our life, we learn our native language when we are so young that we do not remember the effort that we took to do it, and growing up this effort becomes greater, so a good design should minimize this effort, make the object designed as small as possible on the shoulders of the user. With an appropriate aesthetic level of course.”

In the last few months, while working on a complex software platform, I started to think about the issues you can come across  if you enter a project at an advanced stage. The obvious questions were – Why has an object been placed in that position? Why did they choose this narrative? What’s the user journey? And so on.

What this really made me think was how difficult could it be to create a unique language that allows the user to move safely and freely in a software enviroment. Especially if the basis of this language was not defined.

After all a good User Experience could be defined as the creation  of a language (or a or a bunch of conventions ) simply to be read and learn’t.

It could be self-explanatory or may need an explanation ( a kind of user manual). The important thing is that when the user understands the logic ( or maybe it’s better to say  the grammar) of which the system is based on, they should be able to use every function because the principles always remain the same.

For example, Philippe Starck’s  Juicy Salif at first glance seems to be very strange and  – I’ve often seen this situation – the user is not even capable to understand the logic behind it.  But as soon as someone explains to us it’s nature, in the instance of Juicy Salif it’s a lemon squeezer, it soon becomes clear and obvious what it was created for.

image

Once you know the rule, it become simple   to master it.

A software platform can be really complex ( or complicated, it depends on how it’s been designed). For sure it will need more explanation than the Juicy Salif to be understood, but there is something that can help us: ICONS.

Ch. S. Peirce  (1839-1914) defined three category of signs:

INDICES:  Have a physical proximity with their cause, like the smoke of fire or glass fogging up, the redness of a face etc. They are not intentional, and they are natural, they are not a human construction or a product of culture.

ICONS: Are products of culture, they have a close proximity to the object they represent, such as the silhouette of a man or a woman to indicate if the toilets are allocated for male or females, or the stylized image of a pair of headphones to indicate music on a smartphone

SYMBOLS: Have a conventional nature and stands for, or suggests an idea, visual image, belief, action, or material entity. The expression is associated with giving a value to each sign, such as writing a system or some emotions of a system.

In User Interfaces these last two categories are the most used, and are often confused with one another that create problems that are not very simple to solve.

An icon should be chosen carefully. There should be a close relationship between the sign and the meaning, and  above all, it should be univocal, and should never change or shift meaning. Inside the same system ( or software enviroment if you prefer) I can’t use the same icon, nor an icon that is visually similar for two different functions. If I did this it could cause confusion, giving the user a bad UX.

But it doesn’t end there. With the further development of new system functionalities,  icons are no longer enough, because often they lack physical reference to the function itself or because the function is so complex that icon required would be too complex to be undestood by the user and the strength of icons are their synthesis. Normally you can come up with a solution by affixing a label next to a “partial icon”.

The decline of Skeuomorph (emulates the aesthetics of physical objects) should be blamed for the inability to convey the large amount of new “immaterial” features and symbols that technology has brought to us.

“THE STRENGTH OF ICONS IS THEIR SYNTHESIS”

This means that you are giving a meaning ( we should use the words signifier and signified  they are of course more correct but I think it’s simpler this way, this article doesn’t pretend to be academic…) to a sign – and it become a symbol – and with the use and the time it become common knowledge, an “icon” in the common sense given to this word. A sample of this process is the menu` icon, the “hamburger” three overlapping lines that, if you use a lot of imagination may resemble a list, but that is so generic and  detached from visual references, that it’s understandable only thanks to the use.

image

Moreover icons hide a further pitfall, which can be a resource or a trap, and it is the translation of meaning, for example you can borrow an icon representing a calculator to indicate the “calculation” although it does not include a visible calculator but in this case the shift is quite simple and “natural” they have common elements that help our brain to connect sign with the meaning.

But if you use – for example – a clock to represent a quick choice, you’ll have a sign and a meaning with a weak bond, it’s ambiguos and without a label that explain what it’s supposed to do, could be really difficult for an user to understand what the hell does mean that “icon”. Even if the user is familiar with the software/website itself.

Ok, all this stuff to say that is important to choose wisely which icon or symbol to use, could be helpful to give legend that helps the user to learn the language of the system so it will be simple to recognize them if you find them in other parts of the system – like Android’s settings menu`, in which every icons has it’s own label that allows the user to associate with each icon with a function, so he can use the quick settings even if they have no label – we should be the most clear and unambiguous possible, we should not use similar icons for different functions because we force the user to a bigger cognitive effort thereby slowing down its user journey, and above all, icons or symbols should not be mere decorations, aesthetics, but they should be consistent with the context and offer real help in using the software.

And if possible, always rely on shared and common conventions, do not try to create – for example – a new different icon for “e-mail” because it forces the user to “learn” a new language, it slows him down and it forces him to a cognitive effort that probably he will not want to do. you will create, with the icon, also a  frustration in the user that will not be able to locate the desired function, and probably, if he had to choose,  he would prefer another system more immediately readable through common knowledge (there are some cases in which it’s better to be criptic, but I wont speak of them here).

To learn a language is one of the most difficult things that we can do in our life, we learn our native language when we are so young that we do not remember the effort that we took to do it, and growing up this effort becomes greater, so a good design should minimize this effort, make the object designed as small as possible on the shoulders of the user. With an appropriate aesthetic level of course.