如果某個(gè)東西很難用,我就不會(huì)經(jīng)常用它畅卓∞中。——Steve Krug妻子
引用本書(shū)作者Steve Kru在書(shū)中提到的妻子的一句話開(kāi)頭,Steve Kru說(shuō)這句話一針見(jiàn)血地指出了可用性的本質(zhì)风宁。
由于沒(méi)有找到最新的第三版的電子版本,因此閱讀了比較老的第二版蛹疯,本書(shū)只有短短的100來(lái)頁(yè)戒财,作者保證本書(shū)的短小精煉,以實(shí)現(xiàn)本書(shū)的“可用性”
也即是向讀者直接地展示了“可用性”原則捺弦。雖然本書(shū)的有些觀點(diǎn)和例子現(xiàn)如今看起來(lái)已經(jīng)沒(méi)有多少參考價(jià)值饮寞,但是通篇讀下來(lái),作者所傳達(dá)的整體思想依然為當(dāng)前產(chǎn)品設(shè)計(jì)所要遵循的原則列吼。
指導(dǎo)性原則
一幽崩、 別讓我思考
可用性第一定律:別讓我思考
意味著設(shè)計(jì)者應(yīng)該盡量做到,當(dāng)我看到一個(gè)頁(yè)面時(shí)寞钥,它應(yīng)該是不言而喻慌申、一目了然、自我解釋的理郑。我應(yīng)該能明白它——它是什么蹄溉,怎樣使用它——而不需要花費(fèi)精力進(jìn)行思考強(qiáng)迫我們思考的地方
網(wǎng)頁(yè)上每項(xiàng)內(nèi)容都有可能迫使我們停下來(lái)咨油,進(jìn)行不必要的思考。例如:名字类缤、看起來(lái)不太明顯的鏈接和按鈕
當(dāng)我們?cè)L問(wèn)Web的時(shí)候臼勉,每個(gè)問(wèn)號(hào)都會(huì)加重我們的認(rèn)知負(fù)擔(dān)邻吭,把我們的注意力從要完成的任務(wù)上拉開(kāi)餐弱。這種干擾也許輕微,但它們會(huì)累積起來(lái)囱晴。有時(shí)候這樣的干擾不用太多膏蚓,就足以讓我們抓狂。
-
一個(gè)簡(jiǎn)單的圖書(shū)搜索畸写,用戶卻經(jīng)歷了大約如下5個(gè)步驟
如果你做不到讓一個(gè)頁(yè)面不言而喻驮瞧,那么至少應(yīng)該讓它自我解釋。
為什么“別讓我思考”這么重要
在因特網(wǎng)上枯芬,競(jìng)爭(zhēng)有時(shí)就在于一個(gè)點(diǎn)擊的差別论笔,因此如果你得罪了用戶,他們會(huì)跑到別的地方去
大多數(shù)人會(huì)花比我們想象中少得多的時(shí)間來(lái)瀏覽網(wǎng)頁(yè)千所。
** 結(jié)論**
如果要讓網(wǎng)頁(yè)有效狂魔,它們必須在用戶第一眼看到時(shí)將自己展現(xiàn)出來(lái),而要做到這一點(diǎn)淫痰,最好的方法是創(chuàng)建不言而喻的網(wǎng)頁(yè)最楷,或者至少也要做到自我解釋
二、我們實(shí)際上是如何使用Web的
- 第一個(gè)事實(shí):我們不是閱讀待错,而是掃描
- 我們總是處于忙碌之中
- 我們知道自己不必閱讀所有內(nèi)容
- 我們善于掃描
- 第二個(gè)事實(shí):我們不做最佳選擇籽孙,而是滿意即可
- 第一個(gè)合理的選項(xiàng)(滿意策略)
- 為什么Web用戶不尋找最佳選擇呢?
- 我們總是處于忙碌之中
- 如果猜錯(cuò)了火俄,也不會(huì)產(chǎn)生什么嚴(yán)重的后果犯建。
- 對(duì)選擇進(jìn)行權(quán)衡并不會(huì)改善我們的機(jī)會(huì)
- 猜測(cè)更有意思
- 第三個(gè)事實(shí):我們不是追根究底,而是勉強(qiáng)應(yīng)付
- 很多時(shí)候瓜客,用戶往往不會(huì)按照設(shè)計(jì)師設(shè)想的方式使用網(wǎng)絡(luò)和軟件 适瓦,但他們用的很好
- 為什么會(huì)這樣?
- 這對(duì)我們來(lái)說(shuō)并不重要
- 如果發(fā)現(xiàn)某個(gè)事物能用忆家,我們會(huì)一直用它
- 然而讓用戶弄明白依然很重要犹菇,因?yàn)橛袝r(shí)候可以勉強(qiáng)應(yīng)付,但它通常效率不高芽卿,而且容易出錯(cuò)揭芍。
三、廣告牌設(shè)計(jì)101法則
- 盡可能的讓用戶看到并理解你的網(wǎng)站:
- 在每個(gè)頁(yè)面上建立清楚的視覺(jué)層次
- 盡量利用習(xí)慣用法
- 把頁(yè)面劃分成明確定義的區(qū)域
- 明顯標(biāo)識(shí)可以點(diǎn)擊的地方
- 最大限度降低干擾
-
建立清楚的視覺(jué)層次
一個(gè)視覺(jué)層次清楚的頁(yè)面有三個(gè)特點(diǎn):
- 越重要的部分越突出
- 邏輯上相關(guān)的部分在視覺(jué)上也相關(guān)
- 邏輯上包含的部分在視覺(jué)上進(jìn)行嵌套
習(xí)慣用法是你的好幫手
減少用戶教育時(shí)間和成本
-
當(dāng)你不想使用習(xí)慣用法而想要?jiǎng)?chuàng)新設(shè)計(jì)時(shí)卸例,你需要做到以下兩點(diǎn):
- 同樣清楚称杨,同樣不言而喻肌毅,沒(méi)有學(xué)習(xí)曲線的方法
- 帶來(lái)很大的價(jià)值,因此值得用戶付出一點(diǎn)努力來(lái)學(xué)習(xí)的方法
把頁(yè)面劃分成明確定義的區(qū)域
把頁(yè)面劃分成明確定義的區(qū)域很重要姑原,因?yàn)檫@可以讓用戶很快決定關(guān)注頁(yè)面的哪些區(qū)域悬而,或者放心的跳過(guò)哪些區(qū)域。明顯標(biāo)識(shí)可以點(diǎn)擊的地方
人們?cè)诰W(wǎng)絡(luò)上所做的大多數(shù)事情就是找到下一個(gè)地方點(diǎn)擊锭汛,那么明確的標(biāo)識(shí)哪些地方可以點(diǎn)擊笨奠,哪些地方不能點(diǎn)擊,這很重要唤殴。降低視覺(jué)噪聲
-
兩類(lèi)視覺(jué)噪聲
- 眼花繚亂般婆,所有的內(nèi)容都在希望得到用戶的注意
- 背景噪聲
當(dāng)你在設(shè)計(jì)頁(yè)面的時(shí)候,這樣做可能是個(gè)好辦法:先假定所有內(nèi)容都是視覺(jué)噪聲朵逝,除非得到證明它們不是
四蔚袍、動(dòng)物、植物配名、無(wú)機(jī)物
- 可用性第二定律:點(diǎn)擊多少次都沒(méi)關(guān)系啤咽,只要每次點(diǎn)擊都是無(wú)需思考,明確無(wú)誤的選擇
- 如果我們需要一直在網(wǎng)絡(luò)上進(jìn)行選擇渠脉,那么讓這些選擇變得無(wú)須思考是讓一個(gè)網(wǎng)站容易使用的主要因素宇整。
五、省略不必要的文字
不要在Web上寫(xiě)作的藝術(shù)
可用性的第三定律:去掉每個(gè)頁(yè)面上一半的文字连舍,然后把剩下的文字再去掉一半
-
去掉沒(méi)有人看的文字有幾個(gè)好處:
- 可以降低頁(yè)面的噪聲
- 讓有用的內(nèi)容更加突出
- 讓頁(yè)面更簡(jiǎn)短没陡,讓用戶在每個(gè)頁(yè)面上一樣就能看到更多的內(nèi)容,而不必滾動(dòng)屏幕
盡可能的減少歡迎詞索赏,能減多少就減多少
指示說(shuō)明必須消滅
讓每項(xiàng)內(nèi)容不言而喻而完全消除指示說(shuō)明盼玄,或者盡可能做到這一點(diǎn),當(dāng)指示文字變得完全沒(méi)有必要時(shí)潜腻,則應(yīng)把它們完全去掉埃儿。
將這些原則應(yīng)用到最重要的Web設(shè)計(jì)挑戰(zhàn)上:設(shè)計(jì)導(dǎo)航和主頁(yè)
六、街頭指示牌和面包屑
- “明確”融涣、“簡(jiǎn)單”童番、“一致”的導(dǎo)航
- 網(wǎng)絡(luò)導(dǎo)航101法則
- 你通常是為了尋找某個(gè)目標(biāo)
- 你會(huì)決定是先詢問(wèn)還是先瀏覽
- 如果選擇瀏覽,你將通過(guò)標(biāo)志的引導(dǎo)在層次結(jié)構(gòu)中穿行
- 最后威鹿,如果你找不到想要的東西剃斧,你會(huì)離開(kāi)
-
無(wú)法承受的瀏覽之輕
在Web空間里: - 感覺(jué)不到大小
- 感覺(jué)不到方向
- 感覺(jué)不到位置
-
被忽視了的導(dǎo)航用途
導(dǎo)航顯而易見(jiàn)的用途:幫助我們找到想要的任何東西和告訴我們現(xiàn)在身處何處。 - 它給了我們一些固定的感覺(jué)
- 它告訴我們當(dāng)前的位置
- 它告訴我們?nèi)绾问褂镁W(wǎng)站
- 它給了我們對(duì)網(wǎng)站建造者的信息
Web導(dǎo)航習(xí)慣用法
把它們放在標(biāo)準(zhǔn)的位置可以讓我們快速定位忽你,不必費(fèi)力幼东,將他們的外觀標(biāo)準(zhǔn)化讓我們更容易把它們與別的東西區(qū)分開(kāi)來(lái)。
-
Web導(dǎo)航的基本元素
- 網(wǎng)站ID
- 欄目
- 實(shí)用工具
- 下一級(jí)欄目
- 當(dāng)前位置指示器
- 頁(yè)面名稱(chēng)
- 頁(yè)面導(dǎo)航
- 底端導(dǎo)航
全局導(dǎo)航
全局導(dǎo)航(持久導(dǎo)航)5元素:站點(diǎn)ID、回主頁(yè)的方式根蟹、搜索的方式脓杉、實(shí)用工具、欄目頁(yè)面名稱(chēng)需要注意以下四點(diǎn):
① 每個(gè)頁(yè)面都需要一個(gè)名稱(chēng)
② 頁(yè)面名稱(chēng)要出現(xiàn)在合適的位置
③ 名稱(chēng)要引人注目
④ 名稱(chēng)要和點(diǎn)擊的鏈接一致在Web上可以用突出我當(dāng)前的位置來(lái)抵消網(wǎng)絡(luò)固有的空間迷失感简逮,不管是在頁(yè)面的導(dǎo)航條球散、列表還是菜單上。
面包屑
面包屑(層級(jí)菜單)同“你在這里”指示器(站點(diǎn)層級(jí)結(jié)構(gòu)前后關(guān)系)一樣散庶,也告訴你當(dāng)前的位置(從主頁(yè)到當(dāng)前位置的路徑)
-
面包屑導(dǎo)航的特點(diǎn):
- 把他們放在頂端
- 使用“>”對(duì)層級(jí)進(jìn)行分隔
- 使用小字體
- 使用了文字“你在這里”
- 將最后一個(gè)元素加粗
- 沒(méi)有把他們用作頁(yè)面的名稱(chēng)
標(biāo)簽導(dǎo)航
-
標(biāo)簽是大型網(wǎng)站導(dǎo)航的上佳選擇蕉堰,因?yàn)椋?/p>
- 它們不言而喻
- 它們很難錯(cuò)過(guò)
- 它們很靈活
- 它們暗示了一個(gè)物理的空間
-
標(biāo)簽經(jīng)典設(shè)計(jì)
- 正確繪制
- 顏色編碼
- 當(dāng)你進(jìn)入網(wǎng)站時(shí),有一個(gè)標(biāo)簽已經(jīng)選中
七督赤、首先要承認(rèn)嘁灯,主頁(yè)不由你控制
- 主頁(yè)要完成的任務(wù):
- 站點(diǎn)的標(biāo)識(shí)和使命
- 站點(diǎn)層次
- 搜索
- 導(dǎo)讀
- 內(nèi)容更新
- 友情鏈接
- 快捷方式
- 注冊(cè)
- 其他抽象目標(biāo)
- 讓我看到自己正在尋找的東西
- ……還有我沒(méi)有尋找的
- 告訴我從哪里開(kāi)始
- 建立可信度和信任感
- 對(duì)于主頁(yè)的一些常見(jiàn)約束:
- 每個(gè)人都想占一席之地
- 想要參與的人太多
- 一個(gè)尺寸要適合所有人
第一個(gè)受害者:主頁(yè)
主頁(yè)不能忘記的一點(diǎn):傳達(dá)整體形象
這是什么網(wǎng)站泻蚊?
我能在這里做什么躲舌?
網(wǎng)站上有些什么?
為什么我應(yīng)該在這里性雄,而不是在別的地方没卸?
如何傳達(dá)?
- 口號(hào)秒旋,最有價(jià)值的位置之一是靠近站點(diǎn)ID的地方
- 歡迎廣告约计,歡迎廣告是網(wǎng)站的簡(jiǎn)要描述
如
傳達(dá)信息的指導(dǎo)原則:
需要多大空間就使用多大空間
但也不要使用過(guò)多的空間
不要把使命陳述當(dāng)作歡迎廣告
最重要的是進(jìn)行測(cè)試
口號(hào)
口號(hào)是一句精煉的短語(yǔ),刻畫(huà)了整個(gè)企業(yè)迁筛,總結(jié)它是什么煤蚌,什么讓它如此卓越。
口號(hào)是非常有效的信息傳達(dá)方式细卧,因?yàn)樗麄兪怯脩糇钕M苷业疥P(guān)于網(wǎng)站目標(biāo)具體描述的地方尉桩。
-
在選擇口號(hào)時(shí),有幾點(diǎn)需要注意:
- 好的口號(hào)要清楚贪庙、言之有物
- 不好的口號(hào)含混不清
- 好的口號(hào)長(zhǎng)度適中
- 好的口號(hào)能表達(dá)出網(wǎng)站的特點(diǎn)和顯而易見(jiàn)的好處
- 不好的口號(hào)聽(tīng)起來(lái)太籠統(tǒng)
- 好的口號(hào)應(yīng)該有個(gè)性蜘犁、生動(dòng),有時(shí)候還很俏皮
** 第五個(gè)問(wèn)題**
一旦知道網(wǎng)站是做什么的止邮,接下來(lái)就是主頁(yè)需要回答的第五個(gè)問(wèn)題:從哪里開(kāi)始这橙?主頁(yè)導(dǎo)航可以不一樣
主頁(yè)導(dǎo)航與其他頁(yè)面的導(dǎo)航可以不一樣,但是不要進(jìn)行不必要的改動(dòng)导披,主頁(yè)導(dǎo)航與全局導(dǎo)航保持一定程度上的一致性屈扎,有助于用戶理解這是相同導(dǎo)航的不能版本。下拉框的問(wèn)題
下拉框的好處:節(jié)省空間
下拉框存在的問(wèn)題:
你必須把它們找出來(lái)
它們難以掃描
它們不好控制
引發(fā)短視行為
在主頁(yè)上增加更多的項(xiàng)目所得到的和付出的并不一致撩匕,得到推薦的欄目獲得了巨大的訪問(wèn)量鹰晨,而由于主頁(yè)變得更混亂而造成的有效性總體損失則要由所有的欄目 一同承擔(dān)
確定你沒(méi)有做錯(cuò)的幾件事
八、農(nóng)場(chǎng)主和牧羊人應(yīng)該是朋友
為什么?
主張的力量以及人的天性并村,自然有一種把這些喜歡或不喜歡投射到整個(gè)Web用戶身上的傾向巍实,認(rèn)為絕大部分Web用戶喜歡我們所喜歡的,通常認(rèn)為絕大部分Web用戶和我們一樣哩牍。
在這種個(gè)人情緒的表面之上棚潦,還有另一個(gè)層次的問(wèn)題:職位情緒。
在“大部分Web用戶和我們一樣”這種信仰的背后膝昆,還有一種隱藏的更深的信仰:相信大部分Web用戶是彈性的丸边,可以隨意變化〖苑酰——普通用戶神話
如何避免妹窖?
測(cè)試,建立版本收叶,然后仔細(xì)觀察人們對(duì)它的看法和使用的方法孵延。
九婉刀、一天10美分的可用性測(cè)試
焦點(diǎn)小組不是可用性測(cè)試
焦點(diǎn)小組
一小組人(通產(chǎn)是5-8人)圍坐在桌子旁邊,對(duì)展示給他們的想法和設(shè)計(jì)作出反應(yīng)。這是一個(gè)小組的過(guò)程混滔,主要價(jià)值來(lái)自于參與人員彼此的反應(yīng)干发。焦點(diǎn)小組是快速得到用戶的意見(jiàn)和感覺(jué)的一種不錯(cuò)的方法可用性測(cè)試
一次一個(gè)用戶展示一些內(nèi)容(不管是網(wǎng)站凯旋,還是網(wǎng)站原型择诈,或是一些單個(gè)頁(yè)面的草圖),并且要求用戶說(shuō)出:1)這是什么俏竞;2)試著用它來(lái)完成一項(xiàng)典型的任務(wù)-
關(guān)于測(cè)試的幾個(gè)事實(shí)
- 如果想建立一個(gè)優(yōu)秀的網(wǎng)站绸硕,一定要測(cè)試。
- 測(cè)試一個(gè)用戶比不做測(cè)試好一倍魂毁。
- 在項(xiàng)目中玻佩,早點(diǎn)測(cè)試一位用戶好過(guò)最后測(cè)試50位用戶
- 人們對(duì)招募用戶代表的重要性估計(jì)過(guò)高
- 測(cè)試的關(guān)鍵不是要證明什么或者反駁什么,而是了解你的判斷力
- 測(cè)試是一個(gè)迭代的過(guò)程
- 沒(méi)有什么比現(xiàn)場(chǎng)用戶的反應(yīng)更重要
寬松招募漱牵,曲線上升
利用你能夠?qū)ふ业降娜魏稳耍M足最低要求)夺蛇,然后曲線上升。** 你的測(cè)試用戶和目標(biāo)群體之間可以存在差異酣胀,理由如下:**
實(shí)際上刁赦,我們都是初學(xué)者
設(shè)計(jì)出的網(wǎng)站只有你的目標(biāo)群體能使用,這通常并不是一個(gè)好主意
專(zhuān)家通常不會(huì)介意對(duì)初學(xué)者來(lái)說(shuō)很清楚的界面
-
但也有一些例外:
- 如果你的網(wǎng)站幾乎只有某一類(lèi)用戶使用闻镶,而且招募這一類(lèi)測(cè)試用戶并不困難
- 如果你的目標(biāo)用戶群體可以分成幾個(gè)明顯的陣營(yíng)甚脉,而且這些陣營(yíng)有著完全不同的興趣和需要
- 如果使用你的網(wǎng)站需要專(zhuān)門(mén)的領(lǐng)域知識(shí)
當(dāng)你在進(jìn)行招募的時(shí)候,應(yīng)注意以下幾個(gè)問(wèn)題:
提供合理的激勵(lì)
邀請(qǐng)要簡(jiǎn)單
避免對(duì)網(wǎng)站(或網(wǎng)站背后的組織結(jié)構(gòu))進(jìn)行預(yù)先討論
別不好意思請(qǐng)朋友和鄰居幫忙
測(cè)試什么铆农,什么時(shí)候測(cè)試
“理解“”測(cè)試牺氨,顧名思義狡耻,就是讓測(cè)試用戶看到網(wǎng)站,然后看他們能否理解這個(gè)網(wǎng)站猴凹,理解網(wǎng)站的目標(biāo)夷狰、價(jià)值主張、組織方法郊霎、運(yùn)行方式等
關(guān)鍵任務(wù)測(cè)試沼头,讓用戶完成一些任務(wù),然后觀察他們是怎么做的
** 立刻回顧測(cè)試結(jié)果**
給問(wèn)題分類(lèi)——回顧大家看到的問(wèn)題书劝,決定哪些問(wèn)題需要修正
解決問(wèn)題——找出修正這些問(wèn)題的方法
一些問(wèn)題分類(lèi)中指南
關(guān)于決定修正什么問(wèn)題(還有不要修正的地方)进倍,下面給出一些建議:忽略“Kayak”(皮劃艇)問(wèn)題
抵制添加的沖動(dòng)
不要太看重人們對(duì)新功能的要求
-
抓住夠得著的果子
- 恍然大悟型,當(dāng)?shù)谝粋€(gè)用戶試著勉強(qiáng)應(yīng)付的時(shí)候购对,問(wèn)題和解決方法都很明顯
- 便宜型猾昆,1)幾乎毫不費(fèi)力的;2)需要費(fèi)一點(diǎn)力氣骡苞,但效果非常明顯的
別把孩子也潑出去了垂蜗,修正問(wèn)題的同是要保證不破壞已經(jīng)正常運(yùn)行的部分
大的方面和外界影響
十、可用性是基本禮貌
對(duì)Web可用性而言烙如,還有另外一個(gè)重要的組成部分:做正確的事
好感存儲(chǔ)器
關(guān)于好感存儲(chǔ)器么抗,有以下幾點(diǎn)值得注意:它因個(gè)人特質(zhì)的不同而不同
它依情況而定
你可以重新填滿它
有時(shí)候一個(gè)錯(cuò)誤就能清空它
降低好感的幾種方式
下面提到的幾件事會(huì)讓用戶覺(jué)得發(fā)布網(wǎng)站的人并不關(guān)心他們的利益:隱藏我想要的信息
因?yàn)闆](méi)有按照你們的方式行事而懲罰我
向我詢問(wèn)不必要的信息
敷衍我,欺騙我
給我設(shè)置障礙
你的網(wǎng)站看上去不專(zhuān)業(yè)
提高好感的幾種方式
知道人們?cè)谀憔W(wǎng)站上想做什么亚铁,并讓它們明白簡(jiǎn)易
告訴我我想知道的
盡量減少步驟
花點(diǎn)心思
知道我可能有哪些疑問(wèn),并且給予解答
為我提供協(xié)助螟加,例如打印友好頁(yè)面
容易從錯(cuò)誤中恢復(fù)
如有不確定徘溢,記得道歉
十一、 可訪問(wèn)性捆探、級(jí)聯(lián)樣式表和你
- 增強(qiáng)網(wǎng)站的可訪問(wèn)性然爆,可注重的幾個(gè)方面:
- 改正讓所有人感到混淆的可用性問(wèn)題
- 閱讀《網(wǎng)站可訪問(wèn)及可用指南:屏幕閱讀器用戶觀察》
- 閱讀關(guān)于Web可訪問(wèn)性的書(shū)
- 開(kāi)始使用級(jí)聯(lián)樣式表
- 去摘夠得著的果子
- 為每張圖片增加alt文本
- 讓你的表單配合屏幕閱讀器
- 在每頁(yè)的最前面增加一個(gè)“跳轉(zhuǎn)到主要內(nèi)容”的鏈接
- 讓所有的內(nèi)容都可以通過(guò)鍵盤(pán)訪問(wèn)
- 如果沒(méi)有充分的理由,不要使用JavaScript
- 使用客戶端(而不是服務(wù)器)的影像地圖
十二黍图、 救命曾雕!老板想要我……
- 要求太多個(gè)人數(shù)據(jù)的危險(xiǎn)
- 詢問(wèn)不必要的信息可能產(chǎn)生的嚴(yán)重后果:
- 常常無(wú)法得到真實(shí)的數(shù)據(jù)
- 得到的完整表單更少
- 使網(wǎng)站形象下降
- 表單的三個(gè)原則:
- 只讓用戶提供完成此次事務(wù)所需的信息
- 不要要求填寫(xiě)過(guò)多可選信息
- 告訴用戶提供的信息將得到的回報(bào)