網(wǎng)站建設中網(wǎng)站10大錯誤設計發(fā)布者：本站     時(shí)間：2022-03-17 15:03:02

早在1996年，我們就匯總了網(wǎng)站的10種錯誤設計。今年，我們訪(fǎng)問(wèn)了215位英美用戶(hù)，就當代網(wǎng)站存在的錯誤設計進(jìn)行了新一輪大規?？捎眯匝芯?。從小型的地方性商業(yè)網(wǎng)站、娛樂(lè )網(wǎng)站，到非盈利性網(wǎng)站，再到國際組織機構的官方網(wǎng)站，通過(guò)對43個(gè)網(wǎng)站的分析，總結了當代網(wǎng)站10大最常見(jiàn)和最具破壞力的錯誤設計。這些錯誤設計，不但傷害了用戶(hù)，也對網(wǎng)站的業(yè)務(wù)指標造成了負面影響。

它們都是新出現的嗎？不，這10大錯誤設計都是大家“司空見(jiàn)慣”的。網(wǎng)站設計這些年可謂發(fā)展迅速，但這些錯誤設計仍長(cháng)期存在。盡管當代設計模式和美學(xué)在不斷變化，不過(guò)用戶(hù)的本質(zhì)需求變化不大。用戶(hù)仍需在網(wǎng)站中找到想要的信息，讀懂網(wǎng)站結構，知道要點(diǎn)擊什么以及點(diǎn)擊后將會(huì )去哪兒。

那么你的網(wǎng)站在設計中犯了哪些錯誤？

1. 內容位置不合預期
不能被用戶(hù)發(fā)現的信息沒(méi)有使用價(jià)值。很多網(wǎng)站，導航的類(lèi)目字段表達不詳、亦或點(diǎn)擊后所呈現內容與該類(lèi)目關(guān)聯(lián)不大。還有一些網(wǎng)站，忽視了用戶(hù)的想法，直接按公司自己的思路去構架信息。如果網(wǎng)站的內容結構與用戶(hù)的心理模型南轅北轍，用戶(hù)就找不到想要的信息。

 讓用戶(hù)參與到網(wǎng)站設計中來(lái)。做一些簡(jiǎn)單的可用性研究幫助你的網(wǎng)站被用戶(hù)讀懂，比如卡片分類(lèi)、樹(shù)形測試、可用性測試。

網(wǎng)站10大錯誤設計

（圖1）網(wǎng)站ATT.COM：用戶(hù)原本期望點(diǎn)擊“SMARTPHONES”后看到買(mǎi)賣(mài)舊手機的信息，但是該網(wǎng)站卻把它放到了“EXISTING CUSTOMER”下。
2. 鏈接之間/導航各選項之間邊界模糊
用戶(hù)一旦分不清兩個(gè)相似的鏈接或導航選項，將難以找到獲取信息的最佳路徑。各鏈接/各導航選項之間、各鏈接/各導航選項與網(wǎng)站其他鏈接/導航選項之間要定義準確、邊界清晰。倘若有多個(gè)模塊或頁(yè)面都在介紹同一則信息，為了驗證它們的異同，用戶(hù)就得一個(gè)一個(gè)確認，或費力猜測哪個(gè)才是用起來(lái)最方便的。再不然，用戶(hù)會(huì )直接使用搜索功能，或者干脆放棄你的網(wǎng)站。

網(wǎng)站10大錯誤設計

（圖2）網(wǎng)站BAM CONSTRUCTION：想了解建筑項目細節的用戶(hù)無(wú)法判斷該點(diǎn)擊“WHO WE ARE”、“WHAT WE DO”、還是“HOW WE DO IT”。很多用戶(hù)選擇了“WHAT WE DO”，然而頁(yè)面打開(kāi)卻發(fā)現是公司服務(wù)類(lèi)型的簡(jiǎn)介。建筑項目的細節信息被放到了“HOW WE DO IT”里。
卡片分類(lèi)和可用性測試可以幫助設計師避免這一問(wèn)題。各鏈接語(yǔ)義邊界模糊，罪魁禍首是內容策略的失敗。原因可能有二：

鏈接命名不當。不同的鏈接應引導用戶(hù)查看不同的內容，但出于某些原因，有些鏈接使用了語(yǔ)義相似的字眼。這種情況下，我們只需對有問(wèn)題的鏈接進(jìn)行重命名、以作徹底區分。
內容區分失敗。如果多個(gè)鏈接打開(kāi)的不同頁(yè)面在內容上有強關(guān)聯(lián)、且信息重疊，我們需要對這些內容進(jìn)行重組，以突出各個(gè)頁(yè)面的內容重點(diǎn)。
3. 信息孤島
有些網(wǎng)站只零散著(zhù)幾條信息，且信息之間沒(méi)什么關(guān)聯(lián)。

有的用戶(hù)看到這種“孤獨”且無(wú)法點(diǎn)擊的信息，會(huì )覺(jué)得網(wǎng)站其他頁(yè)面的內容也一樣淺薄。找不到額外有用的信息，他們最終會(huì )流失到競爭對手那兒、或直接自行Google查詢(xún)。

也有用戶(hù)試著(zhù)重新訪(fǎng)問(wèn)，結果卻發(fā)現信息出現在預期之外的地方，而且與第一次看到的內容樣式完全不同。還有用戶(hù)的確找到了這些“孤獨”的信息，卻得費勁心思把它們拼湊在一起。不管怎樣，這都給用戶(hù)留下了極差的印象。

從公司角度看，這種設計方式不但造成了糟糕的用戶(hù)體驗，也暴露了其失敗的內容管理策略——某一模塊信息重復，不同模塊本該相同的信息卻彼此不同或矛盾。

一種解決方案是為內容相關(guān)的不同頁(yè)面提供相關(guān)鏈接。還有一種更好的方案，就是反思自己的網(wǎng)站信息為何都如此“孤獨”，然后重新整合構架、并在最合適的地方提供鏈接。與其不斷重復相同的信息，不如在網(wǎng)站其他頁(yè)面加上鏈接，鏈到信息首次出現的位置。

4. 點(diǎn)擊次數過(guò)多
即使用戶(hù)可以明確目標信息的位置，體驗也仍會(huì )被意外出現或冗長(cháng)的操作中斷。

網(wǎng)站設計團隊經(jīng)常會(huì )念叨用戶(hù)在獲取目標內容前應該點(diǎn)擊幾次。其實(shí)沒(méi)有“魔法數字”——點(diǎn)擊的質(zhì)量遠比數量重要。原則上，用戶(hù)每點(diǎn)擊一次，就應該離目標內容近一點(diǎn)。如果反復讓用戶(hù)點(diǎn)擊，只會(huì )激怒他們、浪費他們的精力。

設計師有時(shí)忘記規劃用戶(hù)查找內容的路徑，導致網(wǎng)站頁(yè)面之間缺乏關(guān)聯(lián)。所以，在正式設計前請先分析透徹用戶(hù)的操作路徑，想想有沒(méi)有更簡(jiǎn)短的方案。 

網(wǎng)站10大錯誤設計

網(wǎng)站10大錯誤設計

（圖3）&（圖4）網(wǎng)站NYC.GOV：用戶(hù)點(diǎn)擊“FIND A FIREHOUSE”后，發(fā)現又要點(diǎn)擊一次僅在拼寫(xiě)上有大小寫(xiě)差異的“FIND A FIRE HOUSE”，頓時(shí)萬(wàn)分無(wú)奈。
5. 價(jià)格隱藏
在決定為某事物買(mǎi)單之前，用戶(hù)需要了解相關(guān)價(jià)格、訂閱費、便利費、附加費等。43個(gè)研究對象中有兩三家網(wǎng)站價(jià)格信息獲取路徑太過(guò)復雜。比如，要在A(yíng)ARP的網(wǎng)站查到會(huì )費價(jià)目，須得完成好幾步不必要的會(huì )員購買(mǎi)流程。請記住，在執行復雜操作流程前，先讓用戶(hù)了解到基本信息。

6. 用戶(hù)被困子級頁(yè)面
要為特殊內容設計單獨頁(yè)面或子級頁(yè)面的網(wǎng)站需小心，別把你的用戶(hù)困在其中。215位被訪(fǎng)用戶(hù)中有很多人表示都曾有這樣的糟糕體驗：莫名進(jìn)入新頁(yè)面，且找不到返回主站的鏈接。他們中的有些會(huì )通過(guò)點(diǎn)擊瀏覽器自帶的返回鍵、或重新輸入網(wǎng)址，以返回主站。但也有相當一部分人表示根本就沒(méi)有注意到自己是怎么來(lái)到新頁(yè)面的（因為主頁(yè)和子級頁(yè)面長(cháng)得太像），并一直納悶剛才的導航怎么不見(jiàn)了。

因此，設計子級頁(yè)面時(shí)請仔細斟酌。如有此業(yè)務(wù)需求，請為用戶(hù)提供明顯的返回鏈接。 

網(wǎng)站10大錯誤設計

網(wǎng)站10大錯誤設計

（圖5）&（圖6）英國紅十字會(huì )網(wǎng)站：其主頁(yè)首屏(WWW.REDCROSS.ORG.UK)和子級頁(yè)尾屏(WWW.REDCROSSFIRSTAIDTRAINING.CO.UK)十分相似：一樣的LOGO，一樣的導航選項(WHAT WE DO)。想查找FIRST AID COURSE的用戶(hù)被帶到子級頁(yè)后瞬間迷茫，不知如何返回。
7. 搜索結果不理想
萬(wàn)不得已時(shí)，用戶(hù)會(huì )使用搜索功能。當目標非常明確時(shí)，用戶(hù)也會(huì )先行搜索。無(wú)論是哪種場(chǎng)景，我們的網(wǎng)站都應該確保為用戶(hù)提供強大的搜索結果。

可惜，對許多網(wǎng)站來(lái)說(shuō)搜索功能是它們的致命缺陷。有的網(wǎng)站，搜索結果與搜索詞不匹配；有的網(wǎng)站，搜的結果隱晦不詳。有的搜索結果不但不符合語(yǔ)法句法規范，提供的描述也毫無(wú)利用價(jià)值，不禁讓用戶(hù)困惑怎么搜出這么不相干的信息。有的搜索結果還帶有外部廣告，直接把用戶(hù)導流到其他網(wǎng)站去了。

請密切關(guān)注用戶(hù)的搜索記錄，進(jìn)一步了解用戶(hù)行為，挖掘搜索功能的不足。通過(guò)對搜索結果打標，如“最佳匹配搜索結果”，提高搜索精準度。

8. 過(guò)濾與分面導航錯誤
過(guò)濾（filters）和分面導航（faceted navigation）通常有助于提高用戶(hù)體驗。它們幫助用戶(hù)排除干擾元素，找到準確的搜素結果。然而，隨便給網(wǎng)站加上這兩種工具的話(huà)，并不能優(yōu)化用戶(hù)體驗。這兩種工具需幫助真正用戶(hù)滿(mǎn)足其真正需求。

「圓梓解說(shuō)：過(guò)濾是指在一定篩選條件下，把不相關(guān)的內容排除，濾出用戶(hù)想要的結果；過(guò)濾是單維度的。分面導航和過(guò)濾的本質(zhì)思想一致，可以看作是多維度的過(guò)濾，靈活性更強、搜索結果更精準；分面導航在電商網(wǎng)站中尤為常見(jiàn)?！?br /> 過(guò)濾和分面導航為用戶(hù)限定了篩選結果范圍，不同的篩選條件可滿(mǎn)足用戶(hù)不同的搜索需求。比如企業(yè)員工可以通過(guò)刪選文件類(lèi)型、日期或者主題來(lái)搜索上一周的PPT；電商網(wǎng)站的用戶(hù)可以通過(guò)鞋跟高度挑到喜歡的鞋子，也可以根據保暖級別選出最中意的外套。

有的網(wǎng)站把過(guò)濾和分類(lèi)導航看成是全能的，幻想自己可以“包治百病”。結果其篩選條件并未關(guān)聯(lián)全部?jì)热蓊?lèi)型，導致結果不準。同時(shí)，我們也要注意切不可把用戶(hù)推入“非此即彼”的僵局。家具用戶(hù)可能想選藍色椅子，也可能要挑藍色以外的其他顏色的椅子。兩種場(chǎng)景都要考慮到。

電商網(wǎng)站的商品必須被準確打標，以保證篩選結果的高度相關(guān)。比如，在A(yíng)ARP網(wǎng)站搜索“雞肉烹飪食譜”，排行前10的結果里竟然有6個(gè)都和雞肉無(wú)關(guān)。 

網(wǎng)站10大錯誤設計

（圖7）網(wǎng)站MAPLIN.COM：用戶(hù)想在該網(wǎng)站搜索50英鎊以下的藍牙音箱，卻發(fā)現左下方的篩選條件不能幫自己查詢(xún)到匹配結果，只好每個(gè)價(jià)格范圍都點(diǎn)擊一下，然后自己在心里計算哪些商品適合自己。
9. 用戶(hù)被迫閱讀大量信息
網(wǎng)站信息組織不當，容易造成用戶(hù)迷失。大量的文本信息既枯燥又增加了閱讀難度。同時(shí)也挑戰著(zhù)用戶(hù)耐性。

請記住，網(wǎng)站用戶(hù)習慣于瀏覽、而不是精讀。使用簡(jiǎn)短的句子、段落、項目列表、標題及粗體關(guān)鍵詞，確保用戶(hù)輕松抓取關(guān)鍵信息。 

網(wǎng)站10大錯誤設計

（圖8）網(wǎng)站THE HEADPHONE.COM：SHURE SRH440 STUDIO頭戴式耳機詳情描述太過(guò)冗長(cháng)，大篇幅的展示讓用戶(hù)很難抓取到關(guān)鍵信息，無(wú)法迅速判斷該耳機與其他耳機的區別。
10. 鏈接隱藏
我們的可用性研究常年發(fā)現，用戶(hù)經(jīng)常忽略與廣告長(cháng)得相似、或被放在廣告位的鏈接內容。列在廣告周?chē)逆溄痈潜挥脩?hù)“打入冷宮”。

設計師有時(shí)會(huì )通過(guò)增加一些設計元素，比如邊框、背景色或圖像等，使之更突出?？上氯缭高`，用戶(hù)依舊不買(mǎi)賬。鏈接內容設計得越花哨，越容易被用戶(hù)當成廣告。

網(wǎng)站10大錯誤設計

（圖9）網(wǎng)站PITFIELD LONDON：該頁(yè)展示了PITFIELD CAFE的營(yíng)業(yè)時(shí)間，并在右側設計了菜單鏈接，鏈接下面是一杯熱騰騰的咖啡；咖啡的下面是一列廣告位。這種設計很難讓用戶(hù)找到菜單鏈接。
再接再厲
可以確定的是，沒(méi)有哪位設計師愿意產(chǎn)出糟糕的網(wǎng)站。既然這些錯誤設計已存在多年，為何它們的設計師不愿意“自我迭代”呢？這背后的原因大概能聊上三天三夜。這10條錯誤設計里，有幾條反映的是構架失敗的問(wèn)題。比如：

網(wǎng)站信息結構出錯，可能與公司組織結構和內部政策有關(guān)。
網(wǎng)站內容出錯，可能由公司部門(mén)之間缺乏溝通、未遵循總體內容策略造成。
糟糕的搜索結果，可能源于內容管理系統混亂，內容打標有誤、漏打，搜索工具不完善。
深究這些錯誤設計的原因，遠不如修正錯誤重要。只要在網(wǎng)站設計過(guò)程中多做些用戶(hù)研究和可用性測試，多關(guān)注研究結果，以上多數錯誤都可以輕松避免。