UI設計的5個重要的經驗教訓

有些人常誤認為設計就等同于創造力。實際上,設計不僅僅是常被描述的創造力的唯一結果。優秀的用戶體驗設計師往往是解讀人心的好手。他們能夠洞察用戶是如何看待一個設計并區分其優劣的。

作為設計師,為了能提出解決用戶問題的方案,理解用戶的痛點是至關重要的。這個過程包括理解用戶行為,與他們產生共情,從而創建出一個能提升用戶工作效率的平臺。

為了幫助你理解用戶的感知,我們從設計心理學原理中提取了5個重要的經驗教訓,讓我們開始吧!

關注“少即是多”和“多即是少”

想象一下,去餐館時你需要從有100多個菜品的菜單中做出選擇。很明顯,從100多道菜品中選菜比從既定的20道菜品中做出選擇要花更長的時間。設計也是如此。

大多數設計師對用戶設計都有一個普遍性觀點,那就是為用戶提供有驚喜感的選項。毫無疑問,人們喜歡去做選擇,但太多的選項會令他們困惑。普通人一次能處理的信息量是有限的。

這與席克定律(Hicks Law)有關,如果給人們提供更多的選擇,那他們花在做決定上的時間也會更多。無論人們有意(或無意)察覺,人們做的決定很大程度取決于他們認為“是否值得”。他們不僅會權衡成本,而且還會考慮決策帶來的收益,這被稱為“成本效益分析”。

734
圖片來源:?https://lawsofux.com/

圖片:席克定律。選擇的數量越多,越復雜,決策所需要的時間越長。

關鍵點:

  • 更多的選項會導致更長時間的思考并做出決定;
  • 將復雜的任務分解為更小的步驟,為用戶簡化選擇;
  • 強調推薦選項,避免用戶無所適從。

那么如何將席克定律應用到你的產品設計中?

這里有一個簡單的原則。設計師應時刻牢記用戶只會帶著特定目標訪問你的網站,不要提供過多的選項困擾他們。消除各種過度的強調、不必要的鏈接、文字、圖片、按鈕,讓用戶能夠找到他們需要的,并盡可能快速的、毫不分心的完成任務。還有一條經驗是將復雜的過程分解為簡單且可控的多個小任務。通過提供清晰的路徑,讓你的用戶無縫導航,并盡可能早地激發??!

讓最重要的信息保持在折疊線之上

734
圖片來源:?https://lawsofux.com/

圖片:網頁閱讀的F型規律。
用戶的視線通常先在內容區域的頂部進行水平移動。這構成了F上面那一橫。接下來,用戶的視線會向下一些,移動到第二條水平線,通常這條線會比之前的水平線短些。這是F下面那條較短的橫線。最后,用戶的視線沿著左側垂直向下瀏覽內容。在緩慢而有條理的瀏覽時,在眼動熱力圖上會出現一條實條紋,在快速瀏覽的時候會出現一些斑點。這就是F的最后一豎。

關鍵點:

  • 第一行文字會比同頁面上后幾行文字獲得更多的關注。
  • 每行左側的頭幾個詞會比同一行中后續文字獲得更多的視線停留。

根據眼動追蹤的相關研究,大多數用戶習慣以相似的眼睛注視模式(眼動瀏覽方式)瀏覽網頁。研究表明,大多數的網頁熱力圖很好體現了訪客的集中注視區域和注視時長。

最常見的瀏覽模式通常會形成一個“F”型區域,代表用戶的短時閱讀的跨度范圍。用戶首先在屏幕頂部的一條水平線上瀏覽,然后向下移動一些并在水平方向的一小片區域內閱讀。

根據尼爾森諾曼小組(NielsenNorman Group)在有45,237個PV(網頁訪問量)的網頁上進行的一項研究表明,人們往往只閱讀頁面上約20%的文本。更糟糕的是,在內容較多的網站上,每增加100個字,人們只會額外多投入4秒。

那么,用戶體驗設計師如何在他們的用戶體驗策略中利用這一規律呢?我們應該把關鍵信息放在被瀏覽最多的注視點上,并且盡量用簡短但引人注目的標題來吸引用戶的注意。

在一個人們不逐字閱讀的世界里,尼爾森諾曼小組提供了以下指導原則來讓文字更易掃讀。

  • 高亮關鍵詞
  • 意義明確的副標題
  • 帶項目符號的列表
  • 每段文字表達1個觀點
  • 倒金字塔結構——從結論開始
  • 字數為傳統寫作的一半(或更少)

 

在設計中謹慎運用色彩

色彩的美妙之處在于能幫助人們識別和區分相似物體。從心理學上講,色彩是人類情感的驅動力。人類通過大腦的視覺系統感知或創造色彩,這意味著色彩實際上是主觀的,而不是客觀的。

設計師通常將色彩作為吸引用戶注意力的一個重要影響因素。它為設計師提供了一種與產品品牌建立聯系的紐帶。大多數用戶的購買時長和購買決策很大程度上取決于色彩。

但色彩心理學如何幫助設計師創建一個更好的用戶體驗設計策略呢?

根據喬·哈洛克(Joe Hallock,Azure的首席設計經理)的觀點,性別間的色彩偏好存在顯著差異。男性和女性最喜歡的顏色是藍色,最不喜歡的顏色是橙色。此外,明艷的顏色通常是男性的首選,柔和的顏色是女性的首選。

這些發現清楚地說明了為什么藍色是設計師最喜歡的顏色,為什么橙色使用得最少。不過,我們不應該僅根據用戶喜好使用顏色,還應該考慮用戶的行為和偏好。

734
圖片來源:?https://lawsofux.com/

圖片:不同性別對顏色的偏好不同

關鍵點:男性更喜歡明艷的顏色,女性更喜歡柔和的顏色。

 

清晰表達哪些部分是相關的,哪些不是

在設計過程中,設計師通過展示元素的相關和不相關來表達結構和聯系會更有意義。相關(相似性)或不相關(差異性)可以通過使用諸如形狀、顏色和尺寸等基本元素得到體現。

例如,salon的(舊版)網站由兩個部分組成,這兩個部分按照它們的相對尺寸分組。

734

在這里,用戶可以清楚地看到兩個獨立分組,分別是左側的頭條新聞和右側的熱門新聞。 盡管這兩個組做的事情一樣,例如展示文章, 但是通過使頭條新聞部分尺寸更大,并以不同顏色強調作者姓名,而使用戶更加關注它。

這與相似定律有關,即人眼傾向于將設計中的相似元素視為一個完整的圖片、形狀或組,即使這些元素是分開的。

734
圖片來源:?https://lawsofux.com/

圖片:相似定律。人眼傾向于將設計中的相似元素視為一個完整的圖片、形狀或組,即使這些元素是分開的。

關鍵點:確保鏈接、導航與普通文本有視覺上的區分,且保持一致的樣式。

如果上面的例子仍然不能說服你,那么讓我們來看看相似定律是如何在設計中表達“關聯”的。

鏈接和導航

鏈接和導航是為你的用戶快速提供整站導航的最常用方法。通常,讀者們不會為了找到他們想要的內容去閱讀整個頁面, 他們會嘗試多次鏈接跳轉或使用導航來找到相關信息。

設計師有意或無意地把運用相似定律作為網頁設計的日常。相似定律可以解釋為什么如此多的設計師喜歡使用帶藍色下劃線的文本作為超鏈接樣式,或至少讓所有鏈接看起來明顯且一致。

美國船主協會(Boatus)的官方網站使用下劃線和顏色來表達導航鏈接分組之間的關系。這使閱讀者能夠意識到相似的導航項是相關的,或者在網站的數據層級中具有相似位置。

Src=http Pic2.zhimg.com V2 4dc17e02e469a32d60b79a535277001c 1440w.jpg&refer=http Pic2.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt.jpeg

通過組合相似內容和區分不同內容來簡化視覺層級

與我們的app開發者工作過的大部分客戶都曾這樣說:“我們希望App設計簡潔易懂,給用戶留下深刻印象?!?/p>

用戶們不喜歡雜亂無章的設計。一項由Hubspot組織的調查稱,“訪客看重的是能輕松找到信息,而不是漂亮的設計或花哨的用戶體驗”。

Uxrenyi 323 01 1024x151

圖片來源: www.hubspot.com

設計師應該將相似的元素、信息或內容進行分組,進而簡化布局。正確組合這些元素將提升用戶體驗。

這與“接近法則”有關,該法則認為,相關的元素應彼此靠近,而不相關的元素應相互遠離或直接分開。

734
圖片來源:?https://lawsofux.com/

圖片:接近法則。人們傾向于將相鄰或接近的物體歸為一組。

關鍵點:接近定律可以有效地讓用戶一眼就自動將不同內容分組。

設計師借助“接近法則”來提升可用性主要有兩個方法:

幫助你的用戶找到他們正在尋找的東西:
你是否曾看到過那些分類雜亂無章網站。如下圖,假設用戶正在你的網站上尋找不同種類的 pc 和筆記本電腦。如果你想讓他們很容易地找到這個類別,比起提供(左側圖片)亂七八糟的分類,更明智的做法是將相關類目分組到“計算機和辦公用品”(右側圖片)。

構建元素的視覺層級以幫助人們了解頁面結構:
構建例如字體層次、顏色層次等視覺層次結構可以幫助設計師甚至非設計師設計出美觀的頁面,并吸引正確的注意力。

提升你的UX設計水平

有一句諺語說: “如果一切都突出,那就什么都沒突出?!?這也適用于用戶體驗設計。 設計師不應該用只是看上去好看的東西來愚弄用戶。事實上,他們必須在設計時考慮到用戶內心的需求。 在這篇文章中,我們解釋了5個心理學原理,可以幫助你提高設計水平。

原文來源:https://uxdesign.cc/5-key-lessons-from-psychology-in-design-to-help-you-advance-ux-2cbb837b4581
作者:Michael Williams