圖標(biāo)可用性測(cè)試_網(wǎng)頁(yè)設(shè)計(jì)教程
推薦:什么樣的圖標(biāo)更具有可用性作為WIMP(Window/Icon/Menu/PointingDevice)界面設(shè)計(jì)的要害部分,圖標(biāo)在人機(jī)交互設(shè)計(jì)中無(wú)所不在。隨著人們對(duì)審美、時(shí)尚、趣味的不斷追求,圖標(biāo)設(shè)計(jì)也不斷花樣
原文:http://www.useit.com/papers/sun/icons.html
圖標(biāo)的可用性測(cè)試可以通過(guò)兩種方式來(lái)進(jìn)行:
- 圖標(biāo)直覺(jué)測(cè)試(Icon intuitiveness test)。將不帶標(biāo)簽的圖標(biāo)展示給一小部分用戶(hù)(通常為5個(gè)用戶(hù)),讓其說(shuō)出他們認(rèn)為圖標(biāo)最能代表的事物。該測(cè)試評(píng)估圖標(biāo)表示預(yù)期概念的程度。
- 標(biāo)準(zhǔn)可用性測(cè)試(Standard usability test)。將圖標(biāo)和整個(gè)用戶(hù)界面一起展示給用戶(hù),要求用戶(hù)使用系統(tǒng)完成一系列預(yù)先設(shè)定的任務(wù),并在完成任務(wù)的時(shí)候進(jìn)行出聲思維。該測(cè)試是為了評(píng)估圖標(biāo)在用戶(hù)界面上良好工作的程度(在界面上,圖標(biāo)通常以標(biāo)簽的形式呈現(xiàn))。
我們使用畫(huà)在紙上的簡(jiǎn)單黑白草圖進(jìn)行最初的研究。對(duì)于每一個(gè)圖標(biāo),我們都會(huì)采用幾個(gè)可供選擇的概念進(jìn)行了測(cè)試,然后選擇最有前途的一個(gè)概念進(jìn)行進(jìn)一步地開(kāi)發(fā),將其著色成一個(gè)電腦上的彩色圖像。我們對(duì)那些彩色圖標(biāo)進(jìn)行了幾輪的重復(fù)設(shè)計(jì)。
以下是三個(gè)圖標(biāo)反復(fù)設(shè)計(jì)的實(shí)例。
這一圖標(biāo)代表了概念“技術(shù)和開(kāi)發(fā)者”。前兩個(gè)用芯片和CD-ROM代表的圖標(biāo)有點(diǎn)難以理解,它們看起來(lái)更像完成的產(chǎn)品而不是開(kāi)發(fā)過(guò)程。建筑工人能夠很好地代表開(kāi)發(fā)但是它最終被否決,因?yàn)槠渚哂袕?qiáng)烈的負(fù)面涵義,在互聯(lián)網(wǎng)上這一力圖標(biāo)經(jīng)常表示某些網(wǎng)站正在建設(shè)中(這是我們的測(cè)試用戶(hù)非常憎恨的)。
第二排的圖標(biāo)是我們下一輪的嘗試,我們使用人物圖像代表開(kāi)發(fā)者。
第一個(gè)開(kāi)發(fā)者圖標(biāo)最受喜愛(ài),盡管有些用戶(hù)認(rèn)為其代表了硬件而不是軟件開(kāi)發(fā)。另外,一些用戶(hù)喜歡第二個(gè)圖標(biāo)因?yàn)樗笳鳌袄昧α俊薄R虼耍覀兓旧喜捎昧说谝粋(gè)開(kāi)發(fā)者作為我們的首個(gè)彩色圖標(biāo),僅僅是用閃電換掉了開(kāi)發(fā)中手中的扳手。
盡管如此,我們的第一個(gè)彩色圖標(biāo)在可用性測(cè)試中獲得了較差的結(jié)果。有如下評(píng)論:
- 雷和電
- 電的,看起來(lái)痛苦
- 被技術(shù)殺死的人
- 跳舞的機(jī)器
- 為什么Sun的開(kāi)發(fā)者看起來(lái)像是暴眼的?
顯然,我們需要拋棄該圖標(biāo)中的人物形象。因此在第二個(gè)彩色圖標(biāo)中,我們僅僅保留了閃電和齒輪。用戶(hù)仍然抱怨雷電看起來(lái)像是閃電擊中并摧毀了機(jī)器。我們最終決定放棄電流,最終用一個(gè)CD-ROM代表了開(kāi)發(fā)的概念。在測(cè)試的過(guò)程中,齒輪工作良好,它被看成是工程和技術(shù)間的連接方式,盡管計(jì)算機(jī)顯明地沒(méi)有齒輪。Sometimes elements of obsolete technology can work well as a stereotype to communicate concepts in an icon.
這一組圖標(biāo)代表了概念“產(chǎn)品和方案”。我個(gè)人最喜歡機(jī)器從箱子里面出來(lái)那副圖,但是這張圖被否決了,因?yàn)樗淮砹擞布皇擒浖@然,也不能表示幫助客戶(hù)解決問(wèn)題而不僅僅是賣(mài)給他們產(chǎn)品這一觀(guān)點(diǎn))。
有的用戶(hù)喜歡人舉起電腦那張,因?yàn)椤八砹肆α亢蛣?dòng)力—我能夠?yàn)槟阕鲞@些。”但是,因?yàn)樵谌说谋澈笥泻芏嗯_(tái)電腦,所以這個(gè)圖標(biāo)非常嘈雜(盡管我們非常想賣(mài)出這些電腦,但是圖標(biāo)應(yīng)該是簡(jiǎn)單的!)。沒(méi)有人喜歡宗教智者那張。大部分喜歡發(fā)光的燈泡部分。小數(shù)用戶(hù)提到的一個(gè)問(wèn)題是,舉起電腦的人是男性而不是女性。我們暫時(shí)認(rèn)為我們需要使用混合的圖像,假如我們要在圖標(biāo)上使人人形的話(huà)。但是,因?yàn)閷?duì)簡(jiǎn)潔的追求,我們最終沒(méi)有在圖標(biāo)上使用人物圖像。
就像你所看到的,彩色圖標(biāo)的所有版本基本上都是一樣的,一臺(tái)電腦加上一個(gè)發(fā)光折燈泡。所有用戶(hù)能夠很輕易地認(rèn)為其代表了電腦和一些聰明觀(guān)點(diǎn)的結(jié)合(Sun的解決方案!)。發(fā)光的燈泡同時(shí)代表了軟件和解決方案。對(duì)圖標(biāo)的唯一修改是因?yàn)橹黜?yè)版面的規(guī)劃:首先我們將圖標(biāo)設(shè)計(jì)得更小一些,另外,我們使它看起來(lái)更像是按鈕(有些三維的感覺(jué))。
這一圖標(biāo)代表了概念“網(wǎng)絡(luò)上的Sun”。我們最初有兩個(gè)不同的想法:一個(gè)說(shuō)話(huà)的服務(wù)器(告訴你關(guān)于它自己是什么)和世界范圍的溝通。大部分用戶(hù)認(rèn)為地圖圖標(biāo)代表足球(經(jīng)過(guò)幾次失敗的嘗試之后,我們最終熟悉到一個(gè)事實(shí):地球必須是圓的!)。
我們拋棄了過(guò)度的人-神同形的服務(wù)器,然后使用了一種隱喻的風(fēng)格來(lái)設(shè)計(jì)我們的第一個(gè)彩色圖標(biāo)。我們使用文字的服務(wù)器在銀色的盤(pán)子上顯示信息。不幸的是,用戶(hù)認(rèn)為它是一個(gè)朝圣者的帽子。另外,顯然,對(duì)“服務(wù)器”的文字解釋會(huì)在國(guó)際化的可用性測(cè)試中失敗。
接著,我們將地球和講話(huà)泡泡兩種想法結(jié)合起來(lái)。但是用戶(hù)認(rèn)為它是被刺穿的汽球。接下來(lái)的兩個(gè)圖標(biāo)是更文字化的地球儀,但是用戶(hù)將其解釋成穿著宇航服的太空人、橄欖葉和一個(gè)試圖砍平其道路的打高爾夫球的人。
最終的設(shè)計(jì)是最簡(jiǎn)單的。并且,它是有用的。
分享:設(shè)計(jì)師的框架byJeffCroft翻譯:qing原文地址:http://www.alistapart.com/articles/frameworksfordesigners近來(lái),在Web開(kāi)發(fā)中”框架”是一個(gè)相當(dāng)時(shí)髦的詞。比如JavaSc
- 中國(guó)互聯(lián)網(wǎng)黑色產(chǎn)業(yè)人數(shù)近10萬(wàn) 5分鐘1起網(wǎng)絡(luò)入侵
- 馬云最后的發(fā)布會(huì):打假,打出阿里的新未來(lái)
- 實(shí)踐分享:ACCESS數(shù)據(jù)庫(kù)導(dǎo)入mysql數(shù)據(jù)庫(kù)
- ACCESS數(shù)據(jù)庫(kù)轉(zhuǎn)ORACLE數(shù)據(jù)庫(kù)分享
- CDN.net免費(fèi)CDN申請(qǐng)使用教程:100GB流量香港日本新加坡節(jié)點(diǎn)
- WordPress 教程:為插件自定義數(shù)據(jù)表
- 如何使用查找我的iPhone教程
- 微信公眾平臺(tái)教程(二) 消息管理與群發(fā)
- 中國(guó)IPv4地址今年將告罄 IPv6期待打破政策局
- 移動(dòng)廣告野蠻成長(zhǎng):75%投放在iOS平臺(tái)
- 災(zāi)難面前,互聯(lián)網(wǎng)公司可以如何做的更好?
- 富士康500萬(wàn)部iPhone遭蘋(píng)果退貨 損失10億元
網(wǎng)頁(yè)設(shè)計(jì)教程Rss訂閱網(wǎng)站制作教程搜索
網(wǎng)頁(yè)設(shè)計(jì)教程推薦
- 2012年排名前20位的CSS網(wǎng)站作品
- 技術(shù)限制下交互差錯(cuò)及應(yīng)對(duì)
- 本周推薦9款免費(fèi)的網(wǎng)站模板設(shè)計(jì)
- 書(shū)簽效果的優(yōu)化
- 寫(xiě)給在職設(shè)計(jì)師們
- 想用戶(hù)所想——感受亞馬遜
- 從用戶(hù)分類(lèi)中體會(huì)善待用戶(hù)的設(shè)計(jì)原則
- 企業(yè)網(wǎng)站的錘煉,讓你的網(wǎng)站更像專(zhuān)業(yè)的網(wǎng)站
- 如何從營(yíng)銷(xiāo)的角度策劃建設(shè)網(wǎng)站
- 富媒體廣告設(shè)計(jì)點(diǎn)評(píng)之智聯(lián)招聘
- 相關(guān)鏈接:
- 教程說(shuō)明:
網(wǎng)頁(yè)設(shè)計(jì)教程-圖標(biāo)可用性測(cè)試
。


