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 | 作品集