The simplest but most abused UI components — Part 1

Recently, I have started to give “interaction design and information architecture” training courses for UI and UX designers and interested developers in my company. Below you will find the content of my first course which starts with basics: interaction cost, usability heuristics, form components, visual hierarchy, gestalt principles, cognitive load, short-term memory, change blindness.

Interaction cost

What is the interaction cost? It is usually believed as interactions cost is the number of clicks that the user performs to reach their goal. Well, it is more than that. Nielsen Norman group defines interaction cost as the sum of mental and physical efforts that the users must deploy in interacting with a site in order to reach their goals.

What are those efforts?

reading

scrolling

looking around in order to find relevant information

comprehending information presented to you

clicking or touching (without making mistakes)

typing

page loads and waiting times

attention switches

memory load ­ — the information that users must remember in order to complete their task.

You might think how “page loads” is about design decisions. Isn’t it a technical problem? Here is a simple example; think about a page with a table which has an excessive amount of data. It will take time to load this page while you are only trying to make an action. It will raise your interaction cost tremendously.

Goal: Action 1; the user needs to wait until everything is loaded.Or show the items partially and avoid the long waiting time.

This is how design can affect the loading time.Our ultimate goal in design is minimizing the interaction cost because interaction cost is a direct measure of usability.

A quick assessment of the interaction cost of a design can save a lot of money on the long run, as it can give you a good measure of how difficult the interface is going to be for the user. It can also serve as a comparison tool between design alternatives: usually, the one that minimizes the interaction cost has better chances of success.

I will focus on 2 heuristics while analyzing the first batch of the simple UI components and their correct way of use; User control and freedom & Consistency and Standards.

1. Forms and Visual Hierarchy

I was a science student and quite bad at memorizing. I have never memorized formulas and rules, but instead, I learned how that formula is created. A=1/2bh , but why? All formulas coming from basic facts, and if you understand the source, you don’t need to memorize.

There are a lot of resources(formulas) describes how user forms should be designed. Instead of repeating those once more, we will use them as a connection to visual hierarchy and why we have these or these rules/tips.

As in Math, the rules of UX also based on the facts in a science; psychology. One of the oldest principles of HCI is that things that are close to each other are seen as related. Similarly, the ones in similar color, shape or move and change together or put in the enclosure. Users do not look around that much but they mostly focus on the section they are working on. Therefore, feedbacks, help texts, confirmation buttons or related information that belongs to that UI component they are working on should be close to each other.

How long it took you to realize what happened on the second screen when the user selects the size?

We usually overlook when a new visual detail added to an existing image. It affects us to notice error messages or navigations. However, you can reduce the effects of change blindness by using the right visual representations. For instance, in the above example, if Out of Stock button changes to a bold, contrasting color, it could have been easily noticed when it has changed. Of course, it would not be the best way of designing this screen anyways. (Best would be not allowing users to select an out of stock size by disabling unavailable sizes, but not our focus right now)

The root of form or page design also stands on Gestalt Principles –Gestalt laws of grouping which are set of principles in psychology.

Gestalt Principle: Proximity

The Gestalt law of proximity says that “objects or shapes that are close to one another appear to form groups”. Even if the shapes, sizes, and objects are radically different, they will appear as a group if they are close.

objects or shapes that are close to one another appear to form groups

Gestalt Principle: Similarity

The Gestalt law of similarity says that while all objects are equal, human perception wants to see the physical similarities between a group of objects. Our brain uses similarity to distinguish between objects next to each other or overlap with each other based on their visuals.

The principles of similarity and proximity often work together to form a Visual Hierarchy:

In summary, Visual Hierarchy reflects the relative importance of elements you see on the screen. Anything that is more important or relevant to users must have a higher visual weight, anything relates to each other should be close to each other or look similar.

Another human limitation we take into consideration while designing forms and pages is short term memory.

You can see in the form design rules, they say do not use disappearing help texts, placeholders, but make the information always visible. Our brains are limited to keep much information. Therefore, you need to help your users by not asking too much to remember.

2. Checkboxes and Radio Buttons

I used to believe everyone knows the difference and the standards of these 2 components. I found out that was not true recently. So let’s summarize;

Radio buttons are used when there is a list of two or more options that are mutually exclusive and the user must select exactly one choice. In other words, clicking a non-selected radio button will deselect whatever other button was previously selected in the list, as old-fashion radio buttons.

Radio buttons

Checkboxes are used when there are lists of options and the user may select any number of choices, including zero, one, or several. In other words, each checkbox is independent of all other checkboxes in the list, so checking one box doesn’t uncheck the others

A stand-alone checkbox

A stand-alone checkbox is used for a single option that the user can turn on or off.

When designing radio buttons, most important to follow design standards, because this enhances users’ ability to predict what a control will do and how they’ll operate it.

Radio button rules & usage:

1- Align the choices vertically

It is not clear that four or three is selected

If you still need a horizontal layout, make sure to space the buttons and labels enough so it’s clear which choice belongs to which label. Or you can tweak your interface element to make it absolutely clear:

2- Have a default choice (most of the time)

In traditional application design, the first radio button in the list was always selected by default. As it is explained in usability heuristics, better to follow standards to be predictable for your users. (see also; Do Interface Standards Stifle Design Creativity?)

The second rule that not having a default selection breaks is user freedom and control since users have no way to revert to the back.

However, recently, we see radio button controls without a default choice even on most popular platforms inconsistently.

Google forms have no default choice

There are 3 reasons to have default choice (or not) for radio buttons:

user expectationsOne of the 10 heuristics of UI design says that users should be able to undo (and redo) their actions. This means enabling people to set a UI control back to its original state. However, there is no way of unselecting a radio button and going back to the original state of -nothing is selected-.

expedite tasksThe default selected choice in a set of radio buttons is known to be the most desired or frequently selected one. It is very helpful to select this by default in the design to minimize your interaction cost.

power of suggestionHaving a default selection makes a strong suggestion. The default choice can lead users to make the right decision and gives confidence. It can be also used to support the organization’s business goals. On the contrary, this can also be a reason for not having a default selection. You might not want to affect your user’s decision, as in customer feedback form above in google forms.

So, what are the excuses for not having a default choice in radio buttons;

If you don’t know what your user wantsIn this case, I strongly suggest to find out what your user wants

Alienating choiceThis the most valid reason for not having a default choice. However, it is suggested to use a different UI control in this case.

Screen 1: Duolingo has radio buttons without a default choice. Screen 2: My redesign by removing radio buttons completely.

Safety netYou want to be sure that users see the options and actively selecting a choice. You can consider having a more elegant way of design to catch your users.

3- Radio buttons VS drop-downs

Radio buttons have a lower cognitive load. They make all options permanently visible for users to compare them easily. Radio buttons emphasise all options equally and draw more attention. So if your options need the attention, prefer to use radio buttons over drop-downs. Of course, if you have more than 6–8 options it is not making sense anymore.

Cognitive load: Like computers, humans also have limited processing power. When we are loaded with excessive information, we perform poorly. So if your interface pushes users’ mental processing power to its limits, they experience difficulties to complete their tasks.