作為WIMP(Window/Icon/Menu/Pointing Device)介面設計的關鍵部分，圖示在人機交互設計中無所不在。隨著人們對審美、時尚、趣味的不斷追求，Web Design也不斷花樣翻新，越來越多精美、新穎、富有創造力和想像力的圖示充斥著我們的視界。可是，從可用性的角度講，並不是越花哨的圖示越被用戶所接受，圖示的可用性要回到它的基本功用去思考。 圖示的功用在於建立起電腦世界與真實世界的一種隱喻，或者映射關係。用戶通過這種隱喻，自動地理解圖示背後的意義，跨越了語言的界限。但是，如果這種映射關係不能被用戶輕鬆並且準確地理解，那麼這種圖示就不應是好的圖示。因此，圖示的設計應該遵守以下的原則。 圖示的可用性原則一：圖示指向的映射關係應該盡可能的直接、簡單。 可能與我們的直覺相反，一些研究顯示圖示介面與文本介面的比較中，CMS並沒有體現出明顯的優越性，一個主要原因就是文字和意義的映射是直接的，而圖示與意義的映射卻不一定是直接和明顯的。 在壞的圖示設計中，用戶需要花費幾秒鐘甚至更長的時間去猜測圖示代表的意義，而且還很可能猜錯，錯誤的理解導致錯誤的操作，錯誤的操作導致糟糕的結果，這決不是美妙的用戶體驗，即便從美學角度講那個圖示可能是上佳的藝術作品。 “直接”的意思是：不要繞彎。圖示展現的視覺表像與其背後的意義只需要很短的意義路徑即可網頁寄存連結。譬如對於“剪切”操作，使用“在文稿上打×”的圖示形象比“剪刀”的圖示形象更易理解，因為前者與剪切操作有更短的意義路徑，儘管“剪刀”圖示顯得更加生動活潑。 認知心理學家提出過一個啟動擴散模型，就是在人的知識和概念體系中，當一個概念被加工或受到刺激時，該概念結點就產生啟動，然後啟動與該結點直接相連的多個連結，並繼續向四周擴散。與當前概念在概念網路上的連結關係決定了其被啟動的強度。這種連結關係取決於人的知識體系的組織架構(即兩個概念是否屬於同一類別)和概念同時出現或使用的頻率。 例如在人的知識和概念架構中，網站建設在紙質文稿上寫字和在電腦上寫字都屬於撰寫文檔的類別，那麼當“在文稿上打×”的圖示形象出現時，被試就會快速地聯想到在電腦上進行剪切操作。而“剪刀”的視覺形象最易歸屬到“衣服裁剪”或“手工勞動”這樣的類別中去，因此映射關係具有教長的路徑和較弱的連結強度。因此在圖示設計中，設計師應該仔細考慮或者直接去調查用戶的知識體系，找到最短的概念連結。 圖示的可用性原則二：每個圖示指向的映射關係應該是唯一的。 這個原則的意思就是，不要讓圖示產生歧義。想像一下，一個“飛旋的車輪”的網站排名圖示，它代表了什麼?也許設計者的本意，是要用車輪的移動來象徵電腦中檔的移動操作。可是，用戶也許猜測出了其他十幾種對應關係，比如一款3D賽車遊戲。這個原則其實還有一個推論原則： 不要使用過於複雜的圖示。 因為圖示的視覺元素越多，那麼其意義指向的可能性就越多，用戶越有可能從各種各樣的角度去解讀，那麼該圖示的可用性就可能越差。 圖示的可用性原則三：同一個圖示系列中，最好使用相同的映射模式。 在真實世界與電腦世界(或網路世界)的對應中，存在很多種映射模式。筆者粗粗地歸納下，可以發現這樣幾種映射模式：外觀映射、功能映射、語詞(字母)映射、部分指代映射和綜合映射。在同一個系列圖示中，用戶極易對圖示形成某種固定的映射模式，如果突然出現了另一種模式的電子商務映射，用戶可能仍將延用先前形成的思維定勢進行理解，從而出現理解困難或理解偏差。 圖示的可用性原則四：最好使用簡短文字做為圖示的冗餘編碼。 在資訊傳播的過程中，增加資訊的冗餘度是保證網上商店資訊傳輸的可靠性的最有效的方法。在人機交互設計中，最常見的冗餘編碼就是紅綠燈，即每個顏色皆對應位置，使得在人口中占具相當比例的色盲人群也可以通過燈的位置來接收是否可以通行的資訊。圖示設計也需要增加冗餘編碼，以保證絕大多數的人都能夠快速、準確地理解圖示的含義。一個很好的例子出現在手機主功能表的設計中，下面看兩種常見的手機主功能表的設計： 圖示都在下方加注了簡單的文字，和圖示一起形成冗餘編碼。這樣即使用戶是第一次使用該手機，也能避免圖示選擇錯誤。而圖二的圖示沒有將文字直接標注在圖示下方，而是在只有選中某個圖示的情況下，在螢幕上方顯示文字標注，這樣無疑增加了用戶操作的負擔。儘管電郵服務某些圖示，用戶很容易理解其含義，比如圖二中第二行第一個“相機”圖示，用戶很容易清楚這是指拍照功能;但有些圖示，在沒有文字標注的情況下，還是令人費解，比如圖二中第四行第一個“禮品盒”圖示。因此，筆者認為，在大多數情況下，給圖示加注文字是比較好的選擇。 最後，我要說明的是，圖示設計中的可用性原則與圖示的美學考慮在實踐中可能存在矛盾，這時候權衡兩者是必須的。好的可用性可以讓用戶更方便地使用產品，而漂亮、時尚或者富有情趣的外觀設計可以給用戶帶來喜悅感等良好的心理體驗。很難說哪一方理所應當地取得主導地位，更理想的狀態是交互設計師和視覺(外觀)設計師進行良好的溝通和合作，求得雙贏的設計方案。
没有评论:
发表评论