1. 程式人生 > >圖示的可用性(Usability in Icons)

圖示的可用性(Usability in Icons)

在許多應用中,圖示通常用來表達很多意義,可以表達一個功能,可以表達一個資訊等等。
但是,如果使用者不知道這個圖示的意義,那麼使用圖示自身的意義何在?

在設計圖示的時候,你會爭取使用或建立同形的圖示,同形的意思是圖示的形狀與現實生活中的物的圖示一致。例如,垃圾桶,橡皮擦,刷子。
當你使用恰當的描述的時候,這些圖示能夠很好的發揮作用。但是要是圖示在現實生活中沒有對應的物怎麼辦?

為了闡述,我用連結的圖示做例子。
“連結”,你說每個人都知道連結圖示的樣子。你腦海中浮起的第一個連結圖示是什麼,當你要在email或部落格中插入一個連結的時候?是一個“鏈子”?是一個“地球”?或者其他?是的,你也知道,“連結”有很多圖示,你會覺得每個都是符合邏輯的。但是這麼都卻是不必要的。


從上面的圖片你可以看到,大多的App和部落格系統都使用“鏈子”圖示,只有facebook是一個例外,他使用一個note圖示。我覺得facebook這個圖示意義沒有“鏈子”易懂。

不過你不要認為上面的“鏈子”圖示就很容易懂,我說這個“鏈子”圖示只有geek才能懂。要是你不信,下面我做的調查會讓你大吃一驚。

我邀請了一批人做了一個“連結”圖示的測試。測試過程是這樣的:

我把“連結”圖示和其他的在部落格系統中常用的圖示放在一起,讓每個測試人員寫出每個圖示的意義。

調查結果是,一些測試人員把“鏈子”圖示理解為“將一些東西繫結在一塊”或者“把兩個元素連起來”。他們說的並沒有錯,只是說不出來是把什麼東西繫結起來。因此,這個圖標表達的意思並不是我們上面所說的“連結”。所以我說要geek才能理解這個圖示。
“地球”的圖示,一些測試人員理解為“訪問internet”或者“搜尋”或者“上傳東西到Internet”。

下面是測試人員理解的意義與我們期望的意義的對比資料:

ICON DID UNDERSTAND DID NOT UNDERSTAND
Bold 100 % 0 %
Italic 100 % 0 %
Underlined 100 % 0 %
Strike-through 54.55 % 45.45 %
Link 1 (chain) 35.29 % 64.71 %
Link 2 (globe) 25 % 75 %
Ordered list 100 % 0 %
Unordered list 93.94 % 6.06 %
Image 78.79 % 21.21 %
Undo 57.58 % 42.42 %
Redo 51.52 % 48.48 %

測試結果是,只有35.29%的人能夠理解“鏈子”圖示,而只有25%的人能夠理解“地球”圖示。
所以“連結”的圖示是不可用的一個圖示,無論35.29%還是25%都說明了不可用。

當我們回訪測試人員的時候,他們說:

為什麼不使用“WWW”,每個人都能理解。

是的,可能一部分人能夠理解WWW是訪問Internet,或類似的其他操作。不過最後驚訝的是,居然每個測試人員都能夠理解“WWW”。WWW可能不是最好的解決方案,但是,基於我們的測試,這個是目前為止最好的表達“訪問Internet”的圖示。