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 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