UX Academy #5: What Web Users Have in Common With Animals

and how to use this in your design to control immidiate assumptions about your brand. We also take a look at what kind of icons should you avoid, what is the meaning of colors in different cultures and more. UX Academy — news and findings from the world of usability by Lighting Beetle.

The similarity between animals and web users

The Information foraging theory, which pointed out Michal, explains similarities between our prehistoric ancestors and modern internet users. People behave on the web like animals in the wild: they unconsciously assess perceived effort of obtaining food against the perceived effort of finding a new place to eat.

This means that you should never expect consumers to drill your content to find benefits of using your brand. Your positioning has to be clear within the very first seconds of presence on your website. If visitors are confused about what your brand stands for, they might simply leave and search elsewhere.

Use design to provide website’s visitors controlled and immediate assumptions about your brand and offer. And don´t try to look better than you are, that will only create more confusion, so make sure you’re authentic. Here you can see websites of the two major Singaporean airlines. Same market, different positioning.

The meaning of icons

Our graphic designer — Slavo —explains what are the 3 basic types of signs used in icons.

First, the “icons” are ideal for indicating functionalities that have something directly in common with physical objects. For example, a picture of a printer indicates the print function or a picture of a calculator indicates the calculator functionality.

The “index” icons are used especially to indicate some kind of process using the object pictured on the icon as a causality to this process. For example, a cloud with lighting bolts indicates “storm” or a magnifier glass indicates “zoom”.

At last, the “symbol” icons have no logical connection with their meaning and therefore must be learned. For example, a picture of a house indicating “home-page” on browsers or a picture of two papers meaning “copy”

Those are very common and recognizable symbols but the web is also full of bad examples. The picture above shows results from a test where respondents had to identify given icons. Those in green (mostly “icons”) were widely recognized while those in red (all of which were “symbols”) were not. Those without color were recognized but only when presented in the right context.

Culture colors

Did you know that in China, the main color used on funerals is white? Richard found an interesting website where you can find the differences between emotional responses triggered by certain colors in different cultures. As a bonus, the website will even provide a web-color code for you to directly use it in your design! Take a look: http://culturecolors.xyz

Light Gray Text Problems

Using grey text on white background or the other way around? A user testing proved to what extent this doesn’t hurt the readability. For fonts smaller than 18px, you shouldn’t use grey color with brightness higher than 46%. If the font is 18px and bigger, the grey might be brighter but not more than 58%.

Broken window theory

Another interesting theory and a great UX parallel from Peter. The Broken Window Theory, known from criminology, claims that the looks of a city can affect the behaviour of its citizens in a good or bad way.

Solving of small seemingly unnecessary problems like cleaning graffiti or fixing broken stuff around can create an atmosphere of order and lawfulness which decreases the criminality.

It works also in UX: clean every little chaos to make your app or web more understandable and enjoyable instead of constantly trying to deal with big uncontrollable problems. Sometimes it´s the little things what makes the difference.

A new improved mobile navigation menu

Take a look at this great mobile navigation menu design on the playstation.com website. It comes from the Nielsen Norman lab and we think it’s great! If you want to read the full case study, you can do so here.

We hope you enjoyed this week’s UX Academy. If you don’t want to miss more updates and news from the world of UX design, follow us on medium or subscrise for the UX newsletter on our website: www.lbstudio.sk

Milan Tibensky
Copywriter at Lighting Beetle