圖標可用性測試_網頁設計教程
推薦:什么樣的圖標更具有可用性作為WIMP(Window/Icon/Menu/PointingDevice)界面設計的要害部分,圖標在人機交互設計中無所不在。隨著人們對審美、時尚、趣味的不斷追求,圖標設計也不斷花樣
原文:http://www.useit.com/papers/sun/icons.html
圖標的可用性測試可以通過兩種方式來進行:
- 圖標直覺測試(Icon intuitiveness test)。將不帶標簽的圖標展示給一小部分用戶(通常為5個用戶),讓其說出他們認為圖標最能代表的事物。該測試評估圖標表示預期概念的程度。
- 標準可用性測試(Standard usability test)。將圖標和整個用戶界面一起展示給用戶,要求用戶使用系統完成一系列預先設定的任務,并在完成任務的時候進行出聲思維。該測試是為了評估圖標在用戶界面上良好工作的程度(在界面上,圖標通常以標簽的形式呈現)。
我們使用畫在紙上的簡單黑白草圖進行最初的研究。對于每一個圖標,我們都會采用幾個可供選擇的概念進行了測試,然后選擇最有前途的一個概念進行進一步地開發,將其著色成一個電腦上的彩色圖像。我們對那些彩色圖標進行了幾輪的重復設計。
以下是三個圖標反復設計的實例。
這一圖標代表了概念“技術和開發者”。前兩個用芯片和CD-ROM代表的圖標有點難以理解,它們看起來更像完成的產品而不是開發過程。建筑工人能夠很好地代表開發但是它最終被否決,因為其具有強烈的負面涵義,在互聯網上這一力圖標經常表示某些網站正在建設中(這是我們的測試用戶非常憎恨的)。
第二排的圖標是我們下一輪的嘗試,我們使用人物圖像代表開發者。
第一個開發者圖標最受喜愛,盡管有些用戶認為其代表了硬件而不是軟件開發。另外,一些用戶喜歡第二個圖標因為它象征“利用力量”。因此,我們基本上采用了第一個開發者作為我們的首個彩色圖標,僅僅是用閃電換掉了開發中手中的扳手。
盡管如此,我們的第一個彩色圖標在可用性測試中獲得了較差的結果。有如下評論:
- 雷和電
- 電的,看起來痛苦
- 被技術殺死的人
- 跳舞的機器
- 為什么Sun的開發者看起來像是暴眼的?
顯然,我們需要拋棄該圖標中的人物形象。因此在第二個彩色圖標中,我們僅僅保留了閃電和齒輪。用戶仍然抱怨雷電看起來像是閃電擊中并摧毀了機器。我們最終決定放棄電流,最終用一個CD-ROM代表了開發的概念。在測試的過程中,齒輪工作良好,它被看成是工程和技術間的連接方式,盡管計算機顯明地沒有齒輪。Sometimes elements of obsolete technology can work well as a stereotype to communicate concepts in an icon.
這一組圖標代表了概念“產品和方案”。我個人最喜歡機器從箱子里面出來那副圖,但是這張圖被否決了,因為它只代表了硬件而不是軟件(顯然,也不能表示幫助客戶解決問題而不僅僅是賣給他們產品這一觀點)。
有的用戶喜歡人舉起電腦那張,因為“它代表了力量和動力—我能夠為你做這些。”但是,因為在人的背后有很多臺電腦,所以這個圖標非常嘈雜(盡管我們非常想賣出這些電腦,但是圖標應該是簡單的!)。沒有人喜歡宗教智者那張。大部分喜歡發光的燈泡部分。小數用戶提到的一個問題是,舉起電腦的人是男性而不是女性。我們暫時認為我們需要使用混合的圖像,假如我們要在圖標上使人人形的話。但是,因為對簡潔的追求,我們最終沒有在圖標上使用人物圖像。
就像你所看到的,彩色圖標的所有版本基本上都是一樣的,一臺電腦加上一個發光折燈泡。所有用戶能夠很輕易地認為其代表了電腦和一些聰明觀點的結合(Sun的解決方案!)。發光的燈泡同時代表了軟件和解決方案。對圖標的唯一修改是因為主頁版面的規劃:首先我們將圖標設計得更小一些,另外,我們使它看起來更像是按鈕(有些三維的感覺)。
這一圖標代表了概念“網絡上的Sun”。我們最初有兩個不同的想法:一個說話的服務器(告訴你關于它自己是什么)和世界范圍的溝通。大部分用戶認為地圖圖標代表足球(經過幾次失敗的嘗試之后,我們最終熟悉到一個事實:地球必須是圓的!)。
我們拋棄了過度的人-神同形的服務器,然后使用了一種隱喻的風格來設計我們的第一個彩色圖標。我們使用文字的服務器在銀色的盤子上顯示信息。不幸的是,用戶認為它是一個朝圣者的帽子。另外,顯然,對“服務器”的文字解釋會在國際化的可用性測試中失敗。
接著,我們將地球和講話泡泡兩種想法結合起來。但是用戶認為它是被刺穿的汽球。接下來的兩個圖標是更文字化的地球儀,但是用戶將其解釋成穿著宇航服的太空人、橄欖葉和一個試圖砍平其道路的打高爾夫球的人。
最終的設計是最簡單的。并且,它是有用的。
分享:設計師的框架byJeffCroft翻譯:qing原文地址:http://www.alistapart.com/articles/frameworksfordesigners近來,在Web開發中”框架”是一個相當時髦的詞。比如JavaSc