網(wǎng)頁(yè)設(shè)計(jì)常見(jiàn)10大問(wèn)題

1 評(píng)論 10461 瀏覽 37 收藏 18 分鐘

大規(guī)模的可用性研究揭示了今天最常見(jiàn)和最具破壞性的網(wǎng)頁(yè)設(shè)計(jì)錯(cuò)誤,它們并不令人驚訝或新奇,而是持續(xù)不斷的損害網(wǎng)站的可用性。

自1996年以來(lái),我們一直在總結(jié)網(wǎng)頁(yè)設(shè)計(jì)十大問(wèn)題的列表。今年,我們完成了一個(gè)大規(guī)模的可用性研究,在美國(guó)和英國(guó)有215名參與者,看看今天的網(wǎng)頁(yè)設(shè)計(jì)錯(cuò)誤是什么。

在分析從小型本地企業(yè)到娛樂(lè)場(chǎng)所,非營(yíng)利組織到全球組織的43個(gè)站點(diǎn)的結(jié)果后,我們確定了10個(gè)最常見(jiàn)和最具破壞性的網(wǎng)頁(yè)設(shè)計(jì)錯(cuò)誤,這些錯(cuò)誤對(duì)用戶(hù)造成了傷害。(通過(guò)傷害他們的用戶(hù),這些設(shè)計(jì)缺陷絕對(duì)也會(huì)損害網(wǎng)站的商業(yè)指標(biāo))

這已經(jīng)不是大新聞了,今天最重要的問(wèn)題都不是新的或令人驚訝的。網(wǎng)頁(yè)設(shè)計(jì)已經(jīng)走了很長(zhǎng)的一段路,但是這些一貫的問(wèn)題依然存現(xiàn)代設(shè)計(jì)模式和美學(xué)改變,潛在的用戶(hù)需求保持不變。用戶(hù)仍然需要查找信息,能夠閱讀信息,并知道要點(diǎn)擊的內(nèi)容以及它所在的位置。

1. 想不到內(nèi)容的位置

人們使用它們找不到信息,許多網(wǎng)站提供的類(lèi)別名稱(chēng)不完整,沒(méi)有充分或準(zhǔn)確地描述其中的內(nèi)容,其他的安排是基于公司而不是用戶(hù)對(duì)內(nèi)容的想法。當(dāng)網(wǎng)站結(jié)構(gòu)不符合用戶(hù)的信息組織方式的心理模型(mental models)時(shí),人們無(wú)法找到他們需要的東西。

讓用戶(hù)參與創(chuàng)建你的網(wǎng)站結(jié)構(gòu),一些可用性工作(如卡片分類(lèi),決策樹(shù)或可用性測(cè)試)可以在創(chuàng)建一個(gè)對(duì)用戶(hù)有意義的網(wǎng)站結(jié)構(gòu)方面發(fā)揮很大的作用。

ATT.com:有關(guān)舊手機(jī)交易的信息是在現(xiàn)有客戶(hù)下,但用戶(hù)在智能手機(jī)下查找。

2. 相互矛盾的連接和導(dǎo)航分類(lèi)

當(dāng)用戶(hù)不能清楚區(qū)分相似的導(dǎo)航類(lèi)別或鏈接時(shí),他們很難找到恰當(dāng)?shù)膬?nèi)容路徑。類(lèi)別和鏈接名稱(chēng)本身需要有自己的涵義,同時(shí)也應(yīng)該與站點(diǎn)上的其他選項(xiàng)結(jié)合。如果多個(gè)部分或頁(yè)面可以滿(mǎn)足特定的信息需求,用戶(hù)必須探索每一個(gè)路徑或努力做出最好的猜測(cè)。或者,他們可能會(huì)轉(zhuǎn)向搜索甚至離開(kāi)網(wǎng)站。

BAM建筑網(wǎng)站上的用戶(hù)希望了解建設(shè)項(xiàng)目的細(xì)節(jié),但不確定這些信息是否屬于關(guān)于我們,公司業(yè)務(wù),或者公司技術(shù),大部分是從我們的產(chǎn)品開(kāi)始,但該部分包含了組織為客戶(hù)提供的工作類(lèi)型的概述,而不是項(xiàng)目細(xì)節(jié),項(xiàng)目信息和案例研究是我們的技術(shù)特色。

卡片分類(lèi)和可用性測(cè)試有助于避免重疊類(lèi)別名稱(chēng),鏈接太相似的問(wèn)題通常源于糟糕的內(nèi)容策略。

造成這些問(wèn)題的兩個(gè)可能原因是:

  • 標(biāo)簽相似:鏈接導(dǎo)致內(nèi)容不同,但由于某種原因,它們有相似的標(biāo)簽。如果是這樣的話,試著重命名你的鏈接來(lái)區(qū)分它們。
  • 內(nèi)容區(qū)分性差:如果高度信息相關(guān)的鏈接指向不同頁(yè)面,解決方案可能不是重命名鏈接,而是重新組織和合并內(nèi)容。

3. 信息孤島

有些站點(diǎn)上的信息比較碎片化,分散在站點(diǎn)上,它們之間幾乎沒(méi)有連接。

當(dāng)用戶(hù)發(fā)現(xiàn)一個(gè)沒(méi)有相關(guān)信息的信息孤島時(shí),他們沒(méi)有理由認(rèn)為網(wǎng)站的另一個(gè)區(qū)域提供了補(bǔ)充材料。如果用戶(hù)需要更多的信息,他們會(huì)到競(jìng)爭(zhēng)對(duì)手的網(wǎng)站或搜索谷歌。

試圖重新訪問(wèn)信息的用戶(hù)可能最終會(huì)選擇在站點(diǎn)的另一個(gè)完全不同的領(lǐng)域,對(duì)內(nèi)容的看法不同于第一次體驗(yàn)。那些找出不連貫信息的信息,拼湊起來(lái)。無(wú)論哪種方式,他們都對(duì)網(wǎng)站留下了負(fù)面的印象。

從組織的角度來(lái)看,這不僅是用戶(hù)體驗(yàn)的失敗,更是內(nèi)容管理的噩夢(mèng):站點(diǎn)的某個(gè)區(qū)域的信息可能重復(fù)、不同或甚至與其他地方的信息相矛盾。

解決方案之一是在提供相關(guān)信息的頁(yè)面之間添加相關(guān)鏈接,一個(gè)更好的解決方案是考慮為什么信息分散在整個(gè)網(wǎng)站,挑選適當(dāng)?shù)臅r(shí)候,并選擇最佳位置。站點(diǎn)的其他區(qū)域可以引用關(guān)于該主題內(nèi)容的位置,而不是復(fù)制信息。

4. 重復(fù)鏈接

即使用戶(hù)已經(jīng)知道他們所需要信息在網(wǎng)站中的位置,但他們依然可能會(huì)遭受意外或者漫長(zhǎng)工作流的阻礙。

Web團(tuán)隊(duì)經(jīng)常會(huì)問(wèn),要獲取內(nèi)容需要多少點(diǎn)擊。沒(méi)有確切的數(shù)字(no magic number), 點(diǎn)擊質(zhì)量的重要性要遠(yuǎn)遠(yuǎn)大于其數(shù)量。當(dāng)用戶(hù)在點(diǎn)擊頁(yè)面時(shí)應(yīng)該更接近信息目標(biāo),用戶(hù)在選擇他們想到東西時(shí)需要重復(fù)的點(diǎn)擊,這會(huì)一次又一次的激怒客戶(hù),并讓他們進(jìn)行了不必要的努力。

團(tuán)隊(duì)構(gòu)建頁(yè)面有時(shí)候會(huì)閉門(mén)造車(chē),從而沒(méi)有考慮到創(chuàng)建內(nèi)容的流程。創(chuàng)建新頁(yè)面時(shí),要考慮用戶(hù)如何到達(dá)那里并思考是否還有更直接的路徑。

紐約市政府綜合網(wǎng)站:讓用戶(hù)感到沮喪的是當(dāng)點(diǎn)擊尋找消防站(Find a Firehouse)鏈接時(shí),只能在下一個(gè)頁(yè)面中再點(diǎn)擊一次拼寫(xiě)都不一樣的鏈接。

這種偏見(jiàn)也恰好說(shuō)明了人們?yōu)槭裁粗艺\(chéng)于特定的產(chǎn)品、服務(wù)、網(wǎng)站或其他工具。我們會(huì)冒險(xiǎn)使用其他可能更好用的方法,也可能會(huì)繼續(xù)使用已經(jīng)嘗試過(guò)并且靠得住的工具。

5. 隱藏費(fèi)用和價(jià)格

人們想要了解價(jià)格、訂購(gòu)費(fèi)用、服務(wù)費(fèi)用以及流程開(kāi)始之前或之后的額外費(fèi)用,在一些網(wǎng)站中用戶(hù)進(jìn)行復(fù)雜的操作只為了尋找基本的信息,例如:他們不得不嘗試在AARP網(wǎng)站上購(gòu)買(mǎi)會(huì)員 ,這樣才能查明會(huì)員費(fèi)用,用戶(hù)應(yīng)該要在進(jìn)行復(fù)雜操作之前就能找到到這些信息。

6. 在小型網(wǎng)站中擱淺用戶(hù)

為部分或者特殊內(nèi)容單獨(dú)創(chuàng)建的網(wǎng)頁(yè)、次級(jí)頁(yè)面需要謹(jǐn)慎的處理這些網(wǎng)站上的用戶(hù)。在我們的許多研究中,當(dāng)參與者沒(méi)有主動(dòng)的跳轉(zhuǎn)到了一個(gè)新的站點(diǎn)或者子站點(diǎn),然后努力的想要回到父站點(diǎn),但是該站點(diǎn)并沒(méi)有提供返回選項(xiàng)。

有些人能夠通過(guò)多次使用瀏覽器的“后退”按鈕或重新輸入網(wǎng)站的網(wǎng)址來(lái)導(dǎo)航到父站點(diǎn),但是許多人甚至沒(méi)有注意到他們已經(jīng)切換了站點(diǎn)(因?yàn)楦刚军c(diǎn)和子站點(diǎn)的外觀和感覺(jué)相似) 并且很疑惑為什么他們以前使用的導(dǎo)航消失了。

在創(chuàng)建一個(gè)單獨(dú)的子網(wǎng)站之前需要再三考慮,確保用戶(hù)可以根據(jù)需要輕松導(dǎo)航回到父站點(diǎn)。

英國(guó)紅十字會(huì)主站(www.redcross.org.uk – 上圖)及其培訓(xùn)網(wǎng)站(英國(guó)(www.redcrossfirstaidtraining.co.uk -下圖))看起來(lái)非常相似,使用相同的LOGO鏈接到每個(gè)網(wǎng)站各自的主頁(yè) ,以及相同的第一個(gè)導(dǎo)航類(lèi)別(我們做什么(What We Do))。尋找急救課程的用戶(hù)被引導(dǎo)到了培訓(xùn)網(wǎng)站,并在試圖返回主站點(diǎn)時(shí)迷失方向。

7. 糟糕的搜索結(jié)果

當(dāng)用戶(hù)確切地知道他們?cè)趯ふ沂裁吹臅r(shí)候,用戶(hù)會(huì)選擇搜索作為最后的手段。在任何情況下,站點(diǎn)都需要通過(guò)提供強(qiáng)大的搜索結(jié)果來(lái)支持用戶(hù)。

不幸的是,網(wǎng)站搜索功能仍然是許多網(wǎng)站的主要弱點(diǎn),有些站點(diǎn)的搜索結(jié)果與用戶(hù)的查詢(xún)不匹配。此外,有些搜索結(jié)果展現(xiàn)的只是網(wǎng)站的一部分內(nèi)容而已,不會(huì)清楚的向用戶(hù)展示所有的搜索內(nèi)容。

搜索結(jié)果名稱(chēng)不全或者附有無(wú)用的摘要,會(huì)讓用戶(hù)不由的猜測(cè)鏈接背后的內(nèi)容。散布在網(wǎng)站搜索結(jié)果中的廣告也會(huì)讓用戶(hù)感到訝異,這些廣告會(huì)讓他們頭也不回的離開(kāi)網(wǎng)站。

定期查看搜索日志,了解更多有關(guān)用戶(hù)的搜索行為和搜索引擎成功與失敗的信息。使用網(wǎng)站內(nèi)容標(biāo)簽和網(wǎng)站搜索工具的功能,如“最佳匹配”,會(huì)搜索出針對(duì)特定查詢(xún)的最適合的結(jié)果。

8. 不完美的過(guò)濾器和功能模塊

功能模塊和過(guò)濾器通常能提高用戶(hù)體驗(yàn),利用它們,用戶(hù)可以將搜索范圍縮小到所需的資源、產(chǎn)品或內(nèi)容。然而,簡(jiǎn)單地添加功能模塊和過(guò)濾器并不能保證得到更好的可用性,這些工具需要支持真正的用戶(hù)和真正的用戶(hù)需求。

功能模塊和過(guò)濾器定義了用戶(hù)的搜索范圍,不同的篩選條件在不同地方也能給用戶(hù)提供不同的幫助。

假如:專(zhuān)門(mén)關(guān)注上星期二 ”關(guān)于可持續(xù)性” PPT演示文稿的員工,可以用文檔類(lèi)型和日期來(lái)縮小搜索范圍,也可以通過(guò)搜索主題來(lái)找到內(nèi)容。一個(gè)電子商務(wù)網(wǎng)站可能希望買(mǎi)鞋子的客戶(hù)通過(guò)鞋跟高度來(lái)縮小購(gòu)買(mǎi)范圍,而購(gòu)買(mǎi)外套的客戶(hù)則希望通過(guò)衣服特定的保暖等級(jí),來(lái)縮小自己的搜索范圍。

當(dāng)網(wǎng)站嘗試采用幾乎一刀切的方法時(shí),網(wǎng)站所使用的“分面導(dǎo)航”(facets)和過(guò)濾器就會(huì)存在缺陷。相同的標(biāo)準(zhǔn)和特性可能不適合所有的內(nèi)容類(lèi)型,要謹(jǐn)慎地將用戶(hù)的選擇限制為二選一或者接近二選一。

購(gòu)買(mǎi)家具的人可能在找藍(lán)色的椅子,或者他們?cè)谡宜{(lán)色以外任何顏色的椅子(個(gè)人理解:前者是目標(biāo)明確,我就要藍(lán)色的椅子;后者是我想要椅子,但是沒(méi)想好顏色,同時(shí)我不喜歡藍(lán)色),這兩個(gè)需求都應(yīng)該得到支持。

給內(nèi)容打的標(biāo)簽必須正確且可靠,這樣用戶(hù)搜索時(shí)才能得到相關(guān)的結(jié)果。例如:在美國(guó)退休人員協(xié)會(huì)網(wǎng)上,用戶(hù)在搜索雞肉食譜時(shí)會(huì)感到很困惑,10個(gè)搜索結(jié)果的前6個(gè)沒(méi)一個(gè)食譜里有用到雞肉。

Maplin.com:用戶(hù)無(wú)法輕易的找到價(jià)格低于50£的藍(lán)牙音箱,用戶(hù)沒(méi)有辦法通過(guò)網(wǎng)站的過(guò)濾器來(lái)搜尋符合他們價(jià)格要求的商品。相反,他們不得不通過(guò)幾個(gè)價(jià)格區(qū)間的選項(xiàng)進(jìn)行查找。用戶(hù)必須一次只選擇一個(gè)價(jià)格區(qū)間(例如40£-50£和30£-40£),然后記住每個(gè)區(qū)間里他們想要的商品。

9. 壓到用戶(hù)的大量信息

眉目不清的信息會(huì)讓用戶(hù)難以找到他們需要的信息,密集的“文字墻”讓發(fā)現(xiàn)感興趣的信息變得困難,信息量過(guò)載的頁(yè)面充滿(mǎn)了爭(zhēng)奪用戶(hù)注意力的內(nèi)容。

請(qǐng)記?。河脩?hù)習(xí)慣掃視網(wǎng)頁(yè),而不是閱讀網(wǎng)頁(yè),你可以通過(guò)編排網(wǎng)頁(yè)內(nèi)容,讓用戶(hù)能輕松的獲取他們感興趣的的信息——使用簡(jiǎn)短的句子和段落、項(xiàng)目列表、標(biāo)題和加粗的關(guān)鍵字。

一個(gè)狹窄的區(qū)域分了好幾個(gè)長(zhǎng)段落,讓用戶(hù)很難看到重點(diǎn),無(wú)法區(qū)分耳機(jī)的特點(diǎn)。

10. 隱藏鏈接

多年來(lái),我們的可用性研究表明,用戶(hù)往往會(huì)忽略或無(wú)視長(zhǎng)得像廣告或者被放置在通常是放置廣告的頁(yè)面位置的內(nèi)容。這個(gè)問(wèn)題依然存在,當(dāng)內(nèi)容與實(shí)際廣告一起列出時(shí),情況就更糟了。

網(wǎng)站的設(shè)計(jì)師有時(shí)會(huì)認(rèn)為,將更多的設(shè)計(jì)元素,如:邊框、背景色或圖形添加到鏈接上能讓鏈接脫穎而出,但結(jié)果通常是相反的:在鏈接周?chē)脑O(shè)計(jì)越是奇特,用戶(hù)越是會(huì)誤認(rèn)為它是一個(gè)廣告。

Pitfield London在網(wǎng)頁(yè)右邊的菜單信息里放有營(yíng)業(yè)時(shí)間和鏈接,在下面放了一張咖啡杯的動(dòng)態(tài)圖和一些前往其他網(wǎng)站的廣告圖。由于這些廣告的位置和顯示的樣式,導(dǎo)致用戶(hù)很難在這個(gè)頁(yè)面上找到咖啡菜單。這個(gè)網(wǎng)站還用了相似的設(shè)計(jì)畫(huà)了張banner,用來(lái)引導(dǎo)用戶(hù)前往Pitfield London。

已經(jīng)取得進(jìn)展:有待進(jìn)一步發(fā)展

我們可以放心地假設(shè),沒(méi)有人會(huì)著手創(chuàng)建一個(gè)設(shè)計(jì)糟糕的網(wǎng)站。如果這些問(wèn)題多年以來(lái)都是眾所周知的,那么它們?yōu)槭裁磿?huì)持續(xù)存在呢?這個(gè)問(wèn)題的潛在答案很多,可能會(huì)填滿(mǎn)一本書(shū)。其中的一些錯(cuò)誤可能反映了一個(gè)更深層次的、具體到組織的UX戰(zhàn)略失敗。

例如:

  • 網(wǎng)站信息層次結(jié)構(gòu)的問(wèn)題可以與組織結(jié)構(gòu)或公司的內(nèi)部政治聯(lián)系起來(lái)。
  • 不同的部門(mén)在不了解對(duì)方的情況下創(chuàng)建內(nèi)容,也沒(méi)有遵循總體的內(nèi)容策略,這時(shí)就會(huì)產(chǎn)生問(wèn)題。
  • 較差的搜索結(jié)果可能是因?yàn)閮?nèi)容管理系統(tǒng)較差,內(nèi)容標(biāo)記有缺陷或缺失,或者搜索工具不佳。

這些問(wèn)題背后的原因并不比解決這些問(wèn)題重要,通過(guò)在網(wǎng)站開(kāi)發(fā)過(guò)程中的用戶(hù)研究和可用性測(cè)試,并關(guān)注研究結(jié)果,可以很容易地識(shí)別上面列出的許多錯(cuò)誤(如果不是全部的話)。

網(wǎng)站永遠(yuǎn)不會(huì)是完美的,沒(méi)有網(wǎng)站是完美的??傆幸粋€(gè)表格字段需要修改,還有一個(gè)內(nèi)容需要編輯,還有一個(gè)導(dǎo)航類(lèi)別需要確定,但是知道需要解決的問(wèn)題對(duì)于朝著正確的方向前進(jìn)是至關(guān)重要的。

在進(jìn)行用戶(hù)研究時(shí),要堅(jiān)持以前的發(fā)現(xiàn)。當(dāng)設(shè)計(jì)偏好在5年后改變時(shí),那些舊的發(fā)現(xiàn)可能會(huì)使你避免在第二個(gè)、第三次或第四次中犯同樣的錯(cuò)誤。

名詞解釋?zhuān)?/b>

分面導(dǎo)航(facets/faceted navigation):也稱(chēng)多維度導(dǎo)航,是分析一系列的內(nèi)容然后根據(jù)條件把不相關(guān)的內(nèi)容排除掉,留下我們想要的內(nèi)容。

(譯者注:a.具體想了解的話可以點(diǎn)擊這里;b.文章里用的是facets,但作者提供的鏈接里用的是faceted navigation,所以?xún)烧邞?yīng)該是指同一個(gè)東西)。

 

原文鏈接:https://www.nngroup.com/articles/top-10-enduring/

譯文作者:?兔子翻譯組

本文由 @?兔子翻譯組 翻譯發(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. 目前還沒(méi)評(píng)論,等你發(fā)揮!