The importance of clarity in UX
How visual clarity and aesthetics can impact the whole user experience.
Times, since the very first occurrences of web design in the 90’s, have changed a lot design-wise. The particular technology and its applications got more stable. Human-computer interaction (HCI) was deeply researched, designers enlarged their understanding of it. Users have updated their expectations on what the web experience should feel like.
This is the evolutionary path of a tech that becomes widely available and used worldwide. It seems like those who didn’t manage to evolve accordingly in this volatile digital ecosystem were naturally pushed sideways. Of course, that also goes for poorly designed websites — that result in substandard experiences.
Clarity in web design
One of the most critical components of modern web design — sometimes left out of discussion — is clarity. In my opinion, it has direct influence over what is perceived as competent, intuitive design. The ramifications of a well (or badly) designed website on user experience is thoroughly documented in countless case studies across the web.
The challenge is about taking things that are infinitely complex and making them simpler and more understandable. — Robert Greenberg
In many cases simplicity and clarity are two terms that are used to describe the same thing. Greenberg’s quote grasps the essence of both of them, in a way.
Summing it up, clarity is revolved around the transmission (or communication) of information, and the information quantity itself. Therefore, it engulfs the meaning of simplicity, as well.
With the term ‘Clarity’, I refer to how accessible and comprehensible the informational load of a given webpage is. This, consequently, envelops everything from navigational paths and the whole underlying interaction system to copywriting and user interface design.
The topic of ‘Clarity in design’ caught my interest when I joined VisualEyes’ team, in the fall of 2019, and I began to dig deeper into the subject.
In this piece, I’ll attempt to further investigate the significance of visual clarity, a subset of overall clarity.
Visual clarity
Visual clarity is the measure of how effectively visual design prioritises and conveys information. It is determined by all the components of a webpage that can stimulate visually. Clarity produces meaningful, unobstructed interaction. It is, also, instrumental when perceiving something as beautiful.
The ability to simplify means to eliminate the unnecessary so that the necessary may speak. — Hans Hofmann
You can get a glimpse of how visual clarity impacts interaction with a website in my previous article, “How Airbnb drives users’ actions with their landing page design”, in which I tried to identify some of the elements that made Airbnb’s landing page clear and communicative.
Achieving visual clarity through thoughtful decisions, basically ensures that user’s cognitive resources will not be depleted. Designers must aim to create frictionless experiences and reduce the load users have to bear, while interacting with technology.
In short, I’ll try to break down and go through the following three subjects:
- How visual clarity relates to aesthetics
- How quickly overall aesthetics are judged by human users
- How aesthetics impact perceived usability
Clarity bears beauty
Visual complexity — the opposite of clarity in our paradigm — is defined as the level of detail or intricacy contained within an image. In web design, complexity is mainly represented by the perceptual dimensions of quantity of objects, clutter, white space, symmetry, organisation, and variety of colours.
When examining the effects of visual complexity in human cognition in their study, Eleni Michailidou, Simon Harper and Sean Bechhofer concluded that visual complexity of a page is negatively related with user’s perception of how organised, clear and beautiful a page looks.
The researchers tested and, then, validated the three following hypotheses:
- The quantity of visual elements (stimuli) is positively correlated with perceived complexity. So, more visual elements mean higher complexity.
- The quantity of visual elements is negatively correlated with perceived aesthetics. This means that less visual stimuli produce more aesthetic outcomes.
- Visual complexity is directly related to aesthetic qualities. Data analysis showed that more clear, beautiful webpages were also perceived as simpler (scored low on Visual Complexity).
Ultimately, one can assess that complexity is negatively related with perceived aesthetics. Therefore it is suggested that we, designers, have to carefully balance designs between aesthetic appearance and visual complexity.
In a matter of milliseconds
Visual clarity plays an essential role in the foreground of user experience, as its impact is determined in the very first seconds of the interaction and governed by the sensory system of the individual.
Although they take place in a small fraction of the total interaction timespan, the instantaneous cognitive responses to the visual stimulation are imperative to the experience’s evaluation by the user.
Results from an academic experiment conducted by the Human-Oriented Technology Lab of Carlton University, suggest that aesthetics’ (or visual appeal’s) judgement precedes the rest of the cognitive functions, thus influencing the totality of the subsequent experience. The same experiment also proposes that the time frame in which the first impressions form, can be as low as 50 milliseconds.
Aesthetic-usability effect
The aesthetic-usability effect, currently documented as a UX law, allows us to delve deeper into the relationship of visual appeal and user experience.
Demonstrated in the study of Kurosu and Kashimura, the aforementioned effect describes the paradox that humans perceive more aesthetically pleasing designs as more usable and intuitive than the less aesthetic ones. As the two researchers concluded, users are heavily influenced by the aesthetics of any given interface, even when evaluating the actual functionality of the system. This implies that apparent usability is less correlated with the inherent usability when compared to apparent aesthetics (or beauty).
From the balance point and onwards, aesthetics contribute to virtually perceiving system’s usability as better from the actual underlying usability.
A common, and valid, interpretation of the aesthetic-usability effect is that: “Users have the tendency to forgive system’s usability defects when they perceive it as being aesthetically pleasing.”
This suggests that designers (as well as the whole product team) should seek to enhance the aesthetic aspect of the developing product along its inherent usability.
Interface design has the potential to conceal usability flaws and systemic inconsistencies.
Hacking user experience
Through the above analysis, one can conclude that:
- Visual clarity is directly correlated with perceived aesthetics, in a positive fashion.
- Assessment (through human cognition) of a webpage’s aesthetic level is completed in under a second.
- Perceived aesthetics impact practical usability.
“People ignore designs that ignore people” –Frank Chimero
Compiling all these together, one can get a good grasp on the importance of a clear, straightforward design:
Firstly, it would ensure that the user will not be negatively biased towards the following experience, due to subpar aesthetics.
Secondly, it could establish the system’s usability as compelling, even if it isn’t. Therefore, visual design impacts immensely the whole user experience during the interaction span.
Thanks for tuning in!
