Basic principles for designing interfaces — Part II “Psychological principles”
Welcome to the second part of our journey through basic principles for designing interfaces. If you haven’t had the opportunity to see the first part CLICK HERE, if you already have read it, please enjoy the second part, where we’re going to focus more on principles used in designing interfaces.
Miller’s number
The average person’s short-term memory can remember 7 things (± 2)
• Dividing or limiting items to 5–9 items is a good way to make them easier to be remembered and reduce memory load
• In usability, this principle is often applied to navigation — navigation often contains up to 7 items
If the user was presented with such a matrix with 20 different words and told to remember as many as possible — for about 15 seconds in their short-term memory they would retain at most 9 of them, and most likely the number would be 5–7.
Dividing items into smaller groups allows you to categorize and remember them more easily.
Zeigarnik effect
We are better at remembering processes that are not completed or abruptly interrupted
This rule was noticed by a Russian psychologist Bluma Zeigarnik while observing waiters — unclosed orders are perfectly remembered by them along with the details of the order, in contrast to just closed ones.
It turns out that unfinished processes are well remembered by us with all the details, in such cases our memory works much better. In a way, we are forced to do it.
This principle is used, among others, in:
- If we want the content to achieve greater readership on the page, let’s not present all the content at once, let’s make it incomplete, and the continuation possible to be read by selecting the “Read more” option
- Divide the elements into smaller portions and present to the user that the process is not yet complete (again — an example with a form divided into steps)
The application of the Zeigarnik effect on LinkedIn — all the time, the user is being informed that the process of filling in the profile is not completed
The example on the left — the full trash can icon is a metaphor for reality, a full trash can mean we still have something to do
The example on the right — the red badge (icon) informs us that we have something to do — in this case — two messages to read
Hicks’ law
The more options we have to choose from, the more time we need to make a decision.
As we already know — as humans we have limitations in our perception and therefore we need to prevent the so-called decision paralysis.
Do you know the feeling when you get a menu in a restaurant and you have 20 dishes of the same category and you don’t know what to choose?
This is exactly what we can do to our app users!
The law named after the British and American psychologists William Hicks and Ray Hyman (that’s why you may come across the name Hicks-Hyman law) has its roots in research from the late 19th century. It concerned the relationship between the number of choices and information presented and the time for processing and responding.
As we can expect — the more choices we give to the user, the more time we need to make a decision. Moreover, this time increases logarithmically.
So by bombarding the user with too many options we force them to do work they don’t necessarily want to do.
The researchers were even tempted to come up with a mathematical equation regarding the point of paralysis and the ratio of the number of options to the time it will take us to make a decision. But, well, ain’t nobody got time for that! Just look at this real-life example, which of them would you like to use? That’s exactly what this rule is about.
Breaking forms into steps makes it easier to for the user to fill in all the fields, especially when one step requires the user to share only a small bit of information.
Filters in online stores are also a solution to help us decide and limit the number of choices available to those that will interest us more.
Parkinson’s law
Work expands to fill the time available for completion
The law originally referred to bureaucracy — a thesis by Cyril Northcote Parkinson outlining the principle of intensive growth in the number of civil servants employed in public administration, no matter how much work is to be done and how many tasks are to be completed in a given time, 100% of the resources will be used.
However, this principle is not only applicable in bureaucracy.
It can be applied to everything around us. Example?
- Usually doing something last minute or with a very short deadline makes us much more productive
- No matter how much space we have to manage, our “possessions” will eventually make it all occupied — we subconsciously allow it.
In a nutshell, it’s all about using the available space — if we don’t impose limits on ourselves, we’ll aim to use 100% of the resources. Why should we limit ourselves if we don’t have to?
It all stems from our human nature — if we’re not forced to do something, we won’t do it with a huge commitment. That why constraints are sometimes good for us.
This all sounds beautiful, but how do you use it to your advantage in applications?
So basically, this is all about constraints first. If we limit someone to the time window that they can swamp with stuff, then they can’t do it indefinitely.
This works well for certain processes like registration, payment, etc. Sometimes in online stores, we have 20 minutes to complete some process — otherwise, it is invalid.
It’s a good way to force us to focus and do an activity.
A slightly milder form of the same trick with imposing time limits is to warn the user before an activity how long it will take.
E.g. “The process will take no longer than 3 minutes” or “5 minutes of reading”. This is then more of a form of encouragement or challenge (“I won’t read in 3 minutes? Hold my beer” )
The second is the ease of doing something.
Each process can be simplified and shortened to a certain limit. Remaining in the context of an online store, we can cite such examples as the ability to save your card, shipping address, or automatic suggestion of the nearest parcel machine.
Any such savings on the thought and effort required of the merchant will result in a more pleasant application contact or $$$.
Flexibility principle (Postel’s Law)
Let’s be flexible and liberal in accepting data from the user.
Jon Postel was actively involved in the formation of the Internet and was responsible for the creation of concepts such as DNS, domains, and the operation of network protocols.
This is why you can find information on the internet that he is one of the “fathers of the internet” and many of its assumptions and rules.
One of those rules was “Be conservative in what you send and liberal in what you receive”, which he based his networking rules on.
This principle is applied to user interfaces.
The point is that we are human and we make mistakes.
So how does this principle translate to user interfaces?
First of all, let’s hint and suggest the correct values
eBay at the moment I typed “fossil” in the search box started suggesting similar searches and suggesting other words.
Second — we should not punish you for typos
Google at the time I made the typo did not inform me that I had made a mistake — it accepted my request and tried to do something about it, but the app “noticed” that I probably made a mistake and suggested that I might have meant something else and asks “Did you mean…?”.
Just like in natural human communication.
Third — accept different forms of writing for zip codes, phone numbers, etc.
Aliexpress, after entering the postal code, which is correct in the Polish notation, informs me that I should enter a 5-digit postal code (?!).
This is an example of how NOT to do validation of such fields. This is certainly not a flexible approach. You can easily imagine a website that would correct this for me, not punishing me for putting a postal code in the way I’m used to, especially on the worldwide trading platform.
As you can see, flexibility is all about saving the user from thinking too much and actually do that before they have to.
Thus, we are flexible at the interface stage — the point of contact with the user, and conservative “deeper”, where the user no longer sees it — from their perspective, everything is flexible and liberal in the accepted data.
The graphic below explains it all:
Fitts’ law
The time it takes to move to a specific target depends on the size of the target and its distance.
Ok, now in human terms…. the bigger and closer the cursor is to the button, the faster you press it. Seems logical, right? And yet we still find apps in 2021 that don’t follow this rule.
Before we get to the examples, a brief history lesson and the roots of this principle.
Here is Paul Fitts (1912–1965) after whom the rule we are talking about here is named.
Paul Fitts was an expert in aviation psychology.
He worked on the ergonomics of physical buttons on airplanes and was one of the best aviation psychologists during World War I and World War II. His research and its results contributed to the safety and ergonomics of cockpit buttons.
It also appeared that, paradoxically, making the catapult too easily accessible to the pilot resulted in its mistaken use by pilots.
In the 1980s, when the first computer interfaces and pointing devices began to emerge, it became apparent that the law was applicable to interfaces.
Fitt’s law in the interfaces
The first example is Microsoft Word mini-toolbar appearing next to the cursor after selecting text:
And before it looked like in the graphic above, every change required “jumping” the mouse to the top bar, see the difference?
Or the menu next to the icons in the Windows tray and the right-click actions, i.e. the ones right next to the cursor:
And an interesting fact… In Windows 95 it looked like this:
At first glance, everything looks fine, but the devil is in the details.
The problem was with the edges of the buttons. Back in the days when ball mice weren’t so precise, the buttons in Windows were designed in such a way that they needed to be pressed precisely within the button’s area, and the spaces left underneath and next to the buttons didn’t detect when they were pressed.
This meant that when pointing the cursor at the “Start” button, the click had to be precise and required focus, and not hitting it was annoying.
For this reason, Fitts’ law for interfaces where we move the cursor assumes that the edges of the screen are infinite, because no matter how far we move the mouse near the edge, the frames “hold” it within them.
Therefore, in Windows 10 this was corrected, and moving the cursor to the left-bottom corner and pressing it will still bring up the start menu.
Fitts’ law also applies when it comes to the size of the field we can interact with:
I’ve highlighted in green what the “clickable” box should look like. And so, from left:
- Weak — a situation where only the checkbox field is clickable. It is unintuitive because we will reflexively click on the text (issue related to direct manipulation) and in addition, it is simply difficult and requires concentration. On phones, it happens that such a checkbox is literally 2mm by 2mm — clicking it will require lots of patience.
- Better — an option where the checkbox and its text (label) are clickable. This option is already quite good and usually sufficient, although it can be done even better.
- The best — the best possible solution — apart from the clickable field and the label, the “background” is supported. This solution is known from phones where very often the whole fields are clickable (e.g. in settings) together with the background so that the clickable field is as big as possible.
What is also very important — reachability on mobile devices. Our hands are not made of gum. Creating mobile apps, we should be conscious of the fact, that things placed in the middle of the screen are the easiest to reach by a thumb and the opposite — these at the top are pretty hard to point with the thumb.
Priority effect
As humans, we tend to remember the first and last item.
The principle is also known by its slightly fuller English name — primacy and recency effect. Which describes the phenomenon a little more broadly.
What can we do to use this phenomenon to our advantage?
- Placing less important items in the middle of the list can be helpful because we are less likely to store them in long and short-term memory.
- Conversely, in navigation, elements placed on the extreme left and right will be better remembered by us.
An interesting fact is that this effect can influence survey results — so if we have such a possibility, we should mix answers for every new person.
Surveys tend to select the first and last answer, which can affect the results of the survey.
The same effect is very well known to politicians who fight with each other for the first or last places on the electoral list, which gives them a better chance of being elected when voting is based on surveys. Such seats are often referred to as “taking seats.” Although we do not deal with politics, it is worth following this rule if we want to direct users’ attention to the areas of the system we have selected, the settings available or the content presented.
Isolation effect
Among many of the same elements, one that stands out from others will be remembered best.
We use this principle in applications and web design, e.g. in the case of CTA (call-to-action) buttons which always stand out from other buttons and their surroundings
And similarly — being consistent in using the most important actions on a given screen (i.e. CTAs hereafter) helps you find your way around the site/app.
While designing different screens, in the twin applications I placed the most important button on a given screen in the same place that serves the most important action at that moment/context.
We have to decide what is the most important and most needed at the moment by researching with users — some of these things we can find out directly from them, other times the truth can be told by quantitive data found in analytic tools, and other times — it will be quite obvious or we won’t even have more than one option.
Jakobs’ law
Users spend most of their time on other sites, so your site should work like other sites.
It’s simple — we spend a lot of our computer time in applications such as Google’s Gmail or Google Drive, Microsoft’s Office Calendar or Outlook or other Apple applications from where we “catch” patterns.
That’s why giants like Apple, Google, and Microsoft shape our expectations of how apps should work, and because they feel responsible for it, they have created their guidelines and design systems for their own needs and the needs of other developers.
Examples?
Apple Human Interface Guidelines — CLICK
Google Material Design — CLICK
As Google itself says — Material Design is the visual language of the web combining good practices and principles in design with technology and science.
Microsoft Fluent Design — CLICK
Microsoft for dedicated apps for Windows and mobile devices has predicted how they should look.
For mobile apps, the guidelines are a fusion of iOS or Android guidelines (RIP Windows Mobile 😢) and Microsoft guidelines, so that they conform to the expectations of users on each platform, but still, maintain the nature of Fluent Design.
When following this rule, remember:
- The process of learning and understanding a website or application can be facilitated by using known patterns, standards, design systems, and current conventions.
- Creating overly fancy and non-standard solutions is risky and can confuse the user.
Following guidelines is a must in building universal and understandable interfaces.
Ockham’s razor
If we are choosing between solutions that work equally well, we should choose the less complex ones.
The original principle: Beings should not be multiplied without necessity or it is not worth doing with many what can be done with fewer.
This principle can also be compared to the popular KISS, or Keep It Simple, Stupid.
When creating solutions on the interface side, it’s a good idea to ask yourself, “What is the minimum number of UI elements that will still allow you to communicate effectively with the user?” and then analyze the topic and choose the least complicated solution.
An example of using minimal UI elements is the Google search engine that everyone knows:
Doherty Threshold
Productivity increases when the computer and user communicate within a time frame of 400ms.
This rule still remembers the late 70’s. It was believed then that we, humans, were not bothered by the time with which computers worked then, where the response time was 2–3 seconds and more.
Even more! It was thought to help with thinking — those extra seconds were supposed to help you think about your next steps, think about your next actions, etc,
The truth turned out to be quite different.
In 1979, as computer performance increased and response times dropped below 2 seconds, Walter Doherty at IBM saw a significant jump in people’s productivity with computers and software.
He conducted a series of tests and studies on the subject, only to announce in 1982 in the pages of IBM Systems Journal that the longer the response time of the system, the longer we think about our next action.
The response time in the range of 100–400ms guarantees smooth work with the computer and an uninterrupted process of performing a given action. If the time is longer, we need to remind ourselves what we want to do next.
The graph above shows how the system’s short response time makes our response faster.
Okay, so how can we use that when building interfaces?
The first type of instant feedback can be done in the browser showing the user that the UI is responsible and all still works quite fine.
The second very important thing is to use toasts with server feedback on our actions.
Pareto principle (80/20)
As a rule of thumb, 20% of effort produces 80% of results, and 80% of effort produces only 20% of results.
A principle describing many phenomena in the field of economics and management, according to which 20% of the objects studied are associated with 80% of certain resources. In economics, it describes the unequal distribution of wealth in society — 80% of the wealth is in the hands of 20% of the society, the remaining 80% of the society owns a total of only 20% of the wealth.
The principle is incredibly universal, and even though it originated in economics, it is applicable in most areas of life, including design.
Examples of the 80/20 rule:
- 80% of errors are caused by 20% of the code
- 20% of customers generate 80% of revenue
- 80% of the focus is on 20% of the page
- The graphic above shows the distribution of effort and results. Often, 20% of the time spent on a task will already produce 80% of the results and this is usually a “solid draft” of a particular task, the remaining 80% will be spent “grinding” which will already be only 20% of the results.
- In this graph, you can clearly see how fast the progress is usually at the beginning of the work, until you get 80% of the results and the task is then done correctly, the remaining time is the time-consuming fine-tuning mentioned earlier.
In designing interfaces, we can use the Pareto principle e.g. when we decide on the most important functions at a given moment — let’s choose those which will be used by 80% of users.
It is also worth remembering this principle in the context of application users in general — we can assume that we, as technical people, belong to 20% of web users, the vast majority are people who MUST use the computer and it is for them that we create tools for their work.
Putting the principles into practice
On the screen above, try to find as many of the principles I talked about earlier as possible.
Ready?
Answers below!
- Principle of primacy and recency — In the navigation, the logo has been placed on the far left and the account options on the far right. Additionally, this layout is applicable to our culture where we read from left to right. (Arabic language sites have the opposite layout and the logo is usually on the right. Example? The Arabic version of the Vogue website — the logo and all other page elements are pulled to the right)
- Miller Number — The number of elements in the menu (next to the logo) has been limited to five. This rule does not have to be followed so rigidly, the most important thing is that the navigation is clear, understandable, and transparent. We do not have to stick to the number of 5–7 elements, but it is good when we have such a possibility.
- Distances of elements from each other (creation of visual groups)
- Subheadings (e.g., “Popular Now”) are close to the covers that apply to them (below) and farther from those that don’t (above). Covers that fall into the same category are close together horizontally and distant vertically from the others.
Zeigarnik effect:
- Mark “New Episode” — Just like a badge on smartphones, it lets us know that we have something to do. In this case — there is a new episode waiting for us and we might be interested in it.
- Progress bar — For unfinished videos/series, the app shows that we have something there to finish.
- “Broken” tiles on the far right — Broken tiles are tempting to look further to see what’s hiding behind the edge of the screen.
Part III. Aesthetics and utility — BONUS
We often see nicely designed interfaces as more useful.
A nice and visually pleasing design definitely to the job when it comes to forgiving small usability problems by the users, but at the same time, be conscious that it means they might be not discovered testing!
We judge a book by its cover.
First impressions matter, just as they do with people, they do with devices, websites, and apps.
The first impression determines how our product will be perceived and it is a lasting, long-term impression. It is like a prism through which we will look at the product until the very end.
This way, even unconsciously, we’ll turn a blind eye to the mistakes and problems we encountered, and at the very end, we’ll praise the graphic design that is so stuck in our heads and built a positive feeling.
Apple products are a case in point — strong attention to aesthetics and design builds positive feelings from the very beginning of interacting with their products and brand.
Facebook’s recent redesign — unifying with the mobile version, desktop messenger, and improving the visual aspect of Facebook, which is already getting old.
In addition, a pleasant interface helps build a relationship with the user, strengthens attachment, loyalty, and patience. That’s why we design screens like loading, technical interrupt information, or 404 in a nice way.
SoundCloud technical break — a humorous, light-hearted reference to the portal’s logo and its theme — music sharing (and lyrics of the song ASAP Rocky, Skepta - Praise The Lord 😎).
A 404 screen — a non-existent address on GitHub.
Design alone, however, is not enough.
Remember, a beautifully designed application should be useful above all and we should not use this principle as an excuse to let go of usability or favor appearance over function.
Nicely designed app + well thought out and tested UX = ❤️
Summary
The principles collected here will primarily help you understand how we perceive as humans and how to translate that into graphical interfaces.
Things like how we group and how important the seemingly trivial empty spaces between interface elements are.
Sources and materials used
- Universal principles of design, William Lidwell (2003) — in addition to the above you will find over 200 other principles.
- Huge s/o to Jon Yablonski, creator of Lawsofux.com — the biggest inspiration for this article and lecture.
- Facebook, Github, Soundcloud, Apple, Netflix
