7 Laws of UX Design and what happens when you break them

In this article, we will explore 7 UX design laws and see if popular flight booking websites follow these rules and if no, how the result looks like.

Doherty threshold

Previously the normal response time of a computer to a user’s action was equal 2 000 milliseconds. The research has proven that new time, only 400 milliseconds, made users feel more addictive to the application.

SO: Do not make people wait for more than 150–300 milliseconds (depending on the screen size) after they perform an action.

Most of the web pages are optimized, yet there is one thing almost all airlines can not do instantly: show the results of a search. To make waiting less burdening and entertain a user, they show animated images:

Planes are moving around the country, capturing user’s attention

People are happier when they are busy. Create a sense of doing something/observing an animation instead of staring at the standard loader.

Fitts’ Law

The time required to move to a target depends on the distance and relates inversely to its size.

SO: The closer and the bigger object, is the less time it will take for a user to notice it and click.

Big buttons close to the last form fields are easy to reach.

Hick’s Law

It takes more time to make a decision if there are numerous choices compared to a few options.

SO: Break down the options, create clusters and do not bombard users with lots of possible choices.

Hotel booking service makes it easier to choose the hotel by showing 3 best hotels based on the user’s previous choices.

3 best hotels recommended by a system to simplify the booking process

Another airline shows the prices for each day directly in the calendar, thus making a selection of the cheapest ticket faster:

Calendar with flight fares visible from the first sight

Jacob’s Law

Users expect your system to function the same way other similar systems do.

SO: Get to know the most common design patterns before starting to design. Do not invent something that will make users wonder how to use it.

It is quite uncommon to see a button “Go to the next step” in the form of a circle and using it may slow down the booking process.

It is not obvious that the circular “Enter passengers” button should be clicked next

The more familiar pattern used by most of the airlines is the standard rectangular button under the selection block:

“Continue” buttons are standard and are easy to find

It would make sense to not invent another form but use the most familiar one.

Law of Common Region

Humans perceive objects in the same closed region as a group.

SO: Organize your design elements accordingly, use frames if needed.

List of flights on the chosen date

While it seems to be extremely hard to process all of this information, table view and blue lines serving as frames help users to effortlessly scan different options and compare them.

By using contrasting white blocks on the blue background, this airline separates different parts of the same form:

Ticket booking form

Miller’s Law

The average person can keep in memory only 7 items. It is better to organize elements in the groups of 7.

This airline shows only 6 main characteristics by which a user can compare the ticket fares:

Table view with 7 rows and 6 fares

It is not usual for some airlines to show more than 7 characteristics, which makes the choice much more complicated:

Pricing packages with long ungrouped lists of bonuses

In the case, if a company needs to show multiple bonuses and advantages of the fares, they can be grouped and divided by a boundary:

Bonuses are grouped, not more than 6 in one sub-block

Another way to show various bonuses would be to use different media formats, icons and images, in groups not more than 7 elements each:

8 bonuses are shown in one group, 3 extra bonuses are added separately below

One huge advantage of this type of media presentation is that vivid images are much better retained in our brains than regular icons.

Occam’s Razor

Among the competing equal options, the one with fewer assumptions should be selected.

SO: The simpler the choice, the better.

This company does a great job by reducing design complexity and making booking a simple and stress-free process:

Filters are added to reduce cognitive load

Instead of showing all possible fares for each flight, they add a filter “class”, where a user can preselect the desired option and see only relevant prices. 6 key filters allow a user to leave only the flights he might be interested in and hide all others.

Comparing the following way of presenting the list of flights to the previous, we can clearly see how much unnecessary information a user is shown:

List of flights includes lots of unnecessary information and is hard to scan

Images, illustrations, and icons are recognized up to 60,000 times faster than words by our brains.

Yet instead of the visual presentation of the airline such as logo, users need to spend time reading the text and memorizing the information to make a further decision. Codes of the flights and shortened names of the airports add even more cognitive overload.

Quoting Dieter Rams, design “…at best, is self-explanatory”.

Red rectangles and yellow triangle do not make much sense for most of the people, they should be modified or accompanied by the explanation to provide some value to users from the first sight.

Should you simplify a user interface further? You can tell that your design works well or not by looking at the average time users spend on the pages and bounce rates.

Zeigarnik Effect

People remember uncompleted or interrupted tasks better than completed. People start feeling overloaded from too many unfinished tasks and want to complete them.

And designers can influence users’ decisions by reminding them of these unfinished tasks:

Email received from the airline to remind a user about his booking

UX Design Laws can help designers make or break their designs. Even the biggest airlines sometimes do not follow the rules which may lead to longer booking processes and lower user success and satisfaction rates.

On the other hand, these Laws can also help make even complicated processes smooth and pleasant for users. Are you following all of them? Check!

7 Laws of UX Design and what happens when you break them was originally published in UX Planet on Medium, where people are continuing the conversation by highlighting and responding to this story.

Share this post