GUI Psychology. Our perception of information and images

Target audience : testers, designers, analysts, frontend dev, # simple for development

About myself:
Hello everyone. My name is Lena, I have been working QA for a little more than 3 years, in testing I have been faced with various projects, from banking software and mobile applications to commercial and corporate sites.

On my current past project, the requirements for the GUI were in second place, after the utility of the features implemented for the user, respectively, sometimes even trivial defects were fixed, perfection and. Of course, rationally assessing the project, I can not say that it was written according to all the canons of usability, and very few people can boast about it, because often, it all depends on the financial side of the issue on redesign and functionality ... But! Positive user feedback testified that all the same, we are on the right track.

Accordingly, a certain amount of knowledge has accumulated that I wanted to share. Let's start.

If we make a generalized classification of web sites, we get the following:


Even if your site is not aimed at making a profit, you are still interested in the audience, right?

And if you have your own business, then to maintain business reputation you will be interested in raising the audience’s volume of your resource, increasing conversion, SMM, and other fancy things, but to achieve all these goals you first need to have cool user-friendly content).

I would say that for sites that specialize in the following niches:

  • commerce (goods, services, bulletin boards - what makes a profit),
  • sites - business cards of companies (promo),
  • corporate sites (company face).

Concepts like usability and well-designed design play a key role.

Below will be collected general recommendations on how to write the interface of your site with high quality, so that the user subconsciously perceives it the way we need it # magic

Make the pages convenient for “crawling”

In most cases, visitors look at the page, browse through some of the text and click on the first link that attracts their attention, or indirectly resembles what they are looking for.

This is how our brain works, that the perception of information is built in a clockwise direction. Without addictions in life, a person is left-handed or right-handed. Approximately it looks like this:


That is, in the center we place the main content, this is easy, and it’s understandable without explanation. Placing the menu (or product catalog) on ​​the left side of the site, we kind of call the user to action, he would have turned his gaze further, but here we are delaying his attention.
You can also use the blind zone - for example, display the search results for the site that the user was looking for.

The bottom line is that the information we want to convey to the user first and foremost, so that she remembers it is 12, 3 and 4 hours.

Information that encourages the user to take action is best placed at 6 and 9 o'clock.

Do not overload web forms

Hick's law => experimentally established dependence of the selection reaction time on the number of alternative signals. The psychologist has even derived the logarithmic function of the reaction time # but this is too complicated.

In simple words: the smaller the menu elements, the less time it takes to choose one of them. And also that one menu is better than two. Providing the user with several options at the same time is usually more efficient than organizing the same options into hierarchical groups. Selection from one menu consisting of 8 items is made faster than from two menus consisting of 4 items each.

The abilities of our brain are not limitless, but a person can hold 5-9 entities in short-term memory. Therefore, you should not place on the page more than 8 forms.

Removing unnecessary options, you increase the efficiency of product use (in our case, the site).


Give more space

Free space is not always bad, rather the opposite: it improves the perception of information and understanding, focuses the user on what he needs.

The “air” between the elements visually separates the site layout and information into sections, paying attention to the most important. The areas that remain empty are visually pleasing to the eye. Thus, the proper use of free space will allow you to facilitate navigation through the site, make it convenient, readable and gently take the user to action, increasing the conversion of the service.


Changes should not cause a noticeable difference (or Weber's law)

Do you use Facebook?

Over the past 5 years, as I was registered there, I did not see any tangible changes. Why does Facebook keep every key element of its design? The answer to this question explains why every major website, including Google, Twitter, and Amazon, despite their large budgets, does not do radical redesigns.

Research shows that we don’t like a massive change in existing structures and systems, even if these changes benefit us.

Simply put, Weber's law, combined with our natural aversion to change, shows that the best way to get closer to redesign is to do it as imperceptibly as possible, no matter how ridiculous it sounds right now, to put it simply - to be precise, changing it here and there gradually. Thus, you will save the conversion of your site as much as possible, and a significant part of the audience will get used to the redesign before you complete it.

What about behavior?

The average time that a new user spends on the site for the first time, searching for the info he needs, is about 27 seconds. At the same time, out of the entire audience, only 20% will scroll the page (80% will not do this). Also there is a rule of 3 clicks, which states that: the user must find all the necessary information for him with 3 mouse clicks. Not always, of course, sites by their nature have a simple structure. If your web resource has many categories and subcategories, you should forget about this “three click” rule and it is better to switch your attention to ensuring the intuitiveness and logical ordering of the system.

In summary, the recommendations above can fit into the following theses:
  • Place the most important content or elements where users see it, avoiding “blind spots”
  • Make obvious the actions that users should take on each page, do not make users think (c)
  • Make decisions about which elements of the page are of the highest priority. Create a visual hierarchy that will first guide the user to them.
  • Get rid of everything that does not make a real contribution.
  • Format the text to support ease of perception: use a large number of headings, reduce paragraphs and use bulleted lists, and remember - that graphic fonts are read by the user much slower.
  • Provide customers with only the information they need at the moment on each village and let them choose if they want more details.

This article contains my practical observations, they are not clear instructions for execution, but they really work. I touched only the tip of the iceberg of knowledge about the user's psychology regarding the perception of information, but I hope my tips will be useful to you).

to be continued ...

Also popular now: