網頁設計常見問題

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

文章目錄

• • 網頁設計常見問題
• 前言
• 一、網頁設計十大問題是什麼？
• 二、網頁設計常見10個問題
• • 1.想不到内容的位置
  • 2.互相沖突的連接配接和導航分類
  • 3.資訊孤島
  • 4.重複連結
  • 5.重複連結
  • 6.在小型網站中擱淺使用者
  • 7.糟糕的搜尋結果
  • 8.不完美的過濾器和功能子產品
  • 9.不完美的過濾器和功能子產品
  • 10.不完美的過濾器和功能子產品
• 總結

前言

提示：這裡可以添加本文要記錄的大概内容：

例如：大規模的可用性研究揭示了今天最常見和最具破壞性的網頁設計錯誤，它們并不令人驚訝或新奇，而是持續不斷的損害網站的可用性。

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

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

示例：自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，是以兩者應該是指同一個東西）。