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.
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:
People are happier when they are busy. Create a sense of doing something/observing an animation instead of staring at the standard loader.
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.
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.
Another airline shows the prices for each day directly in the calendar, thus making a selection of the cheapest ticket faster:
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.
The more familiar pattern used by most of the airlines is the standard rectangular button under the selection block:
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.
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:
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:
It is not usual for some airlines to show more than 7 characteristics, which makes the choice much more complicated:
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:
Another way to show various bonuses would be to use different media formats, icons and images, in groups not more than 7 elements each:
One huge advantage of this type of media presentation is that vivid images are much better retained in our brains than regular icons.
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:
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:
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.
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:
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.