什么樣的圖標更具有可用性 - 網頁設計

http://webdesign.zoapcon.com

作為WIMP(Window/Icon/Menu/Pointing Device)界面設計的關鍵部分,圖標在人機交互設計中無所不在。隨著人們對審美、時尚、趣味的不斷追求,圖標設計也不斷花樣翻新,越來越多精美、新穎、富有創造力和想像力的圖標充斥著我們的視界。可是,從可用性的角度講,并不是越花哨的圖標越被用戶所接受,圖標的可用性要回到它的基本功用去思考。

圖標的功用在于建立起計算機世界與真實世界的一種隱喻,或者映射關系。用戶通過這種隱喻,自動地理解圖標背后的意義,跨越了語言的界限。但是,如果這種映射關系不能被用戶輕松并且準確地理解,那么這種圖標就不應是好的圖標。因此,圖標的設計應該遵守以下的原則。

圖標的可用性原則一:圖標指向的映射關系應該盡可能的直接、簡單。

可能與我們的直覺相反,一些研究顯示圖標界面與文本界面的比較中,并沒有體現出明顯的優越性,一個主要原因就是文字和意義的映射是直接的,而圖標與意義的映射卻不一定是直接和明顯的。

在壞的圖標設計中,用戶需要花費幾秒鐘甚至更長的時間去猜測圖標代表的意義,而且還很可能猜錯,錯誤的理解導致錯誤的操作,錯誤的操作導致糟糕的結果,這決不是美妙的用戶體驗,即便從美學角度講那個圖標可能是上佳的藝術作品。

“直接”的意思是:不要繞彎。圖標展現的視覺表象與其背后的意義只需要很短的意義路徑即可連結。譬如對于“剪切”操作,使用“在文稿上打×”的圖標形象比“剪刀”的圖標形象更易理解,因為前者與剪切操作有更短的意義路徑,盡管“剪刀”圖標顯得更加生動活潑。

認知心理學家提出過一個激活擴散模型,就是在人的知識和概念體系中,當一個概念被加工或受到刺激時,該概念結點就產生激活,然后激活與該結點直接相連的多個連結,并繼續向四周擴散。與當前概念在概念網絡上的連結關系決定了其被激活的強度。這種連結關系取決于人的知識體系的組織架構(即兩個概念是否屬于同一類別)和概念同時出現或使用的頻率。

例如在人的知識和概念架構中,在紙質文稿上寫字和在電腦上寫字都屬于撰寫文檔的類別,那么當“在文稿上打×”的圖標形象出現時,被試就會快速地聯想到在電腦上進行剪切操作。而“剪刀”的視覺形象最易歸屬到“衣服裁剪”或“手工勞動”這樣的類別中去,因此映射關系具有教長的路徑和較弱的連結強度。因此在圖標設計中,設計師應該仔細考慮或者直接去調查用戶的知識體系,找到最短的概念連結。

圖標的可用性原則二:每個圖標指向的映射關系應該是唯一的。

這個原則的意思就是,不要讓圖標產生歧義。想像一下,一個“飛旋的車輪”圖標,它代表了什么?也許設計者的本意,是要用車輪的移動來象征電腦中文件的移動操作。可是,用戶也許猜測出了其他十幾種對應關系,比如一款3D賽車游戲。這個原則其實還有一個推論原則:

不要使用過于復雜的圖標。

因為圖標的視覺元素越多,那么其意義指向的可能性就越多,用戶越有可能從各種各樣的角度去解讀,那么該圖標的可用性就可能越差。

圖標的可用性原則三:同一個圖標系列中,最好使用相同的映射模式。

在真實世界與計算機世界(或網絡世界)的對應中,存在很多種映射模式。筆者粗粗地歸納下,可以發現這樣幾種映射模式:外觀映射、功能映射、語詞(字母)映射、部分指代映射和綜合映射。在同一個系列圖標中,用戶極易對圖標形成某種固定的映射模式,如果突然出現了另一種模式的映射,用戶可能仍將延用先前形成的思維定勢進行理解,從而出現理解困難或理解偏差。

圖標的可用性原則四:最好使用簡短文字做為圖標的冗余編碼。

在信息傳播的過程中,增加信息的冗余度是保證信息傳輸的可靠性的最有效的方法。在人機交互設計中,最常見的冗余編碼就是紅綠燈,即每個顏色皆對應位置,使得在人口中占具相當比例的色盲人群也可以通過燈的位置來接收是否可以通行的信息。圖標設計也需要增加冗余編碼,以保證絕大多數的人都能夠快速、準確地理解圖標的含義。一個很好的例子出現在手機主菜單的設計中,下面看兩種常見的手機主菜單的設計:


圖一、諾基亞N95的主菜單


圖二、阿爾卡特OT-C825的主菜單

在圖一中的圖標都在下方加注了簡單的文字,和圖標一起形成冗余編碼。這樣即使用戶是第一次使用該手機,也能避免圖標選擇錯誤。而圖二的圖標沒有將文字直接標注在圖標下方,而是在只有選中某個圖標的情況下,在屏幕上方顯示文字標注,這樣無疑增加了用戶操作的負擔。盡管某些圖標,用戶很容易理解其含義,比如圖二中第二行第一個“相機”圖標,用戶很容易清楚這是指拍照功能;但有些圖標,在沒有文字標注的情況下,還是令人費解,比如圖二中第四行第一個“禮品盒”圖標。因此,筆者認為,在大多數情況下,給圖標加注文字是比較好的選擇。

最后,我要說明的是,圖標設計中的可用性原則與圖標的美學考慮在實踐中可能存在矛盾,這時候權衡兩者是必須的。好的可用性可以讓用戶更方便地使用產品,而漂亮、時尚或者富有情趣的外觀設計可以給用戶帶來喜悅感等良好的心理體驗。很難說哪一方理所應當地取得主導地位,更理想的狀態是交互設計師和視覺(外觀)設計師進行良好的溝通和合作,求得雙贏的設計方案。


arrow
arrow
    文章標籤
    網頁設計 web design
    全站熱搜
    創作者介紹
    創作者 Zoap_網頁設計 的頭像
    Zoap_網頁設計

    zoap的部落格

    Zoap_網頁設計 發表在 痞客邦 留言(0) 人氣()