當(dāng)代網(wǎng)站10大最常見和最具破壞力的錯(cuò)誤設(shè)計(jì)

0 評(píng)論 8241 瀏覽 22 收藏 17 分鐘

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

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

那么你的網(wǎng)站在設(shè)計(jì)中犯了哪些錯(cuò)誤?

1. 內(nèi)容位置不合預(yù)期

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

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

1

(圖1)網(wǎng)站ATT.com:用戶原本期望點(diǎn)擊“Smartphones”后看到買賣舊手機(jī)的信息,但是該網(wǎng)站卻把它放到了“Existing Customer”下。

2. 鏈接之間/導(dǎo)航各選項(xiàng)之間邊界模糊

用戶一旦分不清兩個(gè)相似的鏈接或?qū)Ш竭x項(xiàng),將難以找到獲取信息的最佳路徑。各鏈接/各導(dǎo)航選項(xiàng)之間、各鏈接/各導(dǎo)航選項(xiàng)與網(wǎng)站其他鏈接/導(dǎo)航選項(xiàng)之間要定義準(zhǔn)確、邊界清晰。倘若有多個(gè)模塊或頁面都在介紹同一則信息,為了驗(yàn)證它們的異同,用戶就得一個(gè)一個(gè)確認(rèn),或費(fèi)力猜測(cè)哪個(gè)才是用起來最方便的。再不然,用戶會(huì)直接使用搜索功能,或者干脆放棄你的網(wǎng)站。

2

(圖2)網(wǎng)站BAM Construction:想了解建筑項(xiàng)目細(xì)節(jié)的用戶無法判斷該點(diǎn)擊“Who We Are”、“What We Do”、還是“How We Do It”。很多用戶選擇了“What We Do”,然而頁面打開卻發(fā)現(xiàn)是公司服務(wù)類型的簡(jiǎn)介。建筑項(xiàng)目的細(xì)節(jié)信息被放到了“How We Do It”里。

卡片分類和可用性測(cè)試可以幫助設(shè)計(jì)師避免這一問題。各鏈接語義邊界模糊,罪魁禍?zhǔn)资莾?nèi)容策略的失敗。原因可能有二:

  1. 鏈接命名不當(dāng)。不同的鏈接應(yīng)引導(dǎo)用戶查看不同的內(nèi)容,但出于某些原因,有些鏈接使用了語義相似的字眼。這種情況下,我們只需對(duì)有問題的鏈接進(jìn)行重命名、以作徹底區(qū)分。
  2. 內(nèi)容區(qū)分失敗。如果多個(gè)鏈接打開的不同頁面在內(nèi)容上有強(qiáng)關(guān)聯(lián)、且信息重疊,我們需要對(duì)這些內(nèi)容進(jìn)行重組,以突出各個(gè)頁面的內(nèi)容重點(diǎn)。

3. 信息孤島

有些網(wǎng)站只零散著幾條信息,且信息之間沒什么關(guān)聯(lián)。

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

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

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

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

4. 點(diǎn)擊次數(shù)過多

即使用戶可以明確目標(biāo)信息的位置,體驗(yàn)也仍會(huì)被意外出現(xiàn)或冗長(zhǎng)的操作中斷。

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

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

3

4

(圖3)&(圖4)網(wǎng)站NYC.gov:用戶點(diǎn)擊“Find a Firehouse”后,發(fā)現(xiàn)又要點(diǎn)擊一次僅在拼寫上有大小寫差異的“Find a fire house”,頓時(shí)萬分無奈。

5. 價(jià)格隱藏

在決定為某事物買單之前,用戶需要了解相關(guān)價(jià)格、訂閱費(fèi)、便利費(fèi)、附加費(fèi)等。43個(gè)研究對(duì)象中有兩三家網(wǎng)站價(jià)格信息獲取路徑太過復(fù)雜。比如,要在AARP的網(wǎng)站查到會(huì)費(fèi)價(jià)目,須得完成好幾步不必要的會(huì)員購買流程。請(qǐng)記住,在執(zhí)行復(fù)雜操作流程前,先讓用戶了解到基本信息。

6. 用戶被困子級(jí)頁面

要為特殊內(nèi)容設(shè)計(jì)單獨(dú)頁面或子級(jí)頁面的網(wǎng)站需小心,別把你的用戶困在其中。215位被訪用戶中有很多人表示都曾有這樣的糟糕體驗(yàn):莫名進(jìn)入新頁面,且找不到返回主站的鏈接。他們中的有些會(huì)通過點(diǎn)擊瀏覽器自帶的返回鍵、或重新輸入網(wǎng)址,以返回主站。但也有相當(dāng)一部分人表示根本就沒有注意到自己是怎么來到新頁面的(因?yàn)橹黜摵妥蛹?jí)頁面長(zhǎng)得太像),并一直納悶剛才的導(dǎo)航怎么不見了。

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

5

6

(圖5)&(圖6)英國紅十字會(huì)網(wǎng)站:其主頁首屏(www.redcross.org.uk)和子級(jí)頁尾屏(www.redcrossfirstaidtraining.co.uk)十分相似:一樣的LOGO,一樣的導(dǎo)航選項(xiàng)(What We Do)。想查找first aid course的用戶被帶到子級(jí)頁后瞬間迷茫,不知如何返回。

7. 搜索結(jié)果不理想

萬不得已時(shí),用戶會(huì)使用搜索功能。當(dāng)目標(biāo)非常明確時(shí),用戶也會(huì)先行搜索。無論是哪種場(chǎng)景,我們的網(wǎng)站都應(yīng)該確保為用戶提供強(qiáng)大的搜索結(jié)果。

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

請(qǐng)密切關(guān)注用戶的搜索記錄,進(jìn)一步了解用戶行為,挖掘搜索功能的不足。通過對(duì)搜索結(jié)果打標(biāo),如“最佳匹配搜索結(jié)果”,提高搜索精準(zhǔn)度。

8. 過濾與分面導(dǎo)航錯(cuò)誤

過濾(filters)和分面導(dǎo)航(faceted navigation)通常有助于提高用戶體驗(yàn)。它們幫助用戶排除干擾元素,找到準(zhǔn)確的搜素結(jié)果。然而,隨便給網(wǎng)站加上這兩種工具的話,并不能優(yōu)化用戶體驗(yàn)。這兩種工具需幫助真正用戶滿足其真正需求。

圓梓解說:過濾是指在一定篩選條件下,把不相關(guān)的內(nèi)容排除,濾出用戶想要的結(jié)果;過濾是單維度的。分面導(dǎo)航和過濾的本質(zhì)思想一致,可以看作是多維度的過濾,靈活性更強(qiáng)、搜索結(jié)果更精準(zhǔn);分面導(dǎo)航在電商網(wǎng)站中尤為常見。

過濾和分面導(dǎo)航為用戶限定了篩選結(jié)果范圍,不同的篩選條件可滿足用戶不同的搜索需求。比如企業(yè)員工可以通過刪選文件類型、日期或者主題來搜索上一周的PPT;電商網(wǎng)站的用戶可以通過鞋跟高度挑到喜歡的鞋子,也可以根據(jù)保暖級(jí)別選出最中意的外套。

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

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

7
(圖7)網(wǎng)站Maplin.com:用戶想在該網(wǎng)站搜索50英鎊以下的藍(lán)牙音箱,卻發(fā)現(xiàn)左下方的篩選條件不能幫自己查詢到匹配結(jié)果,只好每個(gè)價(jià)格范圍都點(diǎn)擊一下,然后自己在心里計(jì)算哪些商品適合自己。

9. 用戶被迫閱讀大量信息

網(wǎng)站信息組織不當(dāng),容易造成用戶迷失。大量的文本信息既枯燥又增加了閱讀難度。同時(shí)也挑戰(zhàn)著用戶耐性。

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

8
(圖8)網(wǎng)站The Headphone.com:Shure SRH440 Studio頭戴式耳機(jī)詳情描述太過冗長(zhǎng),大篇幅的展示讓用戶很難抓取到關(guān)鍵信息,無法迅速判斷該耳機(jī)與其他耳機(jī)的區(qū)別。

10. 鏈接隱藏

我們的可用性研究常年發(fā)現(xiàn),用戶經(jīng)常忽略與廣告長(zhǎng)得相似、或被放在廣告位的鏈接內(nèi)容。列在廣告周圍的鏈接更是被用戶“打入冷宮”。

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

9
(圖9)網(wǎng)站Pitfield London:該頁展示了Pitfield Cafe的營業(yè)時(shí)間,并在右側(cè)設(shè)計(jì)了菜單鏈接,鏈接下面是一杯熱騰騰的咖啡;咖啡的下面是一列廣告位。這種設(shè)計(jì)很難讓用戶找到菜單鏈接。

再接再厲

可以確定的是,沒有哪位設(shè)計(jì)師愿意產(chǎn)出糟糕的網(wǎng)站。既然這些錯(cuò)誤設(shè)計(jì)已存在多年,為何它們的設(shè)計(jì)師不愿意“自我迭代”呢?這背后的原因大概能聊上三天三夜。這10條錯(cuò)誤設(shè)計(jì)里,有幾條反映的是構(gòu)架失敗的問題。比如:

  • 網(wǎng)站信息結(jié)構(gòu)出錯(cuò),可能與公司組織結(jié)構(gòu)和內(nèi)部政策有關(guān)。
  • 網(wǎng)站內(nèi)容出錯(cuò),可能由公司部門之間缺乏溝通、未遵循總體內(nèi)容策略造成。
  • 糟糕的搜索結(jié)果,可能源于內(nèi)容管理系統(tǒng)混亂,內(nèi)容打標(biāo)有誤、漏打,搜索工具不完善。

深究這些錯(cuò)誤設(shè)計(jì)的原因,遠(yuǎn)不如修正錯(cuò)誤重要。只要在網(wǎng)站設(shè)計(jì)過程中多做些用戶研究和可用性測(cè)試,多關(guān)注研究結(jié)果,以上多數(shù)錯(cuò)誤都可以輕松避免。

沒有完美的網(wǎng)站。每一個(gè)網(wǎng)站都會(huì)有這樣那樣的問題:該表單字段有問題,該段文本編輯不當(dāng),該導(dǎo)航還缺一個(gè)選項(xiàng)等等。只要能發(fā)現(xiàn)問題、及時(shí)修改即可。

另外,做用戶研究時(shí)不要忽視了之前的研究報(bào)告。隨著日后設(shè)計(jì)偏好的變化,這些歷史報(bào)告可以反復(fù)提醒你避免再次犯錯(cuò)。

 

英文原文:Amy Schade,?Yunnuo Cheng, and?Samyukta Sherugar, Top 10 Enduring Web-Design Mistakes.

原文地址:https://www.nngroup.com/articles/top-10-enduring/

翻譯:圓梓

本文由 @點(diǎn)融設(shè)計(jì)中心?原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 目前還沒評(píng)論,等你發(fā)揮!