網站互動設計模式

《網站互動設計模式》由電子工業出版社出版。

在我從事全球IBM市場工作的過程中，我得益於與一些最好的國際化互動性代理公司和公司內部的網站團隊的合作。當我閱讀本書的時候，（我發現）這本書提供了來自於積累多年的專業化建議和領悟。我從來沒有看到過這樣～本實用、有效和易用的書來解決和避免因特網設計問題。我把這本書留在午邊，以便隨時提醒我那些忘記的事情，並且疚得新的觀點，它從來沒有讓我失望過。
——John Cilio，IBM System x&z Storage synergy市場經理
這本書巧妙地將Christoptler Atexander首創的模式語言融合到體驗設計之中，是有價值並且僉面的參考書。
——CeogreHacknlan，IR。oracle公司，Pattems and Standards，L3ser Experlence for User Interface Guidelines高階主管
“這本書是我的可用性工具箱中最好的工具之一，這些Web介面設計模式讓我向客戶展示如何獲得最有效的可用性方案變得更容易。”
——GLAUDIA ALDEN CASE 可用性諮詢專家和互動設計師，Alden case公司
如果生物學課程能像這本書這樣多好。青晰的文字、核心的內吝和全面的分類既是靈惑的來源，也是創造的工具。這確實是一本好書。如果您構建Web網站，就請閱讀它。
——Marc Cambell 《web設計庫》一書的作者
停止您每一次設計Web網站的時候都重新設計的嘗試吧！它可以幫助您重新從風格和模式的角度思考您的網站。一旦您明確了模式，並且像這本書中介紹的那樣對這些模式進行了最佳實踐，那麼就至少可以減少50％的設計工作量。
——PAWAN.R.VORA Seurat公司資訊架構高階副總裁
這本書中的內蓉能夠讓一個新手在一個週末就變成專家。很多公司都花費了大量財富來獲得這本書中主要章芍所描述的資訊。
——JOHN CILIO IBM系統與儲存協同部市場經理
這本書有很多可以隨時使用的檢查列表，來告訴您在建立一個常規網站的時候哪些能做，哪些不能做。只要按照作者的建議去做，就可以讓您的網站在可讀性和可用性上名列前茅。
——JEF RASKIN　Macintosh計算機的建立者，人機介面的作者
此書的出版，讓我們不用再忍受那些設計很糟糕的網頁了。作者從成功的網站設計者那裡收集到各種模式，當然也包括自己在諮詢和教學方面的經驗，我們能夠看到他們所描述的這些模式。這本書是可讀的，而且百大量有價值的資訊，可以作為任何一個網站設計者的手冊。 　　 　　——LINDA RISING　獨立專家、《模式手冊》《模式年鑑2000》和《通訊軟體中的設計模式》3本書的作者
本書為理論和實踐之問建立了一座橋樑，使得從事網站設計的人們在工作中使用以使用者為中心的設計準則成為可能，並且不需要經過額外的培訓。
——MAYA VENKATRAMAN　Sun公司人機互動工程師
本書的題材非常優秀，它討論了超出“設計最佳頁面”以展示內容的經典話題，我沒有看到任何其他書籍有與這本書相近的深度。
——TERRY WINoGRAD　史丹佛大學電腦科學教授，《將設計帶給軟體》一書的作者

作者：(美國)杜月(Douglas K.Van Duyne) (美國)藍帝(James A.Landay) (美國)巨集(Jason L.Hong) 譯者：孫昕 焦洪

Douglas K.van Duyne，是一位企業家和發明家，是Naviscent（一家網站研究和設計公司）和DuneDesignGroup（一家戰略數字產品設計公司）的創辦人和負責人之一，也是NetRaker有限公司的共同創辦人和CEO。該公司是線上可用性和市場調查方面的先鋒，其團隊已經為包括MBNA、Yahoo、Intel、Safeway、Agilent和其他全球2000多家公司開發了多種創新產品。帶著在GOCorporation和KidSoft的公司中積累的產品設計和開發方面的20多年的工作經驗，他已成為線上購物、電子商務、軟體與多媒體開發方面的一位改革者，並且擁有加州大學伯克利分校的電腦科學學位，目前他住在舊金山、紐約和倫敦。
James A.Landay，是華盛頓大學的一名教授，先前是英特爾公司西雅圖研究中心的一位總監，主要從事新興的ubiquitouscomputing領域的研究，他還曾是NetRaker的技術長和共同創辦人，以及加州大學伯克利分校的副教授。他於1990年獲得了伯克利分校的電子工程和電腦科學的學士學位，並且分別於1993年和1996年在卡內基梅隆大學獲得碩士和博士學位。其博士論文第1個論證了使用者介面設計工具的草圖作用，並且已經在人機互動領域發表了大量的文章，包括使用者介面設計和評估工具、網站設計、姿態識別、筆式使用者介面、移動計算、ubiquitouscomputing，以及視覺語言等方面的文章。他還是許多矽谷公司的顧問，目前與其妻子Eileen、兒子Andrew和Timothy及其愛犬住在西雅圖。
Jason I.Hong，是卡內基梅隆大學人機互動系的電腦科學教授，在喬治亞技術學院獲得學士學位，並且在伯克利獲得博士學位，其論文研究了在ubiquitouscomputing環境中的祕密。Jason曾在IBM、FuiiXeoxPaloAlto實驗室和Xerox從事研究工作，在那裡他研究了許多課題。例如，協作的Java應用程式、紙式使用者介面和在手機中觀看和導航網頁的技術。他當前正在從事使用隱私和安全，以及防止詐騙和定位服務的研究。Jason喜歡從Intemet、印刷物、電視、電影及音樂媒體中獲得大量的資訊諮詢，其主要的興趣在世界歷史、科技、科技的社會影響，以及超自然的因素，他與其妻子住在賓州。

第1部分 Web網站設計基礎
第1章 以使用者為中心的Web設計：不只是一個好主意 2
1.1 Web設計的發展史 2
1.1.1 第一代 2
1.1.2 第二代 3
1.1.3 第三代 3
1.1.4 第四代 4
1.2 “以使用者為中心”設計的重要性 4
1.3 統一設計、可用性和市場的第1步 5
1.4 為什麼傾向於以使用者為中心的設計 6
1.4.1 以使用者為中心的設計 6
1.4.2 以公司為中心的設計 7
1.4.3 以技術為中心的設計 7
1.4.4 以設計者為中心的設計 7
1.4.5 以使用者為中心的設計的優勢 7
1.5 9種關於以使用者為中心的荒謬說法 8
1.5.1 謬誤1：好的設計很普通 8
1.5.2 謬誤2：只有專家才能實現好的設計 8
1.5.3 謬誤3：Web介面能夠在釋出前重新設計 9
1.5.4 謬誤4：好的設計會花費太長的時間且成本太高 9
1.5.5 謬誤5：好的設計只是一些美觀的圖形 9
1.5.6 謬誤6：Web介面指南會幫助完成好的設計 9
1.5.7 謬誤7：使用者總可以依賴文件和幫助資訊 9
1.5.8 謬誤8：市場研究會揭示所有使用者的需求 10
1.5.9 謬誤9：質量保證小組會確認網站是否工作良好 10
1.6 實施以客戶為中心的設計 10
1.6.1 原則 10
1.6.2 過程 10
1.6.3 模式 11
1.6.4 使用原則、過程和模式 11
1.7 小結 11第2章 Web設計模式 12
2.1 什麼是模式 12
2.2 一個模式的例子 13
2.3 如何閱讀模式 15
2.4 隨著時間的流逝，模式會如何變化 16
2.5 如何使用模式 23
2.6 一個使用模式的例子 24
2.7 小結 26

第3章 瞭解使用者：規則和技術 27
3.1 瞭解使用者的有關規則 28
3.1.1 自己並不是使用者 28
3.1.2 理解組成單元，平衡影響力 28
3.1.3 理解使用者 29
3.1.4 使用者是不同的 29
3.1.5 使用者又是一樣的 29
3.1.6 理解使用者的業務 31
3.1.7 減少工作 32
3.1.8 業務培訓 32
3.1.9 幫助人們成為專家 33
3.1.10 理解技術 33
3.1.11 理解使用者的社會問題 34
3.2 用於瞭解使用者的技術 35
3.2.1 開始業務分析 35
3.2.2 構建應用場景 36
3.2.3 選擇業務 38
3.2.4 觀察使用者並與其面談 39
3.2.5 使用者調查 43
3.2.6 運用焦點組 44
3.2.7 分析已經存在的網站 45
3.3 小結 45

第4章 與使用者一起做迭代設計 46
4.1 迭代設計過程 46
4.2 採用迭代設計的原因 47
4.2.1 在錯誤還很容易修正並且開銷很小時修正它們 48
4.2.2 構建正確的網站和正確地構建網站 48
4.3 有目標和原則的設計 49
4.3.1 設定可度量的設計目標 49
4.3.2 堅持設計原則 51
4.3.3 資訊結構、導航設計和圖形設計 52
4.4 快速原型 53
4.4.1 網站地圖、故事板和圖表 53
4.4.2 真實度從低到高的漸進式提煉 56
4.4.3 橫向原型和縱向原型 60
4.4.4 原型的侷限 61
4.5 評估網站 61
4.5.1 專家評審 61
4.5.2 非正式評估 62
4.5.3 正式可用性評估 63
4.5.4 選擇一種評估技術 63
4.6 小結 64

第5章 開發以使用者為中心網站的過程 65
5.1 開發過程概覽 66
5.2 發現階段 67
5.2.1 發現過程 67
5.2.2 發現過程的交付物 69
5.3 探索階段 71
5.3.1 探索過程 71
5.3.2 探索過程的交付物 71
5.4 精煉階段 71
5.4.1 精煉過程 71
5.4.2 精煉過程交付物 72
5.5 製作階段 72
5.5.1 製作過程 73
5.5.2 製作階段交付物 73
5.6 實現階段 74
5.6.1 實現過程 74
5.6.2 實現階段交付物 75
5.7 執行階段 75
5.8 維護階段 76
5.8.1 維護過程 76
5.8.2 維護階段交付物 77
5.9 小結 77

第2部分 模式
模式組A 網站風格 79
A1 個人電子商務 80
A2 新聞馬賽克 85
A3 社群會議 90
A4 自我服務的政府 97
A5 提供幫助的非營利性網站 100
A6 大眾資訊網站 105
A7 有價值的公司網站 109
A8 教育論壇 114
A9 有刺激性的藝術和娛樂內容 119
A10 Web應用程式 123
A11 內部網 128
A12 部落格 131

模式組B 建立導航框架 141
B1 導航的不同方法 142
B2 可分類瀏覽的內容 145
B3 層次化結構 148
B4 基於任務的組織結構 151
B5 字母順序的組織結構 155
B6 時間順序的組織結構 156
B7 基於流行度的組織結構 158
B8 目錄頁 161
B9 站點可達性 164

模式組C 建立一個強有力的主頁 174
C1 主頁入口 174
C2 提前價值定位 180

模式組D 製作和管理內容 184
D1 頁面模板 185
D2 內容模組 190
D3 標題和簡介 194
D4 個性化內容 198
D5 留言簿 205
D6 製作符合搜尋引擎要求的網站 213
D7 倒金字塔編寫方式 219
D8 可列印的頁面 224
D9 與眾不同的HTML標題 226
D10 國際化和本地化內容 231
D11 樣式表 235

模式組E 建立信任和信譽 240
E1 網站商標 241
E2 E-mail訂閱 245
E3 公平資訊處理條例 249
E4 隱私政策 253
E5 關於我們 257
E6 安全連線 262
E7 E-mail提示 265
E8 隱私偏好 270
E9 防止詐騙 275

模式組F 基本電子商務 284
F1 快速結賬 285
F2 清晰的產品詳細資料 290
F3 購物車 297
F4 快速選址 303
F5 選擇快速運輸方式 307
F6 付款方式 311
F7 訂單概要 315
F8 訂單確認和感謝 319
F9 輕鬆退貨 322

模式組G 高階電子商務 326
G1 特色產品 326
G2 交叉銷售和提升銷售 332
G3 個人推薦 337
G4 推薦社團 342
G5 多重目的地 348
G6 禮品贈與 351
G7 訂單跟蹤和歷史 355

模式組H 幫助使用者完成任務 361
H1 過程漏斗 362
H2 登入/新使用者 365
H3 客人賬戶 370
H4 賬戶管理 373
H5 持久的使用者會話 377
H6 浮動視窗 381
H7 常見問題 384
H8 上下文幫助 388
H9 直接操作 391
H10 明文形式 397
H11 預言性的輸入 403
H12 向下鑽取選項 406
H13 進度條 411

模式組I 設計讓人印象深刻的頁面佈局 417
I1 表格式佈局 417
I2 折線之上 420
I3 清晰的第一印象 423
I4 擴大螢幕寬度 426
I5 固定的螢幕寬度 430
I6 相關內容的一致側邊欄 434

模式組J 加速網站並恰當地搜尋 438
J1 搜尋動作模組 438
J2 直接搜尋形式 441
J3 有組織的搜尋結果 443

模式組K 輕鬆導航 448
K1 統一的瀏覽層次 449
K2 導航欄 451
K3 標籤行 454
K4 動作按鈕 457
K5 高可見動作按鈕 459
K6 位置麵包屑 461
K7 嵌入式連結 463
K8 外部連結 465
K9 描述性的長連結名 468
K10 顯著的連結 471
K11 熟悉的語言 474
K12 預防錯誤 476
K13 有意義的錯誤訊息 479
K14 頁面沒有找到 481
K15 永久連結 483
K16 跳躍選單 489
K17 網站地圖 495

模式組L 加速網站 500
L1 少量的檔案 501
L2 快速載入的圖片 503
L3 獨立的表格 508
L4 HTML POWER 510
L5 可重用的圖片 513
L6 快速載入的內容 515

模式組M 移動網站 523
M1 手機螢幕尺寸 523
M2 手機輸入控制 530
M3 定位服務 535

第3部分 附錄
附錄A 執行可行性測試 543
A.1 設定目標 543
A.2 提出任務 544
A.3 招募參與者 545
A.4 測試 547
A.5 分析資料 551
A.6 呈現結果 552
附錄B 網站評估方案示例 554
B.1 角色 554
B.2 介紹 554
B.3 任務 555
B.4 聽取報告 555
附錄C 樣品知情同意書 556
附錄D 樣品觀察者表格 558
附錄E 線上研究 559
E.1 開始：定義研究目標 561
E.2 分階段研究 561
E.3 研究型別 562
E.4 測試 564
E.5 分析資料 567
E.6 研究方法的比較 568
E.7 小結 570
附錄F 術語表 571
附錄G 資源 594
第1部分 Web網站設計基礎 594
第2部分 模式 600
第3部分 附錄 626
專業組 628

4年前，我們在本書開始寫到一個人發現了一條會說話的狗的故事。當問到那條狗說了什麼時，那個人回答：“誰關心這個？它是一條會說話的狗啊！”在這件事情發生幾年後，即20世紀90年代早期，Web就是那條會說話的狗。其存在是那麼令人著迷，商務人士發現可以通過Web來銷售，而不需要支付巨大的用於平面媒體和電視廣告等產品和分銷的費用。Web網站幾乎在一夜之間變成了商業的投機物件，與此同時這種新的媒體迎來了一個快速變革的時代。隨著Web的發展，開發人員所面臨的問題與其他任何行業成熟時所面臨的一樣。即人們越來越關心價值、便利性和易用性等因素，而不是技術本身是否新穎。由此產生了一個新的說法，即“以使用者為中心的設計”來應對這種變化的嘗試。
對我們這幾個作者來說，以使用者為中心的設計對電子商務並不是一個熱門話題。8年前，當我們還分別是一個具有軟體設計背景的企業家、一位加州（伯克利）大學的電腦科學教授和一位博士研究生時，我們就為開發Web這個新媒體的商務應用的人們提供了客戶需求廣泛性的觀點。雖然這些觀點最終帶來了Web開發產業的繁榮和本書的誕生，我們仍然在這個領域存在很多疑問。我們研究的一部分在於分析大多數Web網站沒有達到客戶期望的原因，因此對兩個問題很感興趣，一是典型的設計機構如何開展自己的工作；二是為什麼公司會僱用公司外的Web網站設計公司來設計Web網站，而不是自己親自設計。
為了幫助回答這些問題，我們派了一些研究人員直接與Web設計人員及其客戶溝通。我們認識到那些被公司僱用來設計網站的代理公司曾有建立知名品牌網站的成功經驗。然而在那時，是通過介面的美觀性，而不是通過衡量為客戶帶來多大的成功來區分Web設計者的水平的。但是當我們瞭解到絕大多數Web設計者在轉行之前工作在印刷、電影或者電視等所有非互動性媒體等行業之後才不覺得奇怪，並且只有很少的工具能夠用來幫助設計者理解Web使用者的體驗。事實上，當研究一個新的客戶網站時我們能夠認識到網站對生意有所影響，現在我們知道這是因為初始的設計者完全無視網站的互動性設計且秉承外觀重於功能的傳統觀念來完成網站設計。
這個想法在我們的日常工作中變得越來越清晰，我們遇到了很多困難的網站設計問題並且解決了。我們看到很多客戶雖然在設計網站時的所有要點都是正確的，但是網站設計仍然失敗了。在一個這樣的失敗專案中我們測試了一個客戶的大型電子商務網站，要求典型的網站訪問者查詢一種指定的產品。

插圖：

啟發式評審對於找到潛在的可用性缺陷是一種特別有效的技術，它也可以幫助識別那些在絕大多數可用性研究時被忽略的問題。例如，選擇顏色的貧乏。我們還發現啟發式評估在高保真度原型方法中應用比低保真度原型方法更為有效，缺乏經驗的評審會造成把注意力集中在那些不重要的片面問題上，我們建議在擁有了高保真度的HTML原型之後再進行啟發式評估。
對於任何啟發式評估來說，請注意下列警告。即通常專家知道的太多或者不夠多。他們可能比使用者更精於世故，會忽略到影響真實使用者的內容；另外一個方面，如果網站是提供給那些專業領域的使用者的，如醫生，那麼評審的專家們可能沒有足夠的背景知識來理解網站。
更重要的是啟發式評估會展現大量的誤報錯誤，即那些只是在啟發式評估中發現的錯誤，但是在針對同樣介面的可用性研究中根本不會發現。換句話說，專家經常會發現一些在現實中根本不會遇到的問題，修正這些誤報錯誤可能會浪費大量的關鍵性設計和工程資源。不過啟發式評估對於發現可能存在的可用性問題來說，仍然是一種成本低並可以只花費幾個小時來執行的好方法。我們建議讀者檢視Nielsen的網站和論文來獲取實施啟發式評估的詳細資訊，並且在非正式和正式的可用性測試場合中使用這種技術。