好圖標怎么做?教你從四個方面來評價圖標設計的質量

戴均開:圖標在頁面設計中被廣泛使用凯力,圖標設計的好不好茵瘾、圖標應用效果如何,是設計師非常關心的問題咐鹤。本文作者提出從發(fā)現(xiàn)性拗秘、理解性、預測性祈惶、吸引力這4個方面來評價圖標雕旨,也為圖標設計構思提供了一個方向。

引言

設計師經(jīng)常使用圖標來節(jié)省頁面空間捧请、提高用戶識別速度奸腺。隨著像智能手機、可穿戴設備等這些小屏設備越來越流行血久,圖標的使用也更多了突照。但是,這些圖標是否可用氧吐?唯一的方法就是對這些圖標進行用戶測試讹蘑。

如何進行圖標測試

不同方法可以解決圖標可用性的不同方面末盔,判斷圖標是否可用可以從以下4個量化指標來測量:

1)發(fā)現(xiàn)性:用戶能否發(fā)現(xiàn)頁面上的圖標;

2)理解性:用戶能否理解圖標的意義座慰;

3)預測性:用戶能否猜到圖標點擊會發(fā)生什么陨舱;

4)吸引力:圖標是否美觀;

以上4個指標都是圖標設計中起著關鍵性的作用版仔,但需要獨立去思考如何來提升游盲。

圖標測試方法

圖標評價的方法有很多,要根據(jù)評價目標和所處的設計階段來決定測試方法蛮粮。圖標評價方法可以分為2大類:無背景的圖標測試益缎、基于背景的圖標測試,區(qū)別在于圖標測試時然想,是否將圖標放在頁面中進行用戶測試莺奔。

無背景的圖標測試,就是單獨用圖標(測試素材只有圖標变泄,沒有頁面)進行測試令哟;基于背景的圖標測試,就是圖標放在實際的頁面中進行測試妨蛹。

需要注意的是屏富,盡管采用無背景的圖標測試,受測用戶也必須目標用戶蛙卤,熟悉產(chǎn)品行業(yè)并有相關背景知識或概念役听。

發(fā)現(xiàn)性測試方法

為了評估圖標的發(fā)現(xiàn)性,需要將圖標放在頁面中實際位置表窘,基于背景的圖標測試可以用于判斷:多個相似的圖標放在一起是否會導致用戶找到目標圖標會比較困難典予,或者放在太隱蔽的位置或周邊有很多廣告導致圖標被用戶忽視。

查找時間測試是用于判斷用戶能不能容易地發(fā)現(xiàn)圖標的最好方法乐严,在測試過程中瘤袖,受測用戶需要按任務點擊圖標,計算受測用戶成功找到目標圖標的操作時間昂验、首次點擊準確率捂敌。

理解性測試方法

理解性測試最好進行無背景的圖標測試:只向受測用戶呈現(xiàn)單獨的圖標(而沒有頁面內(nèi)容),讓受測用戶猜測圖標所代表的意義既琴,在某種意義上來說占婉,這種測試也是洛夏墨跡測驗的一種方式。這個測試的目的是保證圖標能夠被用戶容易地理解甫恩。

從用戶的描述或詞語中來獲得用戶對圖標的理解逆济,如果用戶的理解與圖標想要表達的意義/內(nèi)容不相符合,那就意味著需要重新構思圖標,重新設計圖標奖慌。

我們知道圖標都伴隨著文字標題抛虫,你可以會認為:先向用戶呈現(xiàn)圖標的名稱,再讓用戶從多個圖標方案中選擇一個與名稱最匹配的一個圖標简僧,這種測試方式更為合理建椰。但是我們不建議使用這樣的方法測試,因為在真實使用場景中岛马,用戶很可能只看圖標棉姐,而是不看圖標名稱。因此啦逆,在測試時使用以下方式更加合理:以某種方式讓用戶知道需要在這個頁面上查找某個功能伞矩,從而找到對應的圖標。

預測性測試方法

不僅需要用戶理解圖標的意義蹦浦,而且還需要預測圖標代表是是什么功能。實際上撞蜂,即使用戶不知道這個圖標是什么/叫什么盲镶,只要用戶知道圖標所代表的功能就夠了。

用于評價理解性的無背景圖標測試方式同樣可以用于評價圖標的預測性蝌诡。然而溉贿,預測性測試不是簡單地問用戶圖標代表了什么功能,而是當圖標點擊后浦旱,用戶期望發(fā)生什么宇色。不像理解性測試一樣,在理解性測試中颁湖,需要向用戶簡單(但盡量少)描述一下圖標所在系統(tǒng)/頁面宣蠕。

例如:告訴用戶手提箱是電商網(wǎng)站的一部分,請用戶找出能夠代表的圖標甥捺。在預測性測試中抢蚀,不能告訴受測用戶網(wǎng)站的任何具體信息,也不能告訴用戶任何產(chǎn)品相關的功能镰禾。通過這種測試方式皿曲,可以了解圖標的用戶心智模型。

另外吴侦,如果有多個圖標方案屋休,A/B測試也可用于判斷出哪個圖標的預測性最好。對于A/B測試备韧,需要分析不同圖標下的用戶行為差異劫樟,同時需要分析用戶是否存在這種現(xiàn)象:點擊了圖標然后又馬上返回到前一頁。

這個現(xiàn)象是一種探索行為,通常說明圖標的預測性比較差毅哗,表明用戶點擊圖標后听怕,對看到的內(nèi)容不滿意,從而返回原來的頁面虑绵。在測試不同的圖標圖形方案時尿瞭,不同圖標需要放在頁面相同的位置和使用相同的圖標名稱,保證沒有其它因素影響了用戶行為翅睛。

吸引力測試方法

圖標需要進行吸引力測試声搁,因為最普遍目標是使用圖標來增加用戶的吸引力,但不能保證所有圖標的吸引力都很好捕发。在圖標吸引力測試中疏旨,既要進行單圖標測試,也要進行圖標組測試(一個產(chǎn)品或頁面會有多個圖標扎酷,一個產(chǎn)品或頁面的所有圖標稱之為圖標組)檐涝。

吸引力測試的最簡單方法就是用戶對圖標吸引力進行1-7分的主觀評分。如果有多個圖標方案法挨,叫用戶選擇一個最喜歡的圖標谁榜,并解釋對某個圖標喜歡/不喜歡的原因。最后從多套圖標組選擇中凡纳,選擇一套最喜歡和最不喜歡的圖標組窃植。圖標組測試主要是為了避免整套圖標大多數(shù)圖標是好的,只要修改少數(shù)幾個圖標荐糜,整套圖標就可能是最適合產(chǎn)品/頁面的圖標組巷怜。

標準的可用性測試與圖標測試

標準的可用性測試可以發(fā)現(xiàn)一些圖標問題,但不能準確地發(fā)現(xiàn)圖標的所有問題暴氏。例如:在測試過程中延塑,用戶被其它一些頁面元素搞得不耐煩,甚至不能完成操作任務答渔。即使圖標存在問題页畦,但不準確地發(fā)現(xiàn)圖標的具體問題在哪里:是用戶沒有識別出圖標,還是用戶不能理解圖標的意義研儒,還是用戶沒有發(fā)現(xiàn)圖標豫缨?

由于存在多種可能的原因,所以不能單靠標準的可用性測試來評價圖標的可用性端朵。

產(chǎn)品開發(fā)周期

與用戶體驗研究方法一樣好芭,選擇測試方法時需要考慮產(chǎn)品所處的項目生命周期。

1. 規(guī)劃期:在早期的概念階段冲呢,主要使用有利于形成概念舍败、探索多種設計想法的測試方法。在這個適合進行無背景的理解性、預測性的圖標測試邻薯,用于判斷圖標使用的可行性和確定合適的圖標心智模型裙戏。

2. 執(zhí)行期:在設計和實現(xiàn)階段,主要使用有利于持續(xù)地幫助系統(tǒng)設計出最好的圖標方案厕诡。一旦圖標方案是可理解的累榜,主要持續(xù)地進行無背景的圖標吸引力測試,直至得到吸引力優(yōu)秀的圖標為止灵嫌。

接著進行有背景的圖標測試壹罚,將圖標放在真實頁面中,讓用戶去查找目標圖標寿羞,圖標查找時間測試用于量化評價圖標的發(fā)現(xiàn)性猖凛。可用性測試(開始使用紙面原型绪穆,后面使用高保真原型進行測試)可以在圖標意義理解性與可發(fā)現(xiàn)性方面給我們更多的發(fā)現(xiàn)辨泳。

3. 評估期:產(chǎn)品一旦發(fā)布,圖標測試主要用于評價圖標上線效果玖院、幫助圖標持續(xù)優(yōu)化菠红。基于可用性測試的基準測試司恳、圖標查找時間測試可以定期開展來跟蹤效果途乃。在圖標持續(xù)優(yōu)化的過程中绍傲,A/B測試是衡量和選擇圖標方案的最好方法扔傅。

原文地址:nngroup

譯文地址:aliued

關注互聯(lián)網(wǎng),關注硅谷堂烫饼。想了解更多關于互聯(lián)網(wǎng)崗位知識的信息猎塞,關注微信公眾號:硅谷堂(ID:guigutang)或下載“硅谷堂”APP。

最后編輯于
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末杠纵,一起剝皮案震驚了整個濱河市荠耽,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌比藻,老刑警劉巖铝量,帶你破解...
    沈念sama閱讀 216,651評論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異银亲,居然都是意外死亡慢叨,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,468評論 3 392
  • 文/潘曉璐 我一進店門务蝠,熙熙樓的掌柜王于貴愁眉苦臉地迎上來拍谐,“玉大人,你說我怎么就攤上這事⌒Γ” “怎么了践瓷?”我有些...
    開封第一講書人閱讀 162,931評論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長亡蓉。 經(jīng)常有香客問我晕翠,道長,這世上最難降的妖魔是什么寸宵? 我笑而不...
    開封第一講書人閱讀 58,218評論 1 292
  • 正文 為了忘掉前任崖面,我火速辦了婚禮,結果婚禮上梯影,老公的妹妹穿的比我還像新娘巫员。我一直安慰自己,他們只是感情好甲棍,可當我...
    茶點故事閱讀 67,234評論 6 388
  • 文/花漫 我一把揭開白布简识。 她就那樣靜靜地躺著,像睡著了一般感猛。 火紅的嫁衣襯著肌膚如雪七扰。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,198評論 1 299
  • 那天陪白,我揣著相機與錄音颈走,去河邊找鬼。 笑死咱士,一個胖子當著我的面吹牛立由,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播序厉,決...
    沈念sama閱讀 40,084評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼锐膜,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了弛房?” 一聲冷哼從身側響起道盏,我...
    開封第一講書人閱讀 38,926評論 0 274
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎文捶,沒想到半個月后荷逞,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,341評論 1 311
  • 正文 獨居荒郊野嶺守林人離奇死亡粹排,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,563評論 2 333
  • 正文 我和宋清朗相戀三年种远,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片恨搓。...
    茶點故事閱讀 39,731評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡院促,死狀恐怖筏养,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情常拓,我是刑警寧澤渐溶,帶...
    沈念sama閱讀 35,430評論 5 343
  • 正文 年R本政府宣布,位于F島的核電站弄抬,受9級特大地震影響茎辐,放射性物質發(fā)生泄漏。R本人自食惡果不足惜掂恕,卻給世界環(huán)境...
    茶點故事閱讀 41,036評論 3 326
  • 文/蒙蒙 一拖陆、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧懊亡,春花似錦依啰、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,676評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至鸯两,卻和暖如春闷旧,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背钧唐。 一陣腳步聲響...
    開封第一講書人閱讀 32,829評論 1 269
  • 我被黑心中介騙來泰國打工忙灼, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人钝侠。 一個月前我還...
    沈念sama閱讀 47,743評論 2 368
  • 正文 我出身青樓该园,卻偏偏與公主長得像,于是被迫代替她去往敵國和親机错。 傳聞我的和親對象是個殘疾皇子爬范,可洞房花燭夜當晚...
    茶點故事閱讀 44,629評論 2 354

推薦閱讀更多精彩內(nèi)容