Reading the UI

The UI of websites and applications isn't just a beautiful and consistent package of icons as many people seem to think. Every graphic element is some kind of a representation of a natural language, something that we first define in our own words and then try to convey to the user in the most suitable graphical form. How clearly an icon speaks to its viewer is always worth exploring. We can "read" the UI by going through every icon and asking ourselves what it says. Then we could see that our icons are beautiful, but not as expressive as we hoped them to be. Asking different people what they think the meaning behind our icons is could help us see potential problems. For example, how would we read a clock icon? Is it "get the current time" or "find the departure time of my train" or maybe "find when the battery of my mobile phone will die"? When there is an action behind an icon, it helps to start with an actionable verb. These examples show that context matters and sometimes we can even extend a generic icon with the specific context in a way that makes our intention easier to understand, but at the expense of more visual noise. We need to find the minimum working icon, which is mostly an iterative process. It is one that has only the elements that foster understanding and recognition,—and in relation to them—not too many atomic elements dedicated to decoration. We also need to be aware how well our icon is working within the icon set, because the intense clarity of some icons could overwhelm the availability of others and make them spring more into people's eyes. If we are aware that such differences exist, we need to seek ways to compensate for them.

How does an icon with a human figure and a plus sign read? Depending on where the sign is located—on the left or the right side of the figure,—it could be "add this contact to my list" or "contact add to my list". You can clearly see that the second doesn't read as well, but it seems to be in wide use today. Positioning the sign below or above the person just makes things harder to express, even when we can subconsciously sense what the icon is about. We perceive both at the same time, so it takes us some more time to determine the sequence of interpretation. Placing the plus above the head could mean "add another idea to your head". Enclosing the plus sign in the body of the human figure is dangerous since we have seen sellers of "plus me!" T-shirts. What is worse is that a color-blind person may think of the plus as the sign of the red cross and think of medical service given by a specialist.

In interface design, we can make many mistakes simply by leaving to chance the interpretation of our icons, which by itself is often subject to cultural differences too. How beautiful an icon is doesn't matter much when it doesn't say much. The easier for someone is to read our icons in natural language, the more useful they are.

How does an icon of three short lines read? I'm not sure of that. Some people have decided that it is perfect for menus that appear from top or from the side. Why? It indicates lines of text, possibly some kind of a list. But what then? Everything on a web page can be seen through a similar lens. Is this to be read as "create a new web page"? Is it "toggle on/off this list/text below"? Is it "edit this text"? When the clarity about the action is missing, we could only speculate.

It would be nice to see more icons that are chosen not for how they look, how available they are or how recognizable thinning makes them, but for how good they read. During UI design, if in doubt, always ask potential users to read the meaning of your icons in front of you without revealing it or making links active until you are sure that at least 75% of the people you asked guessed your intent correctly.

bit.ly/1aHysDM