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.

自90年代首次出现Web设计以来，时代已在设计方面发生了许多变化。 特定的技术及其应用变得更加稳定。 对人机交互(HCI)进行了深入研究，设计师扩大了对此的理解。 用户已经更新了对Web体验的期望。

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.

清晰性是现代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.

当我于2019年秋天加入VisualEyes团队时， ` `设计的清晰度''这个话题引起了我的兴趣，并且我开始更深入地研究这个主题。

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.

在上一篇文章“ Airbnb如何通过目标网页设计来驱动用户的行为”中 ，您可以窥见视觉清晰度如何影响与网站的交互，其中我试图找出使Airbnb目标网页清晰，交流的。

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.

当在他们的研究中研究视觉复杂性对人类认知的影响时，Eleni Michailidou，Simon Harper和Sean Bechhofer得出结论，页面的视觉复杂性与用户对页面如何组织，清晰和美观的感知负相关。

The researchers tested and, then, validated the three following hypotheses:

研究人员测试了以下三个假设，然后进行了验证：

1. The quantity of visual elements (stimuli) is positively correlated with perceived complexity. So, more visual elements mean higher complexity.

   视觉元素(刺激)的数量与感知的复杂性呈正相关。 因此，更多的视觉元素意味着更高的复杂性。

2. The quantity of visual elements is negatively correlated with perceived aesthetics. This means that less visual stimuli produce more aesthetic outcomes.

   视觉元素的数量与感知的美感负相关。 这意味着较少的视觉刺激会产生更多的美学效果 。

3. 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.

尽管它们发生在总交互时间的一小部分，但对视觉刺激的即时认知React对于用户评估体验至关重要。

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.

卡尔顿大学以人为本技术实验室进行的一项学术实验结果表明，美学(或视觉吸引力)的判断先于其余的认知功能，从而影响了随后的体验的整体。 相同的实验还提出，形成第一印象的时间范围可以低至50毫秒 。

审美可用性效应 (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.

当前以UX法记录的美学可用性效应使我们能够更深入地研究视觉吸引力与用户体验之间的关系。

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).

在对Kurosu和Kashimura的研究中证明，上述效果描述了一个悖论，即与较不美观的设计相比，人类认为更美观的设计更实用，更直观。 正如两位研究人员总结的那样，即使评估系统的实际功能，用户也会受到任何给定界面的美观的极大影响。 这意味着与表观美学(或美感)相比，表观可用性与固有可用性的相关性较低。

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

“人们忽略设计而忽略人们” – 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!

感谢收看！

Give me a shout: Twitter |Instagram | Linkedin | Portfolio

给我喊： Twitter | Instagram | Linkedin | 作品集