At Nelio we are not designers, but we try to take care of the user interface designs that we develop for our WordPress plugins. We believe that good design is key to the success of any development. Unfortunately, this is something that not everyone understands this way. And many times we find designs that make our hair stand on end.
What you may not know is that behind a good design there are a series of laws that are based on the results of many psychological studies to understand people’s behavior.
At the last WordCamp Europe I was able to see a very interesting talk by Eileen Violini, @itsjusteileen on Twitter, about design laws. Eileen is a designer and developer of user experiences and interfaces for WordPress websites and products. You have her talk below:
In this talk, Eileen introduces us to several design laws. I wanted to delve a little deeper into each of them, so we are going to see in more detail the characteristics of these laws and how they help us to improve our user interfaces to achieve a better user experience in our products.
Hick’s Law
Hick’s law, or Hick-Hyman law, named after British and American psychologists William Edmund Hick and Ray Hyman, describes that the time it takes for a person to make a decision depends on the number of possible choices they have: increasing the number of options will increase the decision time and the cognitive load that the user will have to face.
One of the philosophical rules of WordPress is that it is our duty as developers to make smart design decisions to avoid putting the weight of choosing technical options on the shoulders of our users.
Every time you give a user a choice, you are asking them to make a decision. When a user doesn’t care or doesn’t understand the choice, this leads to frustration. As developers, we sometimes believe that providing thousands of options and tweaks to our software is best. So anyone can configure it to their liking. However, our average user does not need to have as many options on the table. They want something simple that you just install and works.
To solve this problem, WordPress filters are perfect for more advanced users to configure more complex functionality options. At Nelio we try to design the settings page of our plugins with few options and then provide many filters to customize the experience of advanced users.
The Zeigarnik Effect
The Zeigarnik effect defines the tendency to remember unfinished or interrupted tasks more easily than those that have been completed.
To help the user not get lost on the interface path, using progress indicators to visually indicate that a task has not been completed increases the chance that the task will end up being completed.
You just have to see what complex plugins like WooCommerce do, which include an onboarding process so that new users follow the correct steps to have the plugin up and running from the first moment without the need for external help.
In the design of the screen for editing an A/B test with Nelio A/B Testing, we follow the same principle of presenting information in an orderly manner. First you have the section with the variants to test. Then, the section with the goals and actions to track. Finally, in the sidebar you have additional options.
Designing complex interfaces taking into account that the user needs to know at all times what to do is more complex than one can imagine at first. Understanding the user’s way of thinking and making their life easier at all times will help make your interfaces more effective.
Nelio A/B Testing
I was very impressed by the quality of this plugin, how easy it was to set up, and the outstanding support Nelio provides. I highly recommend Nelio A/B Testing.
Josette Millar
Gestalt Principles
The principles or laws of Gestalt are rules that explain the origin of perceptions from stimuli. As Eileen comments in her presentation, they describe how humans see objects by grouping similar elements together, recognizing patterns, and simplifying complex images.
There are several laws that are part of the Gestalt principles, but we are going to stick with the following, which are much more related to the design aspects that we refer to in software:
- Law of similarity: the mind groups similar elements into one entity. The similarity depends on the shape, size, color, and other visual aspects of the elements.
- Law of symmetry: symmetric components are perceived as equal, as a single element.
- Law of proximity: nearby objects tend to be seen as a unit. Nearby stimuli tend to be perceived as part of the same unit.
- Law of common fate: elements that seem to build a pattern or flow in the same direction are perceived as a figure.
- Law of continuity: the details that maintain a pattern or direction tend to be grouped together, as part of a model.
I recommend this article by Eleana Gkogka with examples for each of the Gestalt principles. If you follow the rules of these laws of design theory in your interfaces, you will achieve uniformity and decrease the cognitive load of your users.
If you look at the screenshot above that I showed you about Nelio A/B Testing’s A/B test editor, we are using a design similar to the same design that you can find in the block editor of WordPress, a.k.a. Gutenberg. What we want to achieve by doing this is that a Gutenberg user feels confident when accessing our interface, since it follows the same patterns and is very similar (laws of symmetry, similarity, etc.).
Serial Position Effect
The serial position effect is a person’s tendency to remember the first and last article in a series better and to remember the articles in the middle of the series worse.
This is something that we had already found when we analyzed the heatmaps of our pages using Nelio A/B Testing. We saw that those elements that were in the first fold of our website were much more relevant. For this reason, when we are working on a new design, we should place the most relevant elements of the interface at the beginning and at the end.
Similarly, we must know that if we are going to include a list of components in our interface, the first and last will be more relevant to the user. With this in mind, we can modify the order of the components to leave less important ones in the middle section.
Miller’s Law
Miller’s law states that the number of objects an average person can retain in present memory is around seven. This comes from one of the most cited articles in psychology (I remember I read it and also cited it when I was working at university), The Magical Number Seven, Plus or Minus Two: Some Limits on our Capacity for Processing Information by George A. Miller.
We know, then, that humans work best with sets of up to 7 items (between 5 and 9, according to Miller). So, in interfaces with more than 7 components, we must group or categorize those that have a semantic connection to simplify the interface (and final interaction) for end for users.
The idea is that by reducing the amount of information we present in smaller groups, we make the user experience easier and produce interfaces that seem more manageable and generate less rejection.
This can be applied in almost all the interfaces that you can find in WordPress. Surely you have seen plugin settings pages with lots of options that cause an almost infinite scroll on the page. This generates stress and frustration to users. By categorizing elements, joining them into groups, hiding those that do not need to be visible at first, we will improve the effectiveness of the user interfaces.
Conclusions
A good design is one that is not noticeable, since the interaction it provides to the user is so natural that it does not make them think. Achieving this type of results either by designing a web component or a physical object is really complicated.
If you are into the development of WordPress plugins, like us, surely this may have happened to you: a user asks you for help to perform a certain action. Something that was obvious to you, but that is not for your users. That’s when you really realize you can do it better.
Taking these design laws into account and thinking of the user as a link between your software and the value you provide with it is key to improving the user experience you created.
I recommend that you take a look at the talk of Eileen that I have left you above and tell me what you think about these design laws that I have presented here. It will not cost you anything to leave me a brief comment down below and I will be very happy to read it.
Leave a Reply