空心圖標真的比實心圖標更難識別嗎?
去年夏天,設計師Aubrey Johnson在Medium?上發(fā)表了一篇批判ios7的文章。Jonhson指出蘋果的新空心圖標比實心圖標在視覺上更加復雜,給用戶帶來認知疲勞, 這樣會讓用戶對這樣的界面產(chǎn)生視覺疲勞而厭倦使用。這篇文章很快就被廣泛的分享、討論,一些設計師認為這是明智的建議,但也有一些評判它夸大了事實,太過 于簡單并且缺乏有效的證據(jù)
以下在ios7?選項卡上面的實心和空心圖標為例子。被選中的圖標用了實心圖標。沒有被選中的圖標用了空心圖標。
作為一個在Viget?中從事人機和用戶體驗的實習生,我看到了一個有趣的機會來用于證實和測試?Johson的闡述。為了找到空心圖標是否為用戶 帶來更多認知負擔這個問題的答案,我開發(fā)了一個用來度量用戶對不同視覺風格圖標選擇的速度和準確性的?Web app。從研究一千多個測試參與者的資料中,我發(fā)現(xiàn)空心圖標不一定比實心圖標的少用。然而結(jié)果還是有些復雜。
圖標
首先,這個討論是聚焦在一個特定類型的圖標:眾所周知的選項卡或?簡易導航的扁平化單色圖標,你通常會在手機?app屏幕底部看到一行四五個這種圖 標,因為底部欄的圖標一般作為導航應用程序的部分,用加亮的方式指出哪個部分是當前活躍的在某種程度上來說是很重要的。隨著ios7的推出,蘋果開始用兩 種互補的圖標風格來展示這些狀態(tài):一個實心的圖標用來展示活躍或被選中的狀態(tài)而空心圖標來展示不活躍或沒有被選中的狀態(tài)。據(jù)我所知,蘋果是目前唯一用著兩 種風格的基本圖標的軟件開發(fā)者。
被用來測試的20?個圖標是從ios,安卓和?Windows Phone網(wǎng)上可用的圖標集中借過來用的。
Speech Bubble圖標是直接從?Johnson的文章中借過來的。
測試
在Viget?中Nate Hunzaker?的技術(shù)指導下,我編寫了一個app來進行測試。你自己進行測試會比我講解更容易理解,我盡量簡單的描述下。
我承認實心和空心風格之間的區(qū)別的定義是不明確和松散的。一個圖標可以同時有實心和空心兩種風格。為此,我挑選了一個系列圖標來進行研究,研究顯示 實心和空心版本之間存在相當明確的區(qū)別。每一個圖標也代表了一個具體的對象并且使用文字標簽,這樣可以避免參加測試的人有過于大量的認知負擔,他們只需要用它的圖標去匹配名字。
結(jié)果
超過10?天對數(shù)據(jù)的收集,完成了?1260個圖標識別測試,超過?25000個圖標識別實驗,年齡偏向?18-40的蘋果用戶。這說明選擇的時間幾乎就只有三秒,標準偏差為?1.5秒。
平均20個圖標,空心圖標的選擇比實心圖標慢?0.1秒,這似乎支持了Johnson對空心圖標比實心圖標需要更多的認知負擔。
我至今還沒有提過,其實我的研究中圖標風格還包含另外一種審美:圖標顏色。每一個實驗實際上是圖標用四種不同類型的顏色風格組合體現(xiàn):
- 實心黑在白底上
- 空心黑在白底上
- 實心白在黑底上
- 空心白在黑底上
在實驗中用來四種顏色合并(黑色圓圈在本文中用于演示。由于實驗,白在黑上的圖標在一個連續(xù)的黑背景上顯示)
把數(shù)據(jù)分成四個小組(我將它稱之為雙向方差分析統(tǒng)計技術(shù))對圖標選擇速度進行更深入分析。用這個技術(shù)我發(fā)現(xiàn)更多微妙的結(jié)果:白在黑上的圖標比其他三種顏色風格合并的慢了大概?1.7秒。換句話說,對黑在白上的圖標。是否圖標用實心或空心對選擇速度沒有顯著的影響。
同樣的,對于實心圖標,是否用黑在白上顏色沒有影響。然而,當一個空心風格結(jié)合白在黑上顏色方案,選擇的次數(shù)會多一些。
每一種顏色風格的選擇次數(shù)的平均值的不同。只有空心白在黑底上的圖標顯示出差異(眼睛圖標代表?20種圖標的平均值)。
這只有相當小的影響,但是從超過?1000個用戶的數(shù)據(jù)中顯示著確實存在。一個合理的猜測就是:如果我們認為黑色圖標是一種默認的審美,加上層次化風格在使用上就有一種被激活的感覺。這看起來相當直觀。
但有還有一些對這個結(jié)論表示不服的。為了從數(shù)據(jù)中得到更多細節(jié),我自己對每?20個圖標進行風格和顏色影響進行研究。我發(fā)現(xiàn)其中的矛盾是與上面結(jié)果 展示的不一樣的。幾乎一半的圖標(?9個)顯示圖標的風格一點都沒有影響,意味著實心和空心圖標是和空心圖標識別是一樣快。在其他十一個圖標中確實顯示出風格的影響,實際上三個空心圖標表現(xiàn)得更好。事實上,Speech Bubble圖標從整體和平均上顯示一個完全相反的影響:實心黑色版本比其他所有版本的選擇慢。但你考慮大部分我們碰到?speech bubble圖標是要么用白色要么用輪廓風格(或者都是)展示時這很容易解釋的。一個實心的?black speech圖標沒有幫助快速識別的典型特征。
值得一提的是,圖標的樣式和顏色對參與者的正確選擇提示圖標的能力沒有太大的影響,除了一個圖標——鎖,當鎖用黑間白展示可能會稍微有點識別不出來。我不確定為什么會這樣,但是鎖的圖標在多個數(shù)據(jù)指標上都有異常,它是最容易被認錯的圖標和選擇最慢的圖標。
約翰遜的警告在用戶界面中不應該使用空心圖標并沒有真實用戶支持的證據(jù)。首先,一個圖標的風格并不孤立存在,它與顏色的搭配也有關系。在任何情況 下,小的差異并不會影響識別速度又或者是造成視覺疲勞。多數(shù)設計師可能會根據(jù)空心/實心的理論設計圖標,但是設計出來的圖標在視覺上是一種復雜的運動,不適合簡單的二元規(guī)則。
事實上,仔細看看蘋果人機界面指南:https://developer.apple.coml,里面有實心/空心圖標的設計建議,當然也有一些圖標不適用這些建議,同學們可以學習一下。
原文地址:CURT ARLEDGE
譯文地址:BESD設計實驗室
閑得蛋疼 閑的膩歪了
如果搬運的時候可以給出文章的框架就perfect了。[ali哇]
嗯 分析的不錯,我覺得黑色實心圖標有一種未解鎖的感覺。