The Affect of Iconography on a User’s Experience – Part 1 the Psychology of Symbolism in UI

My family and I visited the Crossroads of Civilization exhibit at the Milwaukee Museum the other day.  If you haven’t had a chance to visit the exhibit you should because it really speaks volumes about our attempt throughout the centuries to comprehend complex ideas.

If we think of how we interpret the material world around us it quickly becomes apparent that almost everything represents some form of information. When we grasp this notion, it isn’t a far stretch to consider that to understand the world we live in better we’ve come up with compact ways to represent complex ideas.

 

Obviously a lot has changed since the pyramid builders of old, but on all accounts the same visual mechanics are at work. Whether it is letters constructed into words on a page that phonetically sound out the idea of a BIRD or a pictographic representation of a physical BIRD the same synaptic and ocular phenomenon is taking place.

One doesn’t have to put on a fedora and leather jacket to see hieroglyphics, in fact we see the ghosts of their impartial use at work when we type emoji’s in our messages.  Why write “happy” when you can send someone an icon.
Happy, feliz, счастлив, 开心，快乐, Gelukkig, srećan, Heureux

This decoded pictogram transcends ethnic races, languages, and represents a multitude of complex ideas all the while our minds are registering a smiling face.  What’s even more amazing is that our minds register an emotional response to the iconography.

“Iconography, good iconography, strives to convey invisible reality in a visible form.” 
― Peter Pearson

In Part 1 of this blog post we are going to be discussing how the use of icons can positively affect a user’s experience through the concepts of metaphorical affordance and conditioned response.

Like we’ve talked about in previous blog posts building a log of macro user personas that represent a group of individuals helps us to not only understand who we are talking about and what generalized behaviors are similar but also what makes particular groups unique and special.

Questions like:

• If a user gets confused who will they contact?
• What is something that would make a person angry or upset if the interface didn’t do it well?
• How long will a typical user be interacting with the application?

The goal of documenting human behavior inside a workshop focused on current state is then used to help dictate how an interface will ultimately fulfill needs in a future state.  This is in part because from a UI Practitioner’s perspective an application has less to do with colors, themes and branding and more to do with fulfilling needs through usability. 

One of the principles that drives good usability is called Affordance
Usability based on affordance is fairly simple to see running in the wild working incorrectly when we find nicely designed doors in an office building.

Here is an example of a “Norman Door”

These types of doors are found everywhere, and as you can see it has pull handles indicating that the door has the interaction of pull to open, while the actual interaction is push to open.  The basic affordance of the door is broken requiring the words PUSH to inform the user what they must do.

Much the same way the broken affordance of a Norman Door functions counter intuitively the icons, symbols and pictograms of a User Interface have a similar psychology when used incorrectly.

This is because while icons and pictograms hold an aesthetic value they also carry an inherent usability because of the affordance that they represent.

You can imagine in the case of a user persona with each behavioral question captured there is the possibility to represent symbolic characteristics that bridge communication barriers.

It’s fairly safe to say what complex ideas or information this icon represents as we’ve all been classically conditioned to respond to this icon.  So we can say that the metaphorical affordance of this icon is high, in that upon clicking the user can assume they will get needs fulfilled that pertains to mail.

But what about this icon?

Aside from representing the concept of climbing into a rocket ship and blasting off to the moon for outer space adventures… You could imagine much like the Norman Door example, in order for this icon to express meaning in a User Interface it would need an explanation or title.
The big take away here is that the aesthetic value of the rocket icon is really nice, but becomes just a pretty picture because it lacks metaphorical affordance in the current context of use.

But what if we only know generalized information about a group of users…?  What if our Q/A sessions haven’t produce enough behavioral information for selecting usable icons in our UI?

To understand how much liberty and the risks taken in UI without having
user persona data let’s take a look at a simple interface.

Spend about 5 seconds looking over the UI below…

If you are someone that deciphered meaning from the icons inside the interface without an explanation, you’ve just created a small positive emotional response.  But if you could not, imagine the assumptions I just took in thinking any reader would be able to understand the interface above…

The idea that perceived usability of any interface is associated by how quickly we ascertain meaning puts weight on deciphering pictographic representation.

OK, Cool… So we pick icons everyone has some preconceived notion of what they represent and we’re good to go… Right?

In theory yes… The big take away here is that as soon as the complexity of an interface increases without having behavioral understanding, the metaphorical affordance degrades and the UI starts to function like a Norman Door.
Let’s take a look at more a complex Interface.
There are 24 visible icons surfaced in the UI Layer.

There are some pictographic or icon problems to look for flagged in yellow:

• Is the Home tab navigation option the same as the Home Button with icon?
• If the icon next to the Lists title section is indicating that there is a list below, what does the icon do to the right of the Lists?
• If the right List icon in the Lists section is for the functionality of sorting, why does the Table section not have the same List icon for sorting?
• Is that a table icon or a calendar icon?
• What is the difference between Reports and Forms, as they share the same icon?
• What is the difference between the book Forms icon and the Forms icon in the top navigation area?

After looking over the dashboard above we come full circle and have the grounds to effectively understand the subtle psychological effects of icon degradation.
While it is true that it is possible to interact with the dashboard above, it is also true that the UI contains subtle pictographic inconsistencies that cause friction in the Usability.

Think about the subtle psychological effects of a Norman Door and how it still functions to open and close, but on some level it causes a negative impact on the overall user’s experience.

If the ultimate goal of a UI Practitioner is the least amount of friction possible than to render an experience with minor flaws hinders User Adoption on a measurable level.

“Simple is hard. Easy is harder. Invisible is hardest.” – Jean-Louis Gassée

In Part 2 of this blog series we will be discussing custom icons and a few extremely handy tools that aid in the creation process.  We will also be discussing the process of creating WebFonts and Symbol Contact Sheets, that can be used to help identify what character codes to use in your CSS.  We will then show the use of the created icons in Responsive Designed SharePoint Wiki project.