就這么簡單：Web開發(fā)中的可用性和用戶體驗

前言
序章 關(guān)于這本書
0.1 誰該看這本書？
0.2 這是本什么樣的書？
0.3 怎么用這本書？
0.4 感謝這些伙計
第一章 你首先要知道的一些事情
1.1 我聽說過這些詞不過它們到底是什么？
1.1.1 什么是UI設(shè)計
1.1.2 什么是交互設(shè)計
1.1.3 什么是好的用戶界面設(shè)計
視覺表達不清
非常繁瑣
提示混亂
難以使用
強迫用戶
1.1.4 那么該怎么做？
什么人會使用產(chǎn)品？用在什么地方？
用戶會有些什么樣的行為？
1.2 我干嘛得學(xué)這些玩意還要買本書？！
1.2.1 用戶界面不是次要的工作
1.2.2 用戶界面設(shè)計不是界面程序設(shè)計，也不是界面圖形設(shè)計
對于軟件設(shè)計師來說
對于美術(shù)設(shè)計師來說
真正的用戶界面設(shè)計人員
1.2.3 交互設(shè)計是一門跨學(xué)科領(lǐng)域
1.2.4 不用成為專家，理解方式即可
1.3 OK，那我該怎么做？
1.3.1 交互設(shè)計的4個內(nèi)容
理解用戶需要，建立用戶需求
開發(fā)一些候選設(shè)計方案
制作設(shè)計方案的原型
用戶測試和評估
1.3.2 交互設(shè)計的3個特征
以用戶為中心
建立明確具體的可用性標(biāo)準(zhǔn)
反復(fù)迭代
1.3.3 交互設(shè)計的2個目標(biāo)
可用性目標(biāo)
用戶體驗?zāi)繕?biāo)
1.3.4 摩西的十誡
讓用戶隨時了解系統(tǒng)的狀態(tài)
系統(tǒng)應(yīng)與真實世界相符合
給予用戶控制權(quán)和自主權(quán)
提倡一致性和標(biāo)準(zhǔn)化
幫助用戶識別、診斷和修復(fù)錯誤
預(yù)防錯誤
依賴識別而不是記憶
強調(diào)使用的靈活性及有效性
最小化設(shè)計
提供幫助及文檔
1.3.5 如何粗略地評估可用性
第二章 了解用戶，了解需求
2.1 誰是用戶？
2.1.1 普遍而又特殊的用戶
用戶的普遍性
用戶的特殊性
兩者兼顧
2.1.2 用戶可不是越多越好
2.1.3 “阿童木”的誕生
2.2 什么是需求？
2.2.1 “需要”產(chǎn)生需求
2.2.2 點了牛扒，端上來的卻是意大利面
2.2.3 各種類型的需求
功能需求
用戶需求
數(shù)據(jù)需求
環(huán)境需求
可用性需求
2.3 如何確定需求
2.3.1 介紹一些數(shù)據(jù)搜集的方法
問卷調(diào)查
用戶訪談
觀察和提問
集體討論
2.3.2 筷子、刀叉和勺，哪種餐具最好？
2.3.3 一些要注意的地方
一切的重點都是為了搞清楚用戶需要什么
要考慮所有的用戶類別
每個用戶類別只派一位代表參與是不充分的
打“組合拳”，不要單一套路
在可能的情況下，先小規(guī)模試驗
如果得到的需求信息太多
記錄數(shù)據(jù)同樣很重要
2.3.4 解釋與分析數(shù)據(jù)——一道填空題
2.4 歸根結(jié)底，我們要了解任務(wù)
2.4.1 用講故事來描述任務(wù)
2.4.2 用流程圖描述任務(wù)
2.4.3 理想和現(xiàn)實的差距
守舊的用戶
過分的用戶
妥協(xié)還是抗?fàn)帲?br />2.5 環(huán)境？什么是環(huán)境？
2.6 做個小結(jié)
第三章 設(shè)計方案和制作原型
3.1 為什么，以及怎么做
3.2 初級原型和高級原型
3.2.1 初級原型很重要
草圖，或者說涂鴉
連環(huán)畫
制作卡片
模擬界面
3.2.2 高級原型同樣重要
3.2.3 嗯，不過原型僅僅只是原型
3.3 概念設(shè)計，或者說初步設(shè)計
3.3.1 伙計們，讓我們先考慮功能
3.3.2 概念模型是個什么玩意？
開放思路，同時考慮用戶和應(yīng)用環(huán)境
保持簡單，但也不要過于簡單
使用初級原型來快速獲取反饋
反復(fù)迭代進行設(shè)計
3.3.3 開發(fā)概念模型的幾個問題
采用什么樣的交互方式？
是更“智能”還是更“服帖”？
是否存在合適的熟悉概念進行映射比擬？
3.3.4 在概念設(shè)計中使用原型
3.4 物理設(shè)計，或者說具體設(shè)計
3.4.1 一些具體的設(shè)計指南
力求一致性
允許頻繁使用系統(tǒng)的用戶使用快捷鍵
提供明確的反饋
設(shè)計對話，告訴用戶任務(wù)已完成
提供錯誤預(yù)防和簡單的糾錯功能
應(yīng)該方便用戶取消某個操作
用戶應(yīng)掌握控制權(quán)
減輕用戶的記憶負擔(dān)
3.4.2 界面元素和界面風(fēng)格
3.4.3 菜單（或者導(dǎo)航欄）的設(shè)計
3.4.4 圖標(biāo)的設(shè)計
不要“辭不達意”
小而簡單
3.4.5 屏幕布局的設(shè)計
大的方針
同時也要考慮細節(jié)
還要很多地方需要注意
3.4.6 別理那些復(fù)雜的工具，我們做的是Web
第四章 以用戶為中心的開發(fā)
4.1 為什么要讓用戶摻和進來？
告訴他們別太天真
另一方面他們才是真正的主人
4.2 支持用戶，而不是限制他們
排第一位的永遠是用戶，不是技術(shù)
給他們最習(xí)慣的環(huán)境
要支持用戶，就得考慮周全
經(jīng)常向他們咨詢意見
4.3 如何讓用戶參與？
4.3.1 用戶參與的不同形式
極端之一：讓用戶作為設(shè)計組成員
極端之二：用戶遠距離參與設(shè)計
4.3.2 用戶參與的是與非
4.4 別用望遠鏡，要現(xiàn)場研究
4.4.1 關(guān)于現(xiàn)場研究
4.4.2 你是師傅，我是徒弟
不是在會客室
建立正確的關(guān)系
該問就大膽問
不要跑題太遠
4.4.3 這不是你的地盤，別太不拘小節(jié)
4.4.4 我們能得到什么？
第五章 文化的差異
5.1 什么是文化的差異？
5.2 對于Web和Web-based產(chǎn)品來說
5.2.1 一次要做幾件事？
5.2.2 高度認知和低度認知
5.2.3 功能還是關(guān)系？
5.2.4 網(wǎng)頁和界面的視覺反映
5.2.5誰的錯？
5.3 國際化和本土化
注意適配分辨率的大小
盡量多用被廣泛接受的圖標(biāo)
繪制圖標(biāo)時注意地域性
翻譯時使用用戶習(xí)慣的表達方式
注意不同地區(qū)使用的單位和格式
注意文字的輸入
避免出現(xiàn)對某些地區(qū)不適用的信息
其它方面
第六章 網(wǎng)頁的可用性
6.1 人們是如何使用網(wǎng)頁的？
6.1.1 他們很會節(jié)省時間
6.1.2 他們也不會仔細考慮
6.2 好感度計量器
6.2.1 我經(jīng)歷過好幾次這種情況
6.2.2 這些都會降低好感度！
讓我感到郁悶
總是誤導(dǎo)我
總是讓我猜
總是要我找
總是說我錯
耽誤我的時間
甚至還讓我抓狂
6.3 因此，為掃描而設(shè)計
6.3.1 更清楚的布局和視覺層次
越重要的內(nèi)容越醒目
相關(guān)的內(nèi)容看上去也得相關(guān)
包含的內(nèi)容要顯示從屬關(guān)系
別顯示太多無關(guān)的信息
6.3.2 清晰地劃分頁面區(qū)域
6.3.3 適應(yīng)用戶的習(xí)慣
6.3.4 提供目光的“落腳點”
6.4 同時，減少用戶的思考
6.4.1 減少不確定因素
6.4.2 保證網(wǎng)頁的一致性
一致的網(wǎng)站標(biāo)志和導(dǎo)航欄
一致的頁面布局
一致平衡的信息結(jié)構(gòu)
一致的重復(fù)性元素
一致和諧的字體和色彩
一致，但不一樣
6.4.3 明顯標(biāo)識可以點擊的地方
有時候下劃線可有可無
有時候最好有下劃線
超鏈接和按鈕
6.4.4 清晰、簡單的網(wǎng)頁內(nèi)容
使用用戶的語言，而不是技術(shù)語言
使用通俗的語言，而不是故作高深
減去不必要的詞句，讓頁面更簡短
不要夸夸其談，或者讓人摸不著頭腦
6.5 告訴用戶他們在哪里
6.5.1 導(dǎo)航欄存在的意義
6.5.2 導(dǎo)航欄所需要的元素
網(wǎng)站logo標(biāo)識
網(wǎng)站的欄目
“回到首頁”
附加功能
搜索工具
6.5.3 導(dǎo)航指示、頁面標(biāo)題和“面包屑”
導(dǎo)航指示
頁面標(biāo)題
“面包屑”
第七章 Web-based產(chǎn)品
7.1 Web或者不是Web？
有一些比較偏向于軟件
有一些則更偏向于網(wǎng)頁
有些產(chǎn)品比較單純
有些產(chǎn)品的用戶群比較廣大
最后它們還是網(wǎng)頁
7.2 我為什么說要考慮用戶的感受
7.3 首先看看菜單和對話框
7.3.1 我需要菜單，但必須是好菜單
時隱時現(xiàn)的菜單項
探頭探腦的菜單項
7.3.2 讓我陷入困境的對話框
讓我沒有選擇
讓我不知道該怎么選擇
沒有第三種選擇
7.4 你真明白那些控件的作用嗎？
7.4.1 單選按鈕和復(fù)選框
把復(fù)選框當(dāng)作單選按鈕
把單選按鈕當(dāng)作復(fù)選框
是必須要我選，還是不需要我選？
7.4.2 標(biāo)簽雖好，問題多多
標(biāo)簽只能用來導(dǎo)航，不能選擇數(shù)據(jù)
到處都是的標(biāo)簽
太小和太大的標(biāo)簽
7.4.3 簡單而又不簡單的文本框
在不該用的地方使用文本框
該用文本框的地方卻又很隨意
7.5 每一個元素都要有合適的位置
7.5.1 控件的擺放位置
胡亂放置的按鈕
距離產(chǎn)生美？
7.5.2 你無法逃避的對齊方式
是左對齊還是右對齊
不要只注意一邊
如果有時候左右都不能對齊
上下也要對齊
第八章 測試可用性
8.1 為什么要測試？
8.1.1 美國到底民主還是不民主？
我喜歡的，別人也應(yīng)該喜歡
角色的不同導(dǎo)致看法不同
8.1.2 這不是簡單的是非題
8.2 幾個要注意的事實
8.2.1 一些需要記住的事實
可用性測試不是軟件測試
哪怕只測試一個用戶，也比不做測試要好
早點測試一個用戶，好過最后測試100個用戶
“迭代”的測試和頻繁的測試
測試后馬上回顧測試結(jié)果
8.2.2 一些需要避免的認識
不要認為可用性測試很難
不要認為可用性測試總是非常昂貴
不要認為可用性測試是表層問題
不要認為測試是要去“證明”什么
不要僅僅測試，卻不糾正發(fā)現(xiàn)的問題
8.3 測試的前期準(zhǔn)備
8.3.1 測試的地點和設(shè)備
最正式和最精良的裝備
你也可以優(yōu)化和精簡
8.3.2 測試用戶的招募
測試用戶的選擇
究竟每次應(yīng)該測試多少用戶？
如何招募用戶？
8.3.3 主持人和觀眾
誰適合當(dāng)測試的引導(dǎo)人？
誰適合當(dāng)測試的觀察者？
8.3.4 道德問題
8.4 測試的過程
8.4.1 設(shè)計好考題
8.4.2 介紹階段
8.4.3 正式測試
觀察用戶
讓用戶進行有聲思考
提出問題
尊重測試用戶
一個實例你就能明白
8.4.4 馬上回顧和總結(jié)
8.5 讓專家來評估（別忘了，你也是專家）
8.5.1 現(xiàn)成的原則——啟發(fā)式評估
8.5.2 你也可以看看這些具體的評估角度
關(guān)于一致性的評估
關(guān)于界面簡潔性的評估
關(guān)于信息反饋的評估
關(guān)于用戶動作性的評估
關(guān)于產(chǎn)品特色的評估
8.6 測試需要修正
有些問題可以忽略
有些要求也可以忽略
別顧此失彼！
第九章 了解滿意度
9.1 詢問用戶：問卷調(diào)查
9.2 詢問用戶：訪談
終章 回到開始：什么是好的用戶界面設(shè)計