在圖形化使用者介面中常常可以看到許多各種不同的圖示,即使是我們平常每天瀏覽的網頁中,除了文字、圖片以外,最常見的就是各種標示功能與美觀效果的圖示了。這些圖示的功能很多,有的是表示啟動一個程式(或是界面上的一個功能)、有時候是代表按鈕上的功能,或者只是為了單純美觀好看。
2011年10月Gmail 網頁系統的一次改版,將頁面的按鈕做了很大的變動,一個很顯著的差別就是原本的以「文字」為主的功能列表,改變成以圖示為主的按鈕列表。
為了保留辨識性,使用者只要將滑鼠游標移到按鈕上面,就會顯示該按鈕的功能說明。即使如此, Gmail 依然在設定裡面保留了讓使用者自行切換成「文字按鈕」的設定選項:
雖然像是「刪除」這個功能使用「垃圾桶」這樣的圖示,已經快要變成所謂的共通標準。但事實上還是有很多功能很難找到能夠適當代表它的圖示:例如「更多」(More) 在這邊就依然保留了文字按鈕。截至目前為止,其實也很難為「更多」找出一個容易讓大家辨識出來的圖示。
反過來說,也有很多讓人看很久、但還是看不懂它代表什麼意思的圖示存在,像是這個符號是代表什麼意思呢:
其實這個圖示就是上面 Gmail 的「表示該信件為垃圾信」的圖示,說真的當這個圖示單獨出現的時候,還真難辨識出它到底代表的是什麼意思。
最重要的依然是功能性(辨識度)
就跟頁面上的其他任何一個元件一樣,圖示作為一個傳遞訊息的存在,最重要的還是得清楚的傳達它所代表的意思
丹麥設計師 Peter Steen Høgenhaug 曾在 2011 年進行了一個測試,他準備了一些網頁介面上常用的圖示給受測者看,讓受測者辨別該圖示的意思。在這之前他必須先整理出大部份的設計是否具有共通性;像是網際網路上常見的代表「超連結」( hyperlink ) 的圖示,大多是使用鏈條的圖案,只有臉書使用了便條紙與圖釘的圖案來表示:
最後的結果,即使是最普遍的「鏈條」圖示,也只有僅 35% 的使用者理解該圖示的意思
使用圖示的優點
既然使用圖示有些問題存在,那為什麼我們要使用圖示呢?因為圖示依然有著純文字無法取代的優點存在
- 跨越語系:如果一套圖示就可以代表功能列表上的功能,那麼就不用再特地去設計各種版本的語言介面了。就算是必須以文字為輔的狀況下,一套四海皆準的圖示,依然有它的優點在。例如國際通用的禁止符號就是紅色的圓形加上負45度的斜線,在你無論走到哪個國家,看到這個符號裡面放著一根菸,馬上就可以認出這個地方是禁止吸菸的區域。
- 簡單易學、降低學習成本:例如介面上的離開按鈕,大多數都是寫一個「 X 」,明確又容易瞭解。想像一下當你在教阿嬤怎麼跳出程式時,你只需要簡單地跟她說:「按下那個 X 就可以了。」
- 人類對於圖示具有學習性:當我們在多次使用某圖示代表的功能後、我們會學習起它所代表的意義。而人類理解圖形意義的速度、遠高於閱讀文字的速度,因此善用圖示將會有效的提高日後使用該功能的效率
先講求使用性,再來要求美觀
- 如果可以的話,儘量與文字一起使用: 就如同以上 Gmail 的例子,單獨使用圖示即使會較美觀,但是卻有著使用者無法辨識的風險,即使是想將文字完全移出畫面,亦可以善用互動介面的優點,在滑鼠移到上方之後再顯示(但是這個方法並不適用於觸控界面設計)。
- 圖示不宜過度統一:有時候視覺設計師為了美觀,或是被要求必須跟形象設計配合之類的理由,而把圖示通通作了統一化的處理,例如統一加上圓型外框、甚至做過頭反而影響了圖示辨識度。最後的結果是圖示難以辨識、失去原本圖示存在的意義。
圖示是很方便的一個視覺元素。在某方面來看,它甚至是一種世界共通性的語言。但圖示也像是一把雙面刃,使用得好將可以提高使用者的工作效率、提升界面美觀度。反之卻也有可能讓使用者面對你安排的圖示卻不知所措,為了避免這種事情發生,視覺與介面設計師在安排版面的時候不仿多多思考板免上的圖示與文字的安排。
延伸閱讀:
參考資料:
Images vis aditza121, cc license