視覺元素在產(chǎn)品ux交互設(shè)計中所起的作用


視覺信息時代

在視覺信息時代,我們幾乎將看到的所有信息都有意識或無意識地汲取到腦海中,這些信息在我們的決策和行為中起著巨大的作用。

 

在這個時代,每天有超過5億人在Facebook上觀看視頻(其中有85%被靜音)Snapchat每秒共享9,000張照片,每天有超過5億人使用Instagram,在上面評論和發(fā)布圖片故事。

 

第一個原因來自我們的DNA。埃里克·詹森(Eric Jensen)在他的《基于大腦的學習》一書中指出,40%的腦神經(jīng)都與視網(wǎng)膜相連。致力于視覺的神經(jīng)元比其他所有感官的總和還多,大概90%出現(xiàn)在我們腦海中的事物都是由視覺刺激觸發(fā)的。此外,最近的研究表明,大約65%的人是視覺學習者,他們傾向于在與視覺元素相關(guān)聯(lián)的情況下進行學習并與信息互動。要知道,我們的大腦可以在短短13毫秒內(nèi)捕獲眼睛看到的圖像,這速度比眨眼快10倍。

 


我們使用圖像來表達自己已有數(shù)千年的歷史。通過繪畫,人類可以傳達周圍世界的關(guān)鍵信息,例如繪制地圖和警告掠食者。就像我們在有形世界中所做的一樣,我們還使用視覺元素來代表主觀性:我們周圍的墻壁上不斷描繪著神明,民族,精神和當?shù)匚幕?/p>

 

作為設(shè)計師,我們知道:在用戶界面上使用視覺元素(例如圖標,形狀,顏色,字體,圖像和插圖)會對我們設(shè)計的產(chǎn)品帶來相關(guān)影響。



但是這些視覺元素有效嗎?他們?nèi)绾问刮覀兪芤??他們有什么影響?最后,是什么使我們相信它們在用戶與我們設(shè)計的產(chǎn)品的交互中起著重要的作用?


在本文中,我們將探討視覺元素如何幫助我們:

  1. 加快數(shù)據(jù)感知(speed up data perception)

  2. 保留更長時間的數(shù)據(jù)(retain data for much longer)

  3. 觸發(fā)愉悅(trigger pleasure)

  4. 引導注意力(guide attention)

  5. 塑造通用型界面(make user interface universal)

 

1.加快數(shù)據(jù)感知

視覺感知是向大腦發(fā)送信息的最有效,最快的方法之一。根據(jù)S.Thorpe,D.Fize和C.Marlot的一項研究,即“人類視覺系統(tǒng)中的處理速度”,大腦處理圖像只需要150毫秒,而理解圖像的意義又需要100毫秒。


 

研究表明,我們的大腦識別圖像,插圖和圖標的速度比識別單詞或中等長度的內(nèi)容快6萬倍。顯然,使用插圖,圖像和圖標并不能替代文字和標簽。然而將它們組合在一起,您可以更快,更有效地進行界面的處理,尤其是當我們需要在幾秒鐘內(nèi)完成許多基本交互時。

 

但是,并非所有用戶的識別率都相同。一項對60名參與者進行的了解數(shù)字界面交互中圖標識別速度的研究表明,盡管性別不是一個相關(guān)因素-男性候選人的識別率僅比女性候選人高4%。與此同時,認知隨年齡變化很大。

 

60歲以上的參與者對圖標含義的識別率達到60%,而20-30歲之間的參與者對圖標含義的識別率接近90%,這是一個很大的差異。

 


此外,與符號圖標相比,顯示真實物體的圖標更易于識別。這就是為什么在為界面設(shè)計視覺組件之前考慮用戶背景如此重要的原因。

 

例如,簡單警報圖標的識別率變化60 pp。在下圖中-使用時鐘表示警報-識別率是100%,而使用日歷圖標的識別率僅為40%。



2.保留更長時間的數(shù)據(jù)

即使圖像只暴露一次,人類也具有令人印象深刻的長期記憶能力。這使得在我們的產(chǎn)品流程中常常使用視覺刺激加深用戶體驗。

 

羅杰·謝潑德(Roger Shepard)進行的一項名為“學習10000張圖片”的研究表明,在兩次替代測試中被要求記住612張圖片的觀眾在大約6秒鐘內(nèi)達到了98%的命中率。而測試者將類似的記憶單詞和簡短句子進行測試,該比率則下降到88%。



實驗還表明,圖片記憶始終優(yōu)于語言記憶。首先,因為圖像的存儲容量幾乎是無限的,其次是因為圖像比文本具有更好的存儲率。


 

通過比較視覺環(huán)境和聽覺環(huán)境,我們?nèi)阅芸闯霾町?。埃德加·戴爾(Edgar Dale)的一項研究表明,當人們聽到信息時,三天后他們記住該信息的可能性為10%。但是,當相同的信息與視覺元素(圖像,圖標或顏色)配對時,即使在相同的3天之后,仍保留了所傳輸內(nèi)容的近65%。

 

因此,通過使用視覺效果,我們可以更快地識別信息(如前所示,為250毫秒),并且在大腦中的保留時間更長(在3天內(nèi)可持續(xù)高達65%)。

 

當然,其他變量也會影響信息吸收。年齡,主觀性和對比曲線會影響識別和記憶,但是視覺組件的使用仍然是改善用戶學習曲線的有力工具。

 

3.觸發(fā)愉悅

當我們的大腦通過少量的認知努力就可以快速理解內(nèi)容時,我們的身體就會做出積極的反應,從而激發(fā)愉悅感。研究人員Piotr Winkielman和John T. Cacioppo進行的一項名為“輕松地讓臉上露出微笑”的研究表明了這一點。

 

實驗讓參與者觀看了一系列圖像,同時監(jiān)控了他們的表情。這些圖像中的一些更易于識別,而有些則難以識別。

由于表情的變化太細微且太短,以至于觀察者無法察覺,因此將設(shè)備放置在臉頰,眉毛和眼睛周圍,以監(jiān)視圖像上情緒波動的跡象。

 

兩項研究的結(jié)果均表明,易于處理的刺激與肌肉區(qū)域更大的活動有關(guān),這是控制我們微笑的原因。


 

如預期的那樣,當人們更容易看到和識別圖像時,人們會露出輕微的微笑和額頭放松,并產(chǎn)生認知舒適感和良好的感覺。

 

4.引導注意力

視覺元素可以改善整個界面的導航。字體,空格,CTA,字體和圖像都可以作為分區(qū)之間的可視分隔符,使用戶可以清楚地看到它們前面發(fā)生的事情。

 

尼爾森·諾曼集團(Nielsen Norman Group)進行的一項研究發(fā)現(xiàn),即使文本內(nèi)容占用了316%的屏幕空間,用戶觀看演講者照片所花的時間也比閱讀他們的傳記要多10%。



另一個示例是Uber如何通過更改視覺元素來優(yōu)化著陸頁。



用戶對右側(cè)新標題的顯示時間為1秒鐘,而左邊舊版本中,用戶花了1.5秒才能看到標題。


為什么會有這些變化?盡管進行了一些細微的調(diào)整(例如,將頁面標題居中和改進內(nèi)容),但對轉(zhuǎn)換影響最大的還是更改了封面圖像。

 與頁面內(nèi)容相比,左邊界面中男孩“看著”用戶吸引了用戶過多的注意力,而右圖看著文本的男人則將所有用戶注意力重定向到了標語。


圖像上字符位置的細微差別使用戶的注意力大大不同。

 

5.塑造通用型界面

最后,界面中的圖標,顏色,插圖和其他類型的視覺組件可以使應用程序或網(wǎng)站更易于訪問,尤其是當來自不同國家的人們使用該應用程序或網(wǎng)站時。


使用圖標可以提高用戶對內(nèi)容的整體理解度。此外,圖像為受文字識別障礙(例如閱讀障礙),閱讀困難或無法閱讀的人拓展了感知的界限

每天更新,
全站高品質(zhì)素材免費下載!