網頁設計常見問題

提示：文章寫完後，目錄可以自動生成，如何生成可參考右邊的幫助文件

---

前言

提示：這裡可以新增本文要記錄的大概內容：
例如：大規模的可用性研究揭示了今天最常見和最具破壞性的網頁設計錯誤，它們並不令人驚訝或新奇，而是持續不斷的損害網站的可用性。

---

提示：以下是本篇文章正文內容，下面案例可供參考

一、網頁設計十大問題是什麼？

示例：自1996年以來，我們一直在總結網頁設計十大問題的列表。今年，我們完成了一個大規模的可用性研究，在美國和英國有215名參與者，看看今天的網頁設計錯誤是什麼。

在分析從小型本地企業到娛樂場所，非營利組織到全球組織的43個站點的結果後，我們確定了10個最常見和最具破壞性的網頁設計錯誤，這些錯誤對使用者造成了傷害。（通過傷害他們的使用者，這些設計缺陷絕對也會損害網站的商業指標）

這已經不是大新聞了，今天最重要的問題都不是新的或令人驚訝的。網頁設計已經走了很長的一段路，但是這些一貫的問題依然存現代設計模式和美學改變，潛在的使用者需求保持不變。使用者仍然需要查詢資訊，能夠閱讀資訊，並知道要點選的內容以及它所在的位置。

二、網頁設計常見10個問題

1.想不到內容的位置

程式碼如下（示例）：

人們使用它們找不到資訊，許多網站提供的類別名稱不完整，沒有充分或準確地描述其中的內容，其他的安排是基於公司而不是使用者對內容的想法。當網站結構不符合使用者的資訊組織方式的心理模型（mental models）時，人們無法找到他們需要的東西。

讓使用者參與建立你的網站結構，一些可用性工作（如卡片分類，決策樹或可用性測試）可以在建立一個對使用者有意義的網站結構方面發揮很大的作用。

2.相互矛盾的連線和導航分類

程式碼如下（示例）：

當使用者不能清楚區分相似的導航類別或連結時，他們很難找到恰當的內容路徑。類別和連結名稱本身需要有自己的涵義，同時也應該與站點上的其他選項結合。如果多個部分或頁面可以滿足特定的資訊需求，使用者必須探索每一個路徑或努力做出最好的猜測。或者，他們可能會轉向搜尋甚至離開網站。、

BAM建築網站上的使用者希望瞭解建設專案的細節，但不確定這些資訊是否屬於關於我們，公司業務，或者公司技術，大部分是從我們的產品開始，但該部分包含了組織為客戶提供的工作型別的概述，而不是專案細節，專案資訊和案例研究是我們的技術特色。

卡片分類和可用性測試有助於避免重疊類別名稱，連結太相似的問題通常源於糟糕的內容策略。

造成這些問題的兩個可能原因是：

標籤相似：連結導致內容不同，但由於某種原因，它們有相似的標籤。如果是這樣的話，試著重新命名你的連結來區分它們。
內容區分性差：如果高度資訊相關的連結指向不同頁面，解決方案可能不是重新命名連結，而是重新組織和合並內容。

3.資訊孤島

有些站點上的資訊比較碎片化，分散在站點上，它們之間幾乎沒有連線。

當使用者發現一個沒有相關資訊的資訊孤島時，他們沒有理由認為網站的另一個區域提供了補充材料。如果使用者需要更多的資訊，他們會到競爭對手的網站或搜尋谷歌。

試圖重新訪問資訊的使用者可能最終會選擇在站點的另一個完全不同的領域，對內容的看法不同於第一次體驗。那些找出不連貫資訊的資訊，拼湊起來。無論哪種方式，他們都對網站留下了負面的印象。

從組織的角度來看，這不僅是使用者體驗的失敗，更是內容管理的噩夢：站點的某個區域的資訊可能重複、不同或甚至與其他地方的資訊相矛盾。

解決方案之一是在提供相關資訊的頁面之間新增相關連結，一個更好的解決方案是考慮為什麼資訊分散在整個網站，挑選適當的時候，並選擇最佳位置。站點的其他區域可以引用關於該主題內容的位置，而不是複製資訊。

4.重複連結

即使使用者已經知道他們所需要資訊在網站中的位置，但他們依然可能會遭受意外或者漫長工作流的阻礙。

Web團隊經常會問，要獲取內容需要多少點選。沒有確切的數字（no magic number）， 點選質量的重要性要遠遠大於其數量。當使用者在點選頁面時應該更接近資訊目標，使用者在選擇他們想到東西時需要重複的點選，這會一次又一次的激怒客戶，並讓他們進行了不必要的努力。

團隊構建頁面有時候會閉門造車，從而沒有考慮到建立內容的流程。建立新頁面時，要考慮使用者如何到達那裡並思考是否還有更直接的路徑。

紐約市政府綜合網站：讓使用者感到沮喪的是當點選尋找消防站（Find a Firehouse）連結時，只能在下一個頁面中再點選一次拼寫都不一樣的連結。

這種偏見也恰好說明了人們為什麼忠誠於特定的產品、服務、網站或其他工具。我們會冒險使用其他可能更好用的方法，也可能會繼續使用已經嘗試過並且靠得住的工具。

5.重複連結

人們想要了解價格、訂購費用、服務費用以及流程開始之前或之後的額外費用，在一些網站中使用者進行復雜的操作只為了尋找基本的資訊，例如：他們不得不嘗試在AARP網站上購買會員 ，這樣才能查明會員費用，使用者應該要在進行復雜操作之前就能找到到這些資訊。

6.在小型網站中擱淺使用者

為部分或者特殊內容單獨建立的網頁、次級頁面需要謹慎的處理這些網站上的使用者。在我們的許多研究中，當參與者沒有主動的跳轉到了一個新的站點或者子站點，然後努力的想要回到父站點，但是該站點並沒有提供返回選項。

有些人能夠通過多次使用瀏覽器的“後退”按鈕或重新輸入網站的網址來導航到父站點，但是許多人甚至沒有注意到他們已經切換了站點（因為父站點和子站點的外觀和感覺相似） 並且很疑惑為什麼他們以前使用的導航消失了。

在建立一個單獨的子網站之前需要再三考慮，確保使用者可以根據需要輕鬆導航回到父站點。

英國紅十字會主站（www.redcross.org.uk – 上圖）及其培訓網站（英國（www.redcrossfirstaidtraining.co.uk -下圖））看起來非常相似，使用相同的LOGO連結到每個網站各自的主頁 ，以及相同的第一個導航類別（我們做什麼（What We Do））。尋找急救課程的使用者被引導到了培訓網站，並在試圖返回主站點時迷失方向。

7.糟糕的搜尋結果

當使用者確切地知道他們在尋找什麼的時候，使用者會選擇搜尋作為最後的手段。在任何情況下，站點都需要通過提供強大的搜尋結果來支援使用者。舉例的URLhttp:www.2hzz.com

不幸的是，網站搜尋功能仍然是許多網站的主要弱點，有些站點的搜尋結果與使用者的查詢不匹配。此外，有些搜尋結果展現的只是網站的一部分內容而已，不會清楚的向使用者展示所有的搜尋內容。

搜尋結果名稱不全或者附有無用的摘要，會讓使用者不由的猜測連結背後的內容。散佈在網站搜尋結果中的廣告也會讓使用者感到訝異，這些廣告會讓他們頭也不回的離開網站。

定期檢視搜尋日誌，瞭解更多有關使用者的搜尋行為和搜尋引擎成功與失敗的資訊。使用網站內容標籤和網站搜尋工具的功能，如“最佳匹配”，會搜尋出針對特定查詢的最適合的結果。

8.不完美的過濾器和功能模組

功能模組和過濾器通常能提高使用者體驗，利用它們，使用者可以將搜尋範圍縮小到所需的資源、產品或內容。然而，簡單地新增功能模組和過濾器並不能保證得到更好的可用性，這些工具需要支援真正的使用者和真正的使用者需求。

功能模組和過濾器定義了使用者的搜尋範圍，不同的篩選條件在不同地方也能給使用者提供不同的幫助。

假如：專門關注上星期二 ”關於可持續性” PPT簡報的員工，可以用文件型別和日期來縮小搜尋範圍，也可以通過搜尋主題來找到內容。一個電子商務網站可能希望買鞋子的客戶通過鞋跟高度來縮小購買範圍，而購買外套的客戶則希望通過衣服特定的保暖等級，來縮小自己的搜尋範圍。

當網站嘗試採用幾乎一刀切的方法時，網站所使用的“分面導航”（facets）和過濾器就會存在缺陷。相同的標準和特性可能不適合所有的內容型別，要謹慎地將使用者的選擇限制為二選一或者接近二選一。

購買傢俱的人可能在找藍色的椅子，或者他們在找藍色以外任何顏色的椅子（個人理解：前者是目標明確，我就要藍色的椅子；後者是我想要椅子，但是沒想好顏色，同時我不喜歡藍色），這兩個需求都應該得到支援。

給內容打的標籤必須正確且可靠，這樣使用者搜尋時才能得到相關的結果。例如：在美國退休人員協會網上，使用者在搜尋雞肉食譜時會感到很困惑，10個搜尋結果的前6個沒一個食譜裡有用到雞肉。

Maplin.com：使用者無法輕易的找到價格低於50£的藍芽音響，使用者沒有辦法通過網站的過濾器來搜尋符合他們價格要求的商品。相反，他們不得不通過幾個價格區間的選項進行查詢。使用者必須一次只選擇一個價格區間（例如40£-50£和30£-40£），然後記住每個區間裡他們想要的商品。

9.不完美的過濾器和功能模組

眉目不清的資訊會讓使用者難以找到他們需要的資訊，密集的“文字牆”讓發現感興趣的資訊變得困難，資訊量過載的頁面充滿了爭奪使用者注意力的內容。

請記住：使用者習慣掃視網頁，而不是閱讀網頁，你可以通過編排網頁內容，讓使用者能輕鬆的獲取他們感興趣的的資訊——使用簡短的句子和段落、專案列表、標題和加粗的關鍵字。

10.不完美的過濾器和功能模組

多年來，我們的可用性研究表明，使用者往往會忽略或無視長得像廣告或者被放置在通常是放置廣告的頁面位置的內容。這個問題依然存在，當內容與實際廣告一起列出時，情況就更糟了。

網站的設計師有時會認為，將更多的設計元素，如：邊框、背景色或圖形新增到連結上能讓連結脫穎而出，但結果通常是相反的：在連結周圍的設計越是奇特，使用者越是會誤認為它是一個廣告。

Pitfield London在網頁右邊的選單資訊裡放有營業時間和連結，在下面放了一張咖啡杯的動態圖和一些前往其他網站的廣告圖。由於這些廣告的位置和顯示的樣式，導致使用者很難在這個頁面上找到咖啡選單。這個網站還用了相似的設計畫了張banner，用來引導使用者前往Pitfield London。

該處使用的url網路請求的資料。

---

總結

提示：這裡對文章進行總結：
例如：我們可以放心地假設，沒有人會著手建立一個設計糟糕的網站。如果這些問題多年以來都是眾所周知的，那麼它們為什麼會持續存在呢?這個問題的潛在答案很多，可能會填滿一本書。其中的一些錯誤可能反映了一個更深層次的、具體到組織的UX戰略失敗。

例如：

網站資訊層次結構的問題可以與組織結構或公司的內部政治聯絡起來。
不同的部門在不瞭解對方的情況下建立內容，也沒有遵循總體的內容策略，這時就會產生問題。
較差的搜尋結果可能是因為內容管理系統較差，內容標記有缺陷或缺失，或者搜尋工具不佳。
這些問題背後的原因並不比解決這些問題重要，通過在網站開發過程中的使用者研究和可用性測試，並關注研究結果，可以很容易地識別上面列出的許多錯誤（如果不是全部的話）。

網站永遠不會是完美的，沒有網站是完美的。總有一個表格欄位需要修改，還有一個內容需要編輯，還有一個導航類別需要確定，但是知道需要解決的問題對於朝著正確的方向前進是至關重要的。

在進行使用者研究時，要堅持以前的發現。當設計偏好在5年後改變時，那些舊的發現可能會使你避免在第二個、第三次或第四次中犯同樣的錯誤。

名詞解釋：

分面導航（facets/faceted navigation）：也稱多維度導航，是分析一系列的內容然後根據條件把不相關的內容排除掉，留下我們想要的內容。

（譯者注：a.具體想了解的話可以點選這裡；b.文章裡用的是facets，但作者提供的連結裡用的是faceted navigation，所以兩者應該是指同一個東西）。