《Web可用性評價》課件

WebUsability(Web可用性)Don’tmakemethink（不要讓我想）1WebUsability(Web可用性)Don’tmaContents（目錄）Rule#1Don’tmakemethink（規(guī)則1：不要讓我想）HowdowereallyusetheWeb?（我們?nèi)绾问褂镁W(wǎng)站？）Designingpagesforscanning,notreading（網(wǎng)頁是用來掃描的，不是閱讀的）Rule#2Mindless,unambiguouschoice（規(guī)則2：不假思索的、明確的選擇）2Contents（目錄）Rule#1Don’tmakContents（目錄）Rule#3Getridofhalfthewordsoneachpage（刪除頁面上的一半文字）Designingnavigation（設(shè)計導(dǎo)航系統(tǒng)）Designinghomepage（設(shè)計主頁）Usabilitytesting（可用性測試）3Contents（目錄）Rule#3GetridoKrug’sfirstlawofusability:Don’tmakemethinkAsfarasishumanlypossible,aWebpageshouldbeself-evident,obvious,self-explanatory.Ishouldbeableto“getit”–whatitisandhowtouseit–withoutexpendinganyeffortthinkingaboutit.（只要可能，網(wǎng)頁應(yīng)該設(shè)計得清楚易懂。瀏覽者應(yīng)該能夠“理解”該網(wǎng)頁——這個網(wǎng)頁是關(guān)于什么的，如何使用它？——而不需要費力去思考。）4Krug’sfirstlawofusability:Krug’sfirstlawofusability:Don’tmakemethinkUsingasitethatdoesn’tmakeusthinkaboutunimportantthingsfeelseffortless,whereaspuzzlingoverthingsthatdon’tmattertoustendstosapourenergyandenthusiasm—andtime.（如果網(wǎng)站不需要瀏覽者就無關(guān)緊要的東西思考，那么該網(wǎng)站就可以說是不費力的。反之，該網(wǎng)站就會浪費瀏覽者的精力、熱情和時間。）5Krug’sfirstlawofusability:Thingsthatmakeusthink

（讓我們思考的東西）Namesofthings,like“job”,“employmentopportunities”or“job-o-rama”.（事物的名稱，比如“工作”、“就業(yè)機會”、“job-o-rama”）Linksandbuttonsthataren’tobviouslyclickable.（不顯示為可以點擊的超鏈接和按鈕。）6Thingsthatmakeusthink

（讓我們Thingsthatmakeusthink

（讓我們思考的東西）Otherthingsthatvisitorstoasiteshouldn’tspendtheirtimethinkingabout,like：（其他訪問者不應(yīng)花費精力思考的東西，比如說：）WhereamI?（我在哪里？）WhereshouldIbegin?（我應(yīng)該從哪里開始？）Wheredidtheyput

?（他們把***放在哪里了？）Whatarethemostimportantthingsonthispage?（網(wǎng)頁中最重要的東西是什么？）Whydidtheycallitthat?（為什么他們要叫它那玩意兒？）7Thingsthatmakeusthink

（讓我們HowdowereallyusetheWeb?

（我們?nèi)绾问褂镁W(wǎng)站？）Factoflife#1:Wedon’treadpages.Wescanthem.（事實1：我們不閱讀網(wǎng)頁，我們掃描網(wǎng)頁。）Factoflife#2:Wedon’tmakeoptimalchoices.Wesatisfice.（事實2：我們不會進行理想化的選擇，而是選一個相對好的選項。）Factoflife#3:Wedon’tfigureouthowthingswork.Wemuddlethrough.（事實3：我們不會費力去考慮事物工作的原理，而是會“摸著石頭過河”。）8HowdowereallyusetheWeb?Designingpagesforscanning,notreading（設(shè)計適合掃描，而不是閱讀的網(wǎng)頁Createaclearvisualhierarchyoneachpage（在每頁中建立清晰的視覺框架和層次。）Takeadvantageofconventions（利用設(shè)計慣例。比如說，可以參考書報雜志的設(shè)計慣例來設(shè)計網(wǎng)頁。）9Designingpagesforscanning,Designingpagesforscanning,notreading（設(shè)計適合掃描，而不是閱讀的網(wǎng)頁Breakpageupintoclearlydefinedareas（把頁面清楚的劃分為不同的區(qū)域。）Makeitobviouswhat’sclickable（讓可點擊的東西清楚地顯示出來，例如，讓按鈕“長”的像按鈕。）Minimizenoise（盡量減少“污染”。例如，盡量不用背景音樂和背景圖案；內(nèi)容盡量不要凌亂地堆砌。）10Designingpagesforscanning,Krug’ssecondlawofusabilityItdoesn’tmatterhowmanytimesIhavetoclick,aslongaseachclickisamindless,unambiguouschoice.（點擊次數(shù)并不重要，只要每次點擊都不需要思考（也就是說，點擊的路徑是很自然的、符合邏輯的）。11Krug’ssecondlawofusabilityKrug’sthirdlawofusabilityGetridofhalfthewordsoneachpage,thengetridofhalfofwhat’sleft.（刪除每頁中一半的文字，然后把剩下的一半再刪除一半。）Itreducesthenoiselevelofthepage.（這樣可以減少網(wǎng)頁中的“污染”源。）Itmakestheusefulcontentmoreprominent.（這樣可以讓有用的東西更清楚地顯示出來。）Itmakesthepagesshorter,allowinguserstoseemoreofeachpageataglancewithoutscrolling.（這樣頁面就更短，瀏覽者可以不需要滾動就看到盡量多的內(nèi)容。）12Krug’sthirdlawofusabilityDesigningnavigation

（設(shè)計導(dǎo)航系統(tǒng)）Thepurposesofnavigation（導(dǎo)航系統(tǒng)的作用）Ithelpsustofindwhateveritiswe’relookingfor.（幫助瀏覽者找到需要的內(nèi)容。）Ittellsuswhereweare.（告訴瀏覽者其在網(wǎng)站中的位置。）Itgivesussomethingtoholdonto.（讓瀏覽者能夠有所依賴。）13Designingnavigation

（設(shè)計導(dǎo)航系統(tǒng)）Designingnavigation

（設(shè)計導(dǎo)航系統(tǒng)）Thepurposesofnavigation（導(dǎo)航系統(tǒng)的作用）Ittellsuswhat’shere.（告訴瀏覽者可以在這個網(wǎng)站中找到什么。）Ittellsushowtousethesite.（告訴瀏覽者如何使用這個網(wǎng)站。）Itgivesusconfidenceinthepeoplewhobuiltit.（讓瀏覽者信任網(wǎng)站制作者。）14Designingnavigation

（設(shè)計導(dǎo)航系統(tǒng)）Designingnavigation

（設(shè)計導(dǎo)航系統(tǒng)）Webnavigationconventions（Web導(dǎo)航慣例）SiteID（站點徽標(biāo)）Sections（主要欄目）Utilities(atleastawaytogohomeandawaytosearch)（功能性工具，至少要讓瀏覽者能夠回到首頁，并且提供搜索功能。）Subsections（次要欄目）“Youarehere”indicatorandbreadcrumbs（”您在這里”標(biāo)記）Pagename（網(wǎng)頁的名稱，有時也叫做網(wǎng)頁標(biāo)題）Localnavigation（本地導(dǎo)航，也就是超鏈接）Footnotenavigation（頁腳導(dǎo)航或“腳注”）15Designingnavigation

（設(shè)計導(dǎo)航系統(tǒng)）WDesigningnavigationTrythetrunktest(導(dǎo)航測試)Imaginethatyou’vebeenblindfoldedandlockedinthetrunkofacar,thendrivenaroundforawhileanddumpedonapagesomewheredeepinthebowelsofaWebsite.Ifthepageiswelldesigned,whenyourvisionclearsyoushouldbeabletoanswerthesequestionswithouthesitation:（假定把您眼睛蒙住，塞到汽車后備箱里，然后開車開一段時間，再把您扔到網(wǎng)站中的某個頁面（有可能在網(wǎng)站的很深處）。如果頁面的設(shè)計合理，當(dāng)去掉您的遮眼布時，您應(yīng)該能很容易地回答以下問題：）16DesigningnavigationTrythetrDesigningnavigationTrythetrunktest(導(dǎo)航測試)Whatsiteisthis?(SiteID)（這是個什么網(wǎng)站？）WhatpageamIon?(Pagename)（我在哪個頁面？）Whatarethemajorsectionsofthissite?(Sections)（這個網(wǎng)站都有哪些主要欄目？）Whataremyoptionsatthislevel?(Localnavigation)（在這個層次上都有哪些選項？）WhereamIintheschemeofthings?(“Youarehere”indicators)（我在整個網(wǎng)站中處于哪里？）HowcanIsearch?（我怎么進行搜索？）17DesigningnavigationTrythetrDesigninghomepage

（設(shè)計首頁）ThingstheHomepagehastoaccommodate（首頁上一般應(yīng)包括的東西）：

Siteidentityandmission（網(wǎng)站徽標(biāo)和網(wǎng)站使命）Sitehierarchy（網(wǎng)站的層次結(jié)構(gòu)）Search（搜索功能）Teases（吸引注意力的東西，attentiongrabber）Timelycontent（實時的內(nèi)容，類似“新聞”、“最近更新”等）Deals（商業(yè)信息，例如廣告）Shortcuts（快捷方式，提供訪問某些頁面或功能的快速鏈接）Registration（注冊登錄功能）18Designinghomepage

（設(shè)計首頁）ThiDesigninghomepage

（設(shè)計首頁）abstractobjectives（一些抽象的目標(biāo)）ShowmewhatI’mlookingfor.（告訴我我要找的東西在哪里？）…andwhatI’mnotlookingfor.（以及雖然我并沒有找，但可能會吸引我的東西。）Showmewheretostart.（告訴我從哪里開始，也就是如何去完成特定任務(wù)。）Establishcredibilityandtrust.（建立信任。）19Designinghomepage

（設(shè)計首頁）abstDesigninghomepageConveythebigpicture（傳達藍圖信息）Asquicklyandclearlyaspossible,theHomepageneedstoanswerthefourquestionsIhaveinmyheadwhenIenteranewsiteforthefirsttime:（首頁應(yīng)該盡量快且清楚地回答以下四個任何瀏覽者都會問的問題：）Whatisthis?（這是個什么網(wǎng)站？）Whatdotheyhavehere?（這個網(wǎng)站中有什么？）WhatcanIdohere?（我能在這個網(wǎng)站做什么？）WhyshouldIbehere—andnotsomewhereelse?（為什么我要在這里，而不是別的什么地方？）20DesigninghomepageConveytheDesigninghomepageConveythebigpicture（傳達藍圖信息）OnceIknowwhatI’mlookingat,there’sstillonemoreimportantquestionthattheHomepagehastoanswerforme:（用戶清楚地了解了主頁的內(nèi)容和特點后，主頁還需要回答一個重要的問題：）WheredoIstart?（我應(yīng)該從哪里開始？）21DesigninghomepageConveytheDesigninghomepageFourpopularwaystospoiltheHomepage（四種搞砸首頁的流行方法）PuttingabanneradontheHomepageifyoudon’thaveto.（在沒必要時，在首頁上放個橫幅廣告條。）Promotingeverything.（推銷所有的東西。）LettingdealsdriveHomepagedesign.（讓廣告驅(qū)動了首頁的設(shè)計。）Gettinggreedyforuserdata.（過于貪心得到用戶信息。）22DesigninghomepageFourpopulaUsabilitytesting(可用性測試)Severalsurethingsabouttesting（有關(guān)測試的正確說法）Ifyouwantagreatsite,you’vegottotest.（如果想要一個好的站點，必須進行測試。）Testingoneuseris100percentbetterthantestingnone.（測試一個用戶比一個都不測試要好100%。Testingoneuserearlyintheprojectisbetterthantesting50neartheend.（項目早期測試一個用戶比結(jié)束時測試50個還有用。）23Usabilitytesting(可用性測試)SeverUsabilitytesting(可用性測試)Theimportanceofrecruitingrepresentativeusersisoverrated.（不需要非要雇傭“具有代表性的用戶”。）Thepointoftestingisnottoproveordisprovesomething.It’stoinformyourjudgment.（測試的目的不是證實什么，而是對判斷進行測試。）Testingisaniterativeprocess.（測試是一個循環(huán)的過程。）Nothingbeatsaliveaudiencereaction.（沒有什么結(jié)果比真實用戶的反映更好。）24Usabilitytesting(可用性測試)TheUsabilitytesting(可用性測試)

Usabilitytestingon10centsaday（1天10美分的可用性測試）

“Getit”testisjustwhatitsoundslike:showthemthesite,andseeiftheygetit—dotheyunderstandthepurposeofthesite,thevalueproposition,howit’sorganized,howitworks,andsoon.（“理解”測試：讓用戶看網(wǎng)站，看他們是否能理解站點的目標(biāo)、站點的內(nèi)容組織、站點的功能等。）Keytasktestingmeansaskingtheusertodosomething,thenwatchinghowwelltheydo.（”關(guān)鍵任務(wù)“測試：讓用戶具體完成某項任務(wù)，看他們?nèi)绾巫?。Cubicletests（”工作間“測試：把頁面設(shè)計給隔壁工作間中的同事讓他幫著測試。）25Usabilitytesting(可用性測試)Usab作業(yè)5－網(wǎng)站評價制作一個單獨的網(wǎng)頁，但其風(fēng)格要和其他作業(yè)的風(fēng)格一致。所評價的網(wǎng)站必須與自己做的網(wǎng)站具有相同或類似的主題內(nèi)容。參見《網(wǎng)站評價標(biāo)準(zhǔn)》文檔。26作業(yè)5－網(wǎng)站評價制作一個單獨的網(wǎng)頁，但其風(fēng)格要和其他作業(yè)的風(fēng)WebUsability(Web可用性)Don’tmakemethink（不要讓我想）27WebUsability(Web可用性)Don’tmaContents（目錄）Rule#1Don’tmakemethink（規(guī)則1：不要讓我想）HowdowereallyusetheWeb?（我們?nèi)绾问褂镁W(wǎng)站？）Designingpagesforscanning,notreading（網(wǎng)頁是用來掃描的，不是閱讀的）Rule#2Mindless,unambiguouschoice（規(guī)則2：不假思索的、明確的選擇）28Contents（目錄）Rule#1Don’tmakContents（目錄）Rule#3Getridofhalfthewordsoneachpage（刪除頁面上的一半文字）Designingnavigation（設(shè)計導(dǎo)航系統(tǒng)）Designinghomepage（設(shè)計主頁）Usabilitytesting（可用性測試）29Contents（目錄）Rule#3GetridoKrug’sfirstlawofusability:Don’tmakemethinkAsfarasishumanlypossible,aWebpageshouldbeself-evident,obvious,self-explanatory.Ishouldbeableto“getit”–whatitisandhowtouseit–withoutexpendinganyeffortthinkingaboutit.（只要可能，網(wǎng)頁應(yīng)該設(shè)計得清楚易懂。瀏覽者應(yīng)該能夠“理解”該網(wǎng)頁——這個網(wǎng)頁是關(guān)于什么的，如何使用它？——而不需要費力去思考。）30Krug’sfirstlawofusability:Krug’sfirstlawofusability:Don’tmakemethinkUsingasitethatdoesn’tmakeusthinkaboutunimportantthingsfeelseffortless,whereaspuzzlingoverthingsthatdon’tmattertoustendstosapourenergyandenthusiasm—andtime.（如果網(wǎng)站不需要瀏覽者就無關(guān)緊要的東西思考，那么該網(wǎng)站就可以說是不費力的。反之，該網(wǎng)站就會浪費瀏覽者的精力、熱情和時間。）31Krug’sfirstlawofusability:Thingsthatmakeusthink

（讓我們思考的東西）Namesofthings,like“job”,“employmentopportunities”or“job-o-rama”.（事物的名稱，比如“工作”、“就業(yè)機會”、“job-o-rama”）Linksandbuttonsthataren’tobviouslyclickable.（不顯示為可以點擊的超鏈接和按鈕。）32Thingsthatmakeusthink

（讓我們Thingsthatmakeusthink

（讓我們思考的東西）Otherthingsthatvisitorstoasiteshouldn’tspendtheirtimethinkingabout,like：（其他訪問者不應(yīng)花費精力思考的東西，比如說：）WhereamI?（我在哪里？）WhereshouldIbegin?（我應(yīng)該從哪里開始？）Wheredidtheyput

?（他們把***放在哪里了？）Whatarethemostimportantthingsonthispage?（網(wǎng)頁中最重要的東西是什么？）Whydidtheycallitthat?（為什么他們要叫它那玩意兒？）33Thingsthatmakeusthink

（讓我們HowdowereallyusetheWeb?

（我們?nèi)绾问褂镁W(wǎng)站？）Factoflife#1:Wedon’treadpages.Wescanthem.（事實1：我們不閱讀網(wǎng)頁，我們掃描網(wǎng)頁。）Factoflife#2:Wedon’tmakeoptimalchoices.Wesatisfice.（事實2：我們不會進行理想化的選擇，而是選一個相對好的選項。）Factoflife#3:Wedon’tfigureouthowthingswork.Wemuddlethrough.（事實3：我們不會費力去考慮事物工作的原理，而是會“摸著石頭過河”。）34HowdowereallyusetheWeb?Designingpagesforscanning,notreading（設(shè)計適合掃描，而不是閱讀的網(wǎng)頁Createaclearvisualhierarchyoneachpage（在每頁中建立清晰的視覺框架和層次。）Takeadvantageofconventions（利用設(shè)計慣例。比如說，可以參考書報雜志的設(shè)計慣例來設(shè)計網(wǎng)頁。）35Designingpagesforscanning,Designingpagesforscanning,notreading（設(shè)計適合掃描，而不是閱讀的網(wǎng)頁Breakpageupintoclearlydefinedareas（把頁面清楚的劃分為不同的區(qū)域。）Makeitobviouswhat’sclickable（讓可點擊的東西清楚地顯示出來，例如，讓按鈕“長”的像按鈕。）Minimizenoise（盡量減少“污染”。例如，盡量不用背景音樂和背景圖案；內(nèi)容盡量不要凌亂地堆砌。）36Designingpagesforscanning,Krug’ssecondlawofusabilityItdoesn’tmatterhowmanytimesIhavetoclick,aslongaseachclickisamindless,unambiguouschoice.（點擊次數(shù)并不重要，只要每次點擊都不需要思考（也就是說，點擊的路徑是很自然的、符合邏輯的）。37Krug’ssecondlawofusabilityKrug’sthirdlawofusabilityGetridofhalfthewordsoneachpage,thengetridofhalfofwhat’sleft.（刪除每頁中一半的文字，然后把剩下的一半再刪除一半。）Itreducesthenoiselevelofthepage.（這樣可以減少網(wǎng)頁中的“污染”源。）Itmakestheusefulcontentmoreprominent.（這樣可以讓有用的東西更清楚地顯示出來。）Itmakesthepagesshorter,allowinguserstoseemoreofeachpageataglancewithoutscrolling.（這樣頁面就更短，瀏覽者可以不需要滾動就看到盡量多的內(nèi)容。）38Krug’sthirdlawofusabilityDesigningnavigation

（設(shè)計導(dǎo)航系統(tǒng)）Thepurposesofnavigation（導(dǎo)航系統(tǒng)的作用）Ithelpsustofindwhateveritiswe’relookingfor.（幫助瀏覽者找到需要的內(nèi)容。）Ittellsuswhereweare.（告訴瀏覽者其在網(wǎng)站中的位置。）Itgivesussomethingtoholdonto.（讓瀏覽者能夠有所依賴。）39Designingnavigation

（設(shè)計導(dǎo)航系統(tǒng)）Designingnavigation

（設(shè)計導(dǎo)航系統(tǒng)）Thepurposesofnavigation（導(dǎo)航系統(tǒng)的作用）Ittellsuswhat’shere.（告訴瀏覽者可以在這個網(wǎng)站中找到什么。）Ittellsushowtousethesite.（告訴瀏覽者如何使用這個網(wǎng)站。）Itgivesusconfidenceinthepeoplewhobuiltit.（讓瀏覽者信任網(wǎng)站制作者。）40Designingnavigation

（設(shè)計導(dǎo)航系統(tǒng)）Designingnavigation

（設(shè)計導(dǎo)航系統(tǒng)）Webnavigationconventions（Web導(dǎo)航慣例）SiteID（站點徽標(biāo)）Sections（主要欄目）Utilities(atleastawaytogohomeandawaytosearch)（功能性工具，至少要讓瀏覽者能夠回到首頁，并且提供搜索功能。）Subsections（次要欄目）“Youarehere”indicatorandbreadcrumbs（”您在這里”標(biāo)記）Pagename（網(wǎng)頁的名稱，有時也叫做網(wǎng)頁標(biāo)題）Localnavigation（本地導(dǎo)航，也就是超鏈接）Footnotenavigation（頁腳導(dǎo)航或“腳注”）41Designingnavigation

（設(shè)計導(dǎo)航系統(tǒng)）WDesigningnavigationTrythetrunktest(導(dǎo)航測試)Imaginethatyou’vebeenblindfoldedandlockedinthetrunkofacar,thendrivenaroundforawhileanddumpedonapagesomewheredeepinthebowelsofaWebsite.Ifthepageiswelldesigned,whenyourvisionclearsyoushouldbeabletoanswerthesequestionswithouthesitation:（假定把您眼睛蒙住，塞到汽車后備箱里，然后開車開一段時間，再把您扔到網(wǎng)站中的某個頁面（有可能在網(wǎng)站的很深處）。如果頁面的設(shè)計合理，當(dāng)去掉您的遮眼布時，您應(yīng)該能很容易地回答以下問題：）42DesigningnavigationTrythetrDesigningnavigationTrythetrunktest(導(dǎo)航測試)Whatsiteisthis?(SiteID)（這是個什么網(wǎng)站？）WhatpageamIon?(Pagename)（我在哪個頁面？）Whatarethemajorsectionsofthissite?(Sections)（這個網(wǎng)站都有哪些主要欄目？）Whataremyoptionsatthislevel?(Localnavigation)（在這個層次上都有哪些選項？）WhereamIintheschemeofthings?(“Youarehere”indicators)（我在整個網(wǎng)站中處于哪里？）HowcanIsearch?（我怎么進行搜索？）43DesigningnavigationTrythetrDesigninghomepage

（設(shè)計首頁）ThingstheHomepagehastoaccommodate（首頁上一般應(yīng)包括的東西）：

Siteidentityandmission（網(wǎng)站徽標(biāo)和網(wǎng)站使命）Sitehierarchy（網(wǎng)站的層次結(jié)構(gòu)）Search（搜索功能）Teases（吸引注意力的東西，attentiongrabber）Timelycontent（實時的內(nèi)容，類似“新聞”、“最近更新”等）Deals（商業(yè)信息，例如廣告）Shortcuts（快捷方式，提供訪問某些頁面或功能的快速鏈接）Registration（注冊登錄功能）44Designinghomepage

（設(shè)計首頁）ThiDesigninghomepage

（設(shè)計首頁）abstractobjectives（一些抽象的目標(biāo)）ShowmewhatI’mlookingfor.（告訴我我要找的東西在哪里？）…andwhatI’mnotlookingfor.（以及雖然我并沒有找，但可能會吸引我的東西。）Showmewheretostart.（告訴我從哪里開始，也就是如何去完成特定任務(wù)。）Establishcredibilityandtrust.（建立信任。）45Designinghomepage

（設(shè)計首頁）abstDesigninghomepageConveythebigpicture（傳達藍圖信息）Asquicklyandclearlyaspossible,theHomepageneedstoanswerthefourquestionsIhaveinmyheadwhenIenteranewsiteforthefirsttime:（首頁應(yīng)該盡量快且清楚地回答以下四個任何瀏覽者都會問的問題：）Whatisthis?（這是個什么網(wǎng)站？）Whatdotheyhavehere?（這個網(wǎng)站中有什么？）WhatcanIdohere?（我能在這個網(wǎng)站做什么？）WhyshouldIbehere—andnotsomewhereelse?（為什么我要在這里，而不是別的什么地方？）46DesigninghomepageConveytheDesigninghomepageConveythebigpicture（傳達藍圖信息）OnceIknowwhatI’mlookingat,there’sstillonemoreimportantquestionthattheHomepagehastoanswerforme:（用戶清楚地了解了主頁的內(nèi)容和特點后，主頁還需要回答一個重要的問題：）WheredoIstart?（我應(yīng)該從哪里開始？）47DesigninghomepageConveytheDesigninghomepageFourpopularwaystospoiltheHom