2016-7-1 周周
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
新版Instagram 的UI去掉了圖標(biāo)下面的文字，但去掉文字的圖標(biāo)真的能帶來更好的用戶體驗么？今天這篇好文通過一個簡單的小實驗（附測試網(wǎng)址），幫這個一直爭議不休的話題蓋棺定論，順便聊聊圖標(biāo)的作用以及未來圖標(biāo)的發(fā)展，干貨豐富，建議閱讀。
作為一名用戶體驗行業(yè)的從業(yè)者，經(jīng)常會碰到這樣的情景：當(dāng)需要向客戶，同事，或朋友展示某個用戶體驗的概念時，比起在情感層面引發(fā)共鳴，更重要的是使對方快速準(zhǔn)確的明了概念。
一個反復(fù)被爭論的觀點便是給圖標(biāo)配上文字是否有必要。
有人說：“只要對圖標(biāo)的熟悉程度夠高，圖標(biāo)的含義便會烙印在用戶的記憶中。”
當(dāng)然這個觀點已經(jīng)引發(fā)了很多爭論。Zoltán Gócza和Zoltan Kollin就提供了一些有趣的研究來披露圖標(biāo)增強(qiáng)易用性的奧秘，而Min Ming Lo則特別對共用圖標(biāo)所面對的問題進(jìn)行了輕松有趣的討論。
爭論已經(jīng)超出了UI的范疇，影響到了一般意義上的品牌設(shè)計。例如Uber的應(yīng)用圖標(biāo)的重塑：
Uber以前的設(shè)計遵循硅谷的用品牌名字首字母構(gòu)成圖標(biāo)的原則。具體到這里，標(biāo)示文字被精煉成單個字母，以一種安全的方式來強(qiáng)化商標(biāo)的印象。
但是接下來的重塑也許是為了變得更引人入勝，圖標(biāo)失去了部分的含義。標(biāo)示文字被完全去除掉了，用戶無法直接讀取只能被迫解讀其含義。馬球鑄幣和阿茲特克背景想要告訴我們什么呢？
Flipbook, Medium, Facebook, Vine和Primer都將品牌/產(chǎn)品的首字母融入到圖標(biāo)的設(shè)計中
當(dāng)然，就像所有的變化一樣，長時間的使用可以使得客戶適應(yīng)并熟悉這種新的樣式（過程不會輕松）。但是問題真的解決了嗎？！
讓我們回歸到UI圖標(biāo)這個寬泛的話題。一個好的用戶體驗可以被以多種方式衡量，其中之一便是能減少客戶的思索上所耗費的努力，就是Nielson Norman Group所定義的“交互成本”這一概念：
在精神方面消耗的成本很重要的一部分應(yīng)該歸糾于對圖標(biāo)含義的解讀和抉擇。在符號學(xué)中這被稱為符號。
符號（Sign）由兩部分組成：意符/能指（Signifier）和意指/所指（Signified）。舉例來說，想象一扇上面掛著有“打烊”字樣的紅色標(biāo)語牌的商店大門，這就是意符，它是存在于現(xiàn)實世界中的某種有形物。意指是抽象化，概念化的認(rèn)知，而在這個例子中，意指就是對“商店已經(jīng)打烊”這個含義的認(rèn)知。意符和意指兩者共同構(gòu)成了符號，使得符號的含義可以被用戶所解讀。
意符通常有多個元素構(gòu)成，上述例子中的“打烊”標(biāo)語牌，其視覺效果和適用場景對客戶解讀意指所給予的幫助，并不亞于其“打烊”的文字標(biāo)示本身。一個有力的意符會盡可能多的囊括各種元素來減少用戶對其解讀所花費的“交互成本”。每減少一分元素，意符的效用便變減少一分，而對應(yīng)的意指便變得更加模糊。但是……對“只要對圖標(biāo)的熟悉程度夠高，圖標(biāo)的含義便會烙印在用戶的記憶中”這一論調(diào)的爭議仍然沒有解決，所以讓我們來一探它的真?zhèn)巍?/span>
我想對這個理論進(jìn)行測試，并根據(jù)“如果從常用的圖標(biāo)中去除標(biāo)示文字會給用戶正確匹配圖標(biāo)造成麻煩”這一假設(shè)構(gòu)建了一個測試。
測試很簡單，題目類型是提供一個圖標(biāo)對應(yīng)4個選項，要求受測者找出正確的選項?？偣灿?9個圖標(biāo)，他們都是選自于流行的IOS應(yīng)用（絕大部分來自于AppStore的Top20應(yīng)用名單）。
△ 測試中的問題示例
把測試者拉出應(yīng)用的上下文語境來測試圖標(biāo)的含義顯然是不公平的，但是測試本身是多選的這一點足以彌補(bǔ)測試者的這種劣勢。如前所述，如果圖標(biāo)對應(yīng)的含義早已根植于老用戶的腦海中了，這些測試項應(yīng)該只是小菜一碟。
想親身體驗下這項測試的難易的朋友們，可以來這里： http://www.motionbrothers.co.uk/signified/
測試結(jié)果告訴我們，在受測的144人（截止本文作成之前）中，成功識別4-7枚圖標(biāo)的占比61.81%，8-13枚的占比22.92%。但是無人可以識別到14枚及以上，更別提所有的19枚圖標(biāo)了。
也許記憶19枚圖標(biāo)實在是有點多了？然而在本文完成之前，僅僅Facebook的IOS端應(yīng)用在其用戶界面上就包括了至少19枚圖標(biāo)。
上面的測試也許難以稱得上科學(xué)。但它的確展示了大家有共鳴的一個觀點，用戶本身通過進(jìn)行測試并迅速理解到用戶體驗指導(dǎo)原則應(yīng)用的重要性和關(guān)聯(lián)性。概念的展示也許是用戶體驗從業(yè)者技能中最重要的一環(huán)。
如果用戶反饋能被加入在圖標(biāo)設(shè)計中的話，我們就有機(jī)會提升用戶體驗。比如，我曾經(jīng)服務(wù)的一名客戶，在他們移動端網(wǎng)頁的漢堡圖標(biāo)下加入了菜單的標(biāo)示性文字。因為變得更加可視化，結(jié)果這個小改動為這個圖標(biāo)帶來了42.09%的點擊率提升。
回到之前的論點：“只要對圖標(biāo)的熟悉程度夠高，圖標(biāo)的含義便會烙印在用戶的記憶中?！?/span>
公平的說，這個論點有合理的成分在其中。因為雖然數(shù)據(jù)表明，標(biāo)示文字的加入對大多數(shù)用戶起了增強(qiáng)符號標(biāo)示的作用，但是這里數(shù)據(jù)本身并沒有把不同用戶的熟練程度考量進(jìn)去。
比如，用戶A一天打開應(yīng)用4次并持續(xù)了快一年的時間，那么他將非常熟悉應(yīng)用的布局和各種工作方式；而用戶B剛下載應(yīng)用，并且從來沒有接觸過UI。那么用戶A的熟練程度就遠(yuǎn)高于用戶B。
使用理論表明兼容用戶A，B的圖標(biāo)設(shè)計的最好方法就是加入標(biāo)示文字，因為這可以照顧到層次的用戶體驗需求。當(dāng)然用戶體驗的最終目標(biāo)是為了個性化的設(shè)計，只有那樣我們才能做到針對不同用戶的個性化體驗。
在Allan Grinshtein推薦的一篇文章中我首次接觸到了逐步減少的概念，概念本身足夠簡單。當(dāng)用戶與UI打的交道越來越多，他對指示文字的依賴就越來越少。就好像初次逛超級大商場，我們也許需要向服務(wù)員咨詢不同分區(qū)的位置，而當(dāng)逛了多次后所有的分區(qū)在哪也就了然于胸了。
當(dāng)應(yīng)用于數(shù)字產(chǎn)品的設(shè)計，逐步減少的方法體現(xiàn)在我們可以逐步去掉用戶已經(jīng)其功能的按紐上的標(biāo)示文字，這樣可以使得界面變得簡潔并將用戶的注意力轉(zhuǎn)到更加需要的地方。
下例示范了Medium應(yīng)用使用逐步減少方法，在用戶使用過一段時間后，去除他們熟悉了的圖標(biāo)上的標(biāo)示文字。
在最近的幾年中，網(wǎng)站/移動應(yīng)用/產(chǎn)品設(shè)計的焦點在于適應(yīng)性和響應(yīng)性設(shè)計，以保證用戶的跨平臺體驗?，F(xiàn)在我們有必要回歸到設(shè)計方法的起點，并將其應(yīng)用到用戶體驗和內(nèi)容消費的方式上。第一步便是理解我們所創(chuàng)造的符號的重要性和效能，只有這樣我們才能開始著手用戶體驗的優(yōu)化和個性化，只有這樣我們才能開始試著去除文字標(biāo)示。
藍(lán)藍(lán)設(shè)計( www.alimai.net )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。
藍(lán)藍(lán)設(shè)計的小編 http://www.alimai.net