Moving forward despite COVID-19 - An update from Codeweavers' CEO

Semiotics of a hamburger

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.

There were a few obvious questions such as "Why has an object been placed in a certain position? Why did they choose this narrative? What is the user journey?" And so on.

This made me think about how difficult it could be to create a unique language that allows the user to move safely and freely in a software environment. Particularly 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 bunch of conventions ) simply to be read and learnt. 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 users not capable to understand the logic behind it. But as soon as someone explains about 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.

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 categories 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; 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 universal, and should never change or shift meaning. Inside the same system (or software environment 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 they often lack physical reference to the function itself or because the function is so complex that icon required would be too complex to be understood 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". It’s always a good idea to place a label near an 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 method to a sign, so it becomes a symbol and with the use and over time it becomes common knowledge that it’s referred to as an “icon”. 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 however is so generic and lacks visual references that it’s only understandable thanks to how frequently it is used.

Icons hide a further pitfall, which can either be helpful or a trap, based on the icons meanings translation. For example you can use an icon representing a calculator to indicate a "calculation". It does not include all of the details on a calculator and the process of converting an icon to represent a calculator is simple and “natural” as they have common elements that help our brain to connect a sign with the meaning.

However, if you use for example a clock to represent a quick choice, you’ll have a sign and a meaning with a weak bond. The sign and meaning combined are ambiguous and without a label that explains what the icon is supposed to do and can be really difficult for a user to understand what it means, even if the user is familiar with the software/website itself.

It’s important to choose icons or symbols you want to use wisely. It could be helpful to give a listing explaining the symbols used 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. For example every icon within an Android’s settings menu has its own label that enables the user to associate each icon with a function. This enables the user to use the “Quick Settings” effectively without additional labels. We should be clear and as unambiguous as possible and we should not use similar icons for different functions because if we do so, it’s more cognitive effort for the user thereby slowing down their user journey. Icons or symbols should not be mere decoration or aesthetics, but they should be consistent with the context and offer real help in using the software.If possible, always rely on shared and common conventions. Do not try to create a different new icon. For example do not create a new icon for "e-mail" because it forces the user to "learn" a new language as there is already an icon associated with ‘email’. It slows the user down and it forces him to make a cognitive effort that they probably won’t want to do. It also will cause a lot of frustration as the user will not be able to locate the desired function, and probably if they had to choose they would use another system that has the same functionality but is more user friendly thanks to the use of carefully selected icons. There are some cases in which it’s better to be cryptic with icons but I won’t go into this now.

To master a language is one of the most difficult things that we can do in our lives. We learn our native language when we are so young that we do not remember the effort that it took to learn it but as we get older the effort to learn a new language becomes greater. This is the reason why a software platform system should be well designed and should minimize the users efforts with appropriate languages and a solid architecture, and, of course, a good aesthetics.


Tech

By: Codeweavers - 14/05/15

More stories by Codeweavers