People Innovation Excellence

Achieving Visual Consistency in Web Design: Why and How

In the previous article, we have discussed the first step to achieving visual consistency for web, which is to gather the expectations directly from the potential users and then run multiple tests from those data and pick what is best for the web. However, we have not dug deep as to why visual consistency matters in the creation of a web. This article will explain in more detail why visual consistency matters, and how we can achieve it, by meeting certain criteria.

As said in the previous article, our eyes are one of, if not the most dominant sense out of the five, it allows us to assess and interpret the environment into information. To quote from David McCandless, a Data Journalist invited to a TED conference in July 2010:

“Your sense of sight is the fastest. It has the same bandwidth as a computer network. Then you have touch, which is about the speed of a USB key. And then you have hearing and smell, which has the throughput of a hard disk. And then you have poor old taste, which is like barely the throughput of a pocket calculator.”

Especially in a website, the users’ eyes have the biggest impact, during their interactions with the web. Thus, we have to pay attention to how we visually present our interface to them. The reason for it being that 99.3% of the senses we perceive, are perceived subconsciously, as stated by David McCandless. As users only have prior experiences with other similar websites to go from, the visual interface must feel familiar. A research by google concluded that simpler and familiar-looking websites are far more likely to attract users to stay, with gradual increase in complexity reduces the elegance of the web, making users less likely to stay.

Comfort and intuitiveness of a website are generally attributed to its visual flow. Visual flow is the path the users’ eye generally take as they interact with the website. There are many tactics that UI/UX designers can implement to lead users to a specific visual flow, such as contrasting colors, different sizes, and moving objects. Ultimately, the goal of visual flow is to create a sense of harmony among UI elements, and to create a pleasant visual pattern, with occasional deviance to keep users engaged. There are several areas that we need to pay attention to in order to achieve visual consistency. These areas are: Typography, UI elements, and color.

1. Typography
It is fine to experiment with varying and unique font styling to keep texts interesting for the users, but know when enough is enough. It is recommended to differentiate the styles of each type of text, such as large font size and all bold for headings, mixed-case with regular weight for contents and small caps with regular weight for links. Make sure that texts of the same type remain consistent with one  another. To ensure this, we can set the font properties globally using CSS stylesheet. Aside from consistencies, we should also make sure the texts are aligned properly, with the appropriate line spacing, usually around 1.4 to 1.6 times the size of the font. This creates vertical rhythm for the texts.
2. UI Elements
Graphics, icons, spacing, and images are elements that collectively help createthe visual atmosphere of the UI. There are things that we must pay attention to when using said elements:
a) Spatial Relationships. Pay attention to the consistency of the padding for each element. Make sure to add some spacing between elements that have different functions.
b) Images. Images should be processed to have the same look and feel, for visual consistency. When enlarging images, choose how to present them to users, whether to open them in a new tab, showing them in pop-up boxes, or overlays, etc., but not the combination of them. Pick a specific style and stick with it for the interface.
c) Shape and Size. Elements with bigger size means greater importance. Moreover, similar types of elements should have the same size and look (such as rectangle for all buttons). Gestalt principles state that difference in appearance might suggest difference in functionality.
3. Color
Consider very carefully the colors of the website we’re trying to create. The hue, its placing, and the interaction with other colors have emotional impact to the users. Different colors evoke different emotions to the users, such as green suggesting prosperity, blue suggesting trust, red suggesting passion, etc. Select a color palette that best represents the website, and stay consistent with it. If we want to highlight an element, use colors that complement each other.

To conclude, a successful web User Interface design should prioritize visual interaction, as it affects users on a subconscious level. Evaluate the three areas described, and present visual consistency that users can appreciate, whether they realize it or not.

Author: Jeffry (1901466471)
Supervisor: Dewi Suryani, S.Kom., M.Eng. (D5878)

Published at : Updated
Written By
Dewi Suryani, S.Kom., M.Eng.
Subject Content Coordinator Database Systems | School of Computer Science

Periksa Browser Anda

Check Your Browser

Situs ini tidak lagi mendukung penggunaan browser dengan teknologi tertinggal.

Apabila Anda melihat pesan ini, berarti Anda masih menggunakan browser Internet Explorer seri 8 / 7 / 6 / ...

Sebagai informasi, browser yang anda gunakan ini tidaklah aman dan tidak dapat menampilkan teknologi CSS terakhir yang dapat membuat sebuah situs tampil lebih baik. Bahkan Microsoft sebagai pembuatnya, telah merekomendasikan agar menggunakan browser yang lebih modern.

Untuk tampilan yang lebih baik, gunakan salah satu browser berikut. Download dan Install, seluruhnya gratis untuk digunakan.

We're Moving Forward.

This Site Is No Longer Supporting Out-of Date Browser.

If you are viewing this message, it means that you are currently using Internet Explorer 8 / 7 / 6 / below to access this site. FYI, it is unsafe and unable to render the latest CSS improvements. Even Microsoft, its creator, wants you to install more modern browser.

Best viewed with one of these browser instead. It is totally free.

  1. Google Chrome
  2. Mozilla Firefox
  3. Opera
  4. Internet Explorer 9