《Web設計禁忌》
“Web Bloopers”
作者：Jeff Johnson
用戶交互設計、用戶體驗設計、平面設計、網站流程設計。
該書的支持網站http://www.web-bloopers.com
第一部分內容與功能禁忌
第1章 內容禁忌
禁忌1：主頁身份危機：
機構名稱位置顯著
機構名稱明確
機構職能簡要說明：不要涉及行話、公司機構名稱和縮寫
圖示說明機構的產品或服務項目
禁忌２：混亂的分類
按層次組織的、獨立的、互斥的、徹底的、不隨心所欲的
耶魯設計指南Lanch and Horton, 2002
禁忌３：毫無意義的說明
項目的描述信息應該使用戶能夠確定是否是他們想要的內容
萬一多個項目表面上相關，那么項目的描述信息應該能夠幫助用戶加以區分。
項目中有我需要的嗎？符合條件的項目中那一個最能滿足我的要求？項目名稱和說明中不應該包含市場化的干擾性詞語。
網站的分類名稱應該由具有代表性的用戶來測試，查看他們對用戶的實際含義是否和網站設計者預期的一致。如果用戶誤解了名稱，用戶沒有錯，錯在設計者，需要改變名稱。
禁忌４：內容不一致
有關特定項目的所有圖片應該連接到唯一的圖像文件
在線目錄中列出的相同項目應該連接到唯一的項目頁面
有關項目中全部描述和屬性來源應該唯一
禁忌５：過期的內容
素材發生變化：沒有一成不變的內容
變化的內容需要付出特殊的努力
兌現你自己的最後期限，否則不要聲明
必須維護站點
禁忌６：缺少內容或內容無意義
了解訪問者需要什么，然後將其包含進來。
不要轉移使用者的目標對網站進行測試，以便發現還缺少什么。
禁忌７：未完成的內容
在沒有准備好之前不發布
保留舊站點
避免出現未完成頁面
測試
第2章 任務支持禁忌
禁忌８：多余的需求
沒有利用已提供過的信息
各系統間不協調
忘記用戶的選擇
返回上頁時丟失數據
要求用戶多次登錄：ｐａｓｓｐｏｒｔ
不要強迫用戶經過多個站點
努力從瀏覽器和Ｗｅｂ中得到更好的支持
ｇｅｔ ｐｕｔ方法：會產生沒有加密的數據，數據成為網站Ｗｅｂ日志的一部分；產生垃圾搜藏夾
禁忌９：請求不必要的數據
盡可能少的要求數據
專注當前事務
不要要求任何數據“必須填寫”
不要要求一些用戶沒有的數據
當用戶提交了信息後，盡可能從中推斷出更多的信息
禁忌１０：無意義的選擇
演算法設計要注意的問題
如果選項見沒有區別，就不要出現
如果用戶不理解問題或者不知道答案，就不要詢問
如果有明確的選項，選中它
如果可以推斷出答案，就不要打擾用戶
禁忌１１：忽略重要的選項
全面分析目標用戶的需求然後設計站點和Ｗｅｂ應用程序時提供與這些需求相匹配的選項。
禁忌１２：無能的後台程序
禁忌１３：走到盡頭，你才告訴我！
一旦用戶指明他們要做的事情，就應該進行訂單檢查狀態。
禁忌１４：令人苦惱的任務流程
無意義的說明、缺少內容或內容無意義、非直接連接、要求用戶輸入、兼容性差的文本輸入框、沒有默認值或默認值有毛病、沒有默認的文本輸入點、沒有說服力的標簽、搜索結果似乎相同、丟失相關項目、專業術語
解決方法：１會見典型客戶；２編寫文檔：說明用戶利用網站可以完成什么，能夠操作什么書局，如何操作。這個文檔不必討論用戶界面――用戶如何操作網站，只需要提及功能和用戶需要了解的概念。（概念模型文檔）；３建立２×２矩陣，將站點的目標任務歸納為兩種情況，橫軸是該任務是許多用戶執行還是只有少數用戶執行，縱軸表示一般用戶執行這個任務是頻繁還是偶爾。“多數人頻繁執行”單元格中的任務設計時應該簡化步驟；４在網站開始設計後，但在他們實現之前，編寫用戶如何執行每個重要任務的詳細情節。如果情節太復雜，即使設計實現了，那么在實際執行任務時仍會笨拙。
第二部分用戶界面禁忌
第3章 導航禁忌
禁忌１５：站點反應組織結構圖
在編寫代碼之前，預先投入資金，會見目標用戶
觀察用戶使用設計網站的早期版本的情況，或觀察競爭者網站
獲取用戶對於文件或網站在線模型的反應
設計的網站應該反應用戶的任務而不是組織的結構
同個企業的不同部門應該保持Ｗｅｂ外觀一致。
禁忌１６：數不清的導航
用戶能很好的找到導航，放在顯而易見的地方，導航區域的項目分組應該相同，不要為同類鏈接提供多個導航區
禁忌１７：欺騙性的鏈接復制品
應該該遵循的設計原則：層級菜單的分類列面總結分類的情況，每個控制項的獨立頁面顯示空間的詳細內容。鏈接復制品會終止用戶思考。如果在內容區復制了導航條鏈接，那么這些鏈接應該伴隨着更多的信息，例如簡要說明或者圖片。
純文本鏈接可以復制，主頁中可以包含一些真的鏈接復制品。
禁忌１８：非直接連接：
欺騙鏈接，或者不正常的連接到其他網站，將用戶轉到一個通用頁面：比如廣告將用戶都帶到首頁；已經提交的信息當後退或者刷新時需要重新輸入。
解決方法：鏈接應該履行它的承諾，停留在通向目標的路徑上。
禁忌１９：當前頁面沒有標志或導航（用戶迷路）
無標記、無標題、或不夠顯著；不起作用的標志：瀏覽器標題，頁面背景中的水印；
導航條中對當前頁面應該有標示
禁忌２０：指向當前頁面的活動鏈接（循環鏈接）
當頁面向下滾動時，用戶點擊了一個自我鏈接；頁面中包含隨時變化的圖片；頁面中包含動畫或其他Ａｐｐｌｅｔ；導航條中的自我鏈接。
禁忌２１：缺少導航鏈接：後退，否則沒有其他辦法
沒有出口的錯誤消息或任務完成頁面，４０４頁面。
第4章 表單禁忌
禁忌２２：要求用戶輸入
應該更努力的開發以減少用戶的輸入工作：幫助用戶輸入，選擇列表代替；
什么時候允許用戶輸入：非結構化的內容，如姓名、地址等；安全的內容：如ＩＤ密碼、如電話、郵編；用戶非常了解並且經常輸入的內容：如自己的國家或生日
禁忌２３：兼容性差的文本輸入框
時間和日氣候格式；序列號的破折線問題；表單拒絕自己提供的示例；
解決方法：文本框的長度與數據相匹配，接受一般格式並在後台轉化成接受的數據形式；接受自己的格式；字母大小寫無關；提供一個樣例；結構化文本框。
禁忌２４：沒有默認值
讓用戶需要說明的越少越好，有些可以通過ＩＰ地址、瀏覽器信息等提供給伺服器，此部分信息沒必要用戶填寫；單選按鈕和下拉菜單（自動生成的頁面有經濟優勢但會嚴重影響可用性）
沒有提供默認值的原因：沒有可用的默認值；社交、政治、法律的需要，避免自作主張而冒犯他人。
無默認值的單選按鈕一般不合理
盡管自動生成的頁面有經濟優勢，但是嚴重影響可用性，這影響又轉變成經濟劣勢。
解決方法：盡可能提供默認值；當“None Yet”（以上都不是）是一個重要選項時，將其明確標出並設置為默認值；當沒有假設的默認值時，菜單由於單選；小心使用新型Web菜單。
禁忌２５：有毛病的默認值
默認值並非為用戶考慮；拒絕自己的默認值
解決方法：常識、經驗和站點數據、根據用戶的數據。
禁忌２６：必須用滑鼠點擊：沒有默認的文本輸入點
搜索引擎、登錄信息等常用區域應該設置正確的頁面載入焦點和Tab順序。
禁忌２７：沒有說服力的標簽位置
標簽與對話框或者控制項離得太遠（左對齊的文本與左對齊的輸入框）；不一致的水平隊列；松散的垂直隊列。
解決方法：示范請看亞馬遜的注冊頁。將標簽的底線與文本控制項的底線對齊
禁忌２８：復選還是單選：不要濫用，復選可以用作“開＼關”，隨意選擇和強制性選擇，單選用於互斥。
禁忌２９：看起來可以編輯，但實際不能：傳達給用戶的信息，應該嚴格地顯示為不可編輯數據。
禁忌３０：無法理解的控制項：拙劣的標注、布局、非標准控制項；應該使用習慣用法。
第5章 搜索禁忌
禁忌３１：令人沮喪的搜索引擎：搜索選項令人費解，功能不符合要求，，使用術語，應提供惟一的搜索控制項；
禁忌３２：相互競爭的搜索控制項：轉向錯誤，一個頁面，多個搜索框。
禁忌３３：命中結果似乎相同：增加相似性則減少可用性。應該現實和強調重要數據，應該減少點擊的必要性。
禁忌３４：重復的命中結果：問題根源在於資料庫組織得糟糕，中間件沒有發現通過不同路徑建立的重復項目；伺服器端應用程序在將結果呈現給用戶之前，沒有組織返回內容；
禁忌３５：搜索盲區，丟失相關項目：有兩個不好的原因：１ 誤導人們相信所有感興趣的內容都已經找到，事實並非如此；２ 冒着失去用戶信心的風險。
解決方法：采取有效的索引和搜索方法
禁忌３６：大海撈針，不相關的命中結果：偽造的匹配分散注意力，糟糕的結果排序，
禁忌３７：命中結果的排序無意義：
禁忌３８：瘋狂的搜索行為：標准越苛刻，找到的內容越多；合法的拼寫，卻沒有找到任何結果；
禁忌３９：在結果頁沒有顯示搜索條件以致用戶如果忘記他的搜索條件，搜索就失效；
禁忌４０：沒有顯示命中結果的數量：應該與搜索條件一起顯示在頁面上方；
第三部分網站的外觀禁忌
第6章 文本與書寫禁忌
禁忌４１：文本太多，冗長的鏈接；真正的目標是可瀏覽性和清晰度。
禁忌４２：專業術語和蹩腳的說明、提示、消息、命令：原因：沒有意識到是專業術語，無法用非術語表達，期望用戶學習行話，直接暴率底層的軟體與軟體之間的通信，沒有時間，網站設計糟糕。
解決方法：了解用戶；為網站編寫辭彙表，而且由技術文檔方便些人員擔任詞典維護者和實施者；提供出錯解決方案；由用戶測試文本。
禁忌４３：稱呼網站訪問者為“用戶”：用戶是開發的時候對其稱呼，建議采用符合行業模式的稱呼，如對B2C網站稱其為“消費者”等，具體見亞馬遜
禁忌44：行內話：
禁忌45：變化的辭彙：用不同的詞語描述相同的事物：應該相同事物相同名稱，不同事物。
不同名稱。
禁忌46：不一致的格式：鏈接、按鈕行為、表單樣式等，不一致的開頭字母大小寫；
解決方法：制定或采用一個格式標准，如“Chicago Manual of Style”（Grossman, 1993）或“Yale Web Style Guide”（Lynch & Horton, 2002）http://info.med.yale.edu/caim/manula/index.html或http://www.webstyleguide.com；派專人檢查網站中所有文本；添加新文本時觀察已有文本；大寫字母開頭：句子格式首字大寫，標題格式全部大寫除冠詞a an the，連詞or and，介詞in after below；正文全部小寫。根據用途來定。
禁忌47：拼寫錯誤和無法錯誤：書寫粗心大意
第7章 鏈接外觀禁忌
禁忌48：看上去鏈接不像鏈接：用統一的CSS，確保圖片鏈接和按鈕的正確可看性；帶下劃線的藍色字體，圖形按鈕應該像按鈕；其他的圖片鏈接應該做鏈接標記；
禁忌49：不是鏈接外表勝似鏈接：帶下劃線的非鏈接文本；表面是可以點擊的圖片，實際不是；
禁忌50：按鈕可點擊范圍比看起來小：文本鏈接應該位於表格的單元格中，使表格內邊框可見，使每個鏈接完全裝入一個矩形框中；去掉鏈接標簽的下劃線，使他們看起來與正常鏈接不同；可選地，當游標位於矩形框內的任何位置時，框內顏色發生變化。
禁忌51：換行的鏈接：盡量使鏈接不換行，如果必須換行，文字應該能過隨着不同尺寸的瀏覽器窗口和用戶選擇的不同字體發生變化。必須合理通過頁面布局和默認字體尺寸努力減少所有相沖突的影響。另外也可以用行間距大於鏈接內部間距的方法分開以消除不確定性。
禁忌52：文本中隱藏鏈接ClickHere：只有滑鼠移上去才有顯示是鏈接的反應，信息不足的鏈接等。特例：術語和定義之間的鏈接，名稱對應圖示之間的鏈接，文本與文本注釋之間的鏈接，在線志乃或者幫助文件之間的交叉引用。
禁忌53：到過那里嗎？點擊過嗎？無可奉告：設計人員使用非標准的鏈接顏色，圖片鏈接沒有標記。應利用標准CSS設計網站鏈接。
第8章 圖形設計與布局禁忌
禁忌54：小字體：盡量使用px而不是pt，因為Windows和Mac就pt的解釋不一致。
解決方法：讓用戶自己調整字體大小，最小值10pt，為高解析度的顯示器設計並測試，使用腳本語言檢查用戶使用的瀏覽器，然後使用不同的CSS，在定義CSS時，預先定義的邏輯字體尺寸關鍵字：medium large x-large xx-large代替絕對的“磅”尺寸。
禁忌55：帶掩飾的文字：文字於北京對比不強烈，背景圖案花里胡哨。藝術站點除外。
解決方法：使用純色背景，淺色上使用深色比深色上使用淺色好，白色上使用黑色最為理想。
禁忌56：所有內容都居中：不要將正文居中，左對齊項目符號列表，不要接受不好的默認狀態。
禁忌57：不能引人注意的出錯消息：錯誤的位置，錯誤的標記，字體太小或者太普通。
解決方法：放在用戶正在注視的地方，放在離錯誤近的地方，使用錯誤標記如大的紅色的X，聲音提示，暫時的閃爍或者擺動。
禁忌58：淺褐色的陰影：顏色差別太小，對色盲不利，灰度顯示不利，顯示角度不利；
解決方法：不要只依賴顏色，避免使用微小色差。榜樣：芝加哥聯邦儲備銀行網站那張圖表示美國存款分布的圖，使用黑白顯示器看上去都沒問題。
禁忌59：可用看上去不可用，不可用看上去可用：控制項和鏈接看上去不可用（灰色）等
禁忌60：可怕的標簽：標簽是基於操作系統的思想設計，所以看上去應該像“標簽”，標簽應該與頁面主體不分離，與版面相連，應該指出當前標簽。最終目的是桌面GUI標簽。
附錄：經理備忘錄
經理人三個禁忌：
１ 將工作安排給不恰當的人
任務分析、導航、事務處理、表單和網站中其他交互方面的內容應該由有經驗的交互設計人員或者用戶界面設計人員設計；
網站中的文本，特別是連接標簽、說明和出錯消息，應該由技術文檔編寫人員編寫；
網站的配色方面、頁面模板、圖標和自定義圖形元素應該由平面設計人員設計；
網站，特別是動態網站，應該由熟練的Ｗｅｂ開發人員實現。
２ 最後，試着尖刻地評判某個可用的用戶界面
３ 發布之前沒有讓用戶測試
沒有留言:
張貼留言