UI Design - Visual Consistency

Let’s embrace the rhythm

This was originally published at One Small Step on October 2, 2015.

As explained in my previous post “UI Design - Visual Attraction”, an appealing and eye-catching design helps to capture and hold the user’s attention, providing him a foundation of confidence and familiarity needed to create value.

There are a few factors that help to visually optimize a website, consistency is one of them. Therefore, it is crucial to realize how important it is while developing a web application.

Users’ expectations come from their current knowledge acquired through prior experiences.

Visual consistency is essential to reduce the interface’s cognitive load (e.g.: have you ever been in a website trying to change language and you did not find it on the header or even in the bottom?). An inconsistent project can result in a design hard to achieve, leading users to mistrust. However, this does not mean that everything has to be uniform and boring. The balance between familiarity and originality is not linear, in fact this is one of the major challenges in design.

Usually when users intuitively understand a functionality without instruction, their experience is positive. For this reason, with few exceptions, consistent application is based on patterns and paradigms that users are used to through outside experiences, thus helping their ability to learn. Users’ expectations come from their current knowledge acquired through prior experiences. When we take advantage of the navigation journey in our favor, that is, when we are consistent with the external experiences and we have standard conventions in mind, we reduce the possible frustration of the users while using a certain application.

According to Google’s research, less complex websites that pass on a sense of familiarity are able to persuade users to stay. Which means that while designing a website we should consider both key-elements in order to not disrupt users’ expectations.

Consistency is splitted into two categories - external and internal.
External refers to the consistency of our interface with other similar products. It’s about designing based on what your users already know. For example, a user familiar with “Google Docs” or any other text editor will find, on the top menu, elements that are quite common to those used in Microsoft “Word”.
An internal consistency, as the name implies, is related to a visual consistency from the different elements within the interface. There are some aspects that determine internal consistency, such as color, typography, terminology, location, layout and all of its graphical elements (icons, buttons, notifications, etc…). Even animations and transitions can help or harm the visual flow. Because of it complexity, some companies develop their own corporate manual where they compile all the rules in a single Style Guide.

Visual consistency is always recommended but in certain situations it may be necessary to break the monotony and create some “noise” in order to attract attention. Nevertheless, we must never forget that breaking the rules needs moderation and only works when consistency is present, otherwise nothing stands out.

Is now a fact that consistency is important to users, even because it makes the website predictable, in a good way, and easy to use. It can even help minimize development and maintenance costs by creating a set of page templates or sample pages and applying them to the entire website, with that we can even take advantage of predefined patterns of the code.

The sense of vision largely governs how humans interact with the surrounding environment, so any UI (User Interface) that is expected to succeed should always prioritize visual interaction.