所有人都知道網(wǎng)頁設(shè)計的重要性，糟糕的網(wǎng)頁設(shè)計會給用戶帶來糟糕的體驗，從而影響網(wǎng)頁的流量，或是產(chǎn)品的銷售。那么在設(shè)計網(wǎng)頁的過程中，應(yīng)該避免出現(xiàn)哪些錯誤呢？以下是作者總結(jié)的十大誤區(qū)。

自1996年以來，我已指出了網(wǎng)頁設(shè)計中10條最大的誤區(qū)。這篇文章主要介紹的是這些問題中最為嚴重的網(wǎng)頁設(shè)計錯誤。

一、糟糕的搜索引擎

搜索引擎無法處理手誤、負數(shù)、連接符或者其他查詢詞匯的變體，因此過分側(cè)重要求輸入正確文字的搜索引擎會大大降低可用性。這種搜索引擎對于所有人都不友好，特別對于年齡比較大的用戶會顯得更加難用。

除了輸入的要求之外，在輸出方面，基于包含多個搜索詞對搜索結(jié)果判斷優(yōu)先級，比基于每個文檔的重要性判斷優(yōu)先級更重要。如果你的搜索引擎能夠?qū)ⅰ白罴哑ヅ洹表楋@示在搜索結(jié)果的第一條就更好了。特別對于一些重要的搜索，比如說產(chǎn)品名稱。

當(dāng)無法找到信息的時候，搜索功能是用戶的生命線。雖然高級的搜索有時候有所幫助，但是大多時候簡單的搜索能夠滿足需求。搜索應(yīng)該是一個簡單的輸入框，這就是用戶想要的。

二、在線閱讀PDF文檔

用戶很討厭在瀏覽網(wǎng)頁的時候跳出一個PDF，因為這個PDF破壞了他們的瀏覽過程。即使是很簡單的操作，比如說：打印或者保存文件都很難執(zhí)行，因為普通的瀏覽器按鈕無法工作。

PDF的布局是基于紙張的大小設(shè)計的，在這個布局里面很難去適應(yīng)網(wǎng)頁瀏覽器，如果在線閱讀PDF文檔，沒有了平滑的滾動瀏覽，只有很小的字體。

最糟糕的是，一個PDF是一個無法導(dǎo)航的，無法分割的一團內(nèi)容。

對于印刷、發(fā)行手冊或者其他大篇幅的需打印的文檔來說，PDF是很好的形式，如果你要實現(xiàn)的是這種目的，那么可以保留PDF。

如果內(nèi)容是需要被瀏覽或者閱讀的，那么請將所有內(nèi)容轉(zhuǎn)化成真正的網(wǎng)頁。

三、瀏覽過的鏈接不改變顏色

一個好的瀏覽歷史能夠幫助你了解目前的位置，因為那是你瀏覽的起點。

知道你過去訪問過和現(xiàn)在訪問的地址，將會對于你接下來決定要訪問哪個地址有所幫助。

鏈接是瀏覽過程的一個重要因素。

通過這些鏈接，用戶可以不再去訪問對他沒用的地址，相反，他們也可能想要再次訪問他們之前訪問過的有用的地址。

最重要的是，他們知道已經(jīng)瀏覽過那些網(wǎng)頁，可以避免不小心再次訪問同樣的網(wǎng)頁。

而收獲這些好處，只有在一種情況下：將已訪問和未訪問的鏈接設(shè)定為不同的顏色，使用戶能夠分辨出哪些是訪問過的，哪些是沒有訪問過的。

在可用性測試中，如果訪問過的鏈接不改變顏色，用戶將會表現(xiàn)出迷惑，總是反復(fù)地不小心地瀏覽了相同的網(wǎng)頁。

四、不可掃描的文字

顯示一大片文字對于用戶來說是致命的，它是很可怕、很無聊的交互體驗，用戶閱讀起來很痛苦。

在線寫作，不是為了打印。讓用戶很好地閱讀，并且要支持用戶快速掃描內(nèi)容，那么使用以下幾個技巧：

• 使用副標題
• 使用列表
• 突出關(guān)鍵詞
• 使用小段落
• 倒金字塔結(jié)構(gòu)
• 一個簡單的寫作風(fēng)格
• 拒絕采用華麗不實在的市場營銷語言

五、固定的字體大小

很不辛的是，CSS樣式不幸地讓網(wǎng)站有權(quán)禁止瀏覽器的“改變字體大小”的功能，并且將網(wǎng)頁使用一個固定大小的字體。

95%以上的的情況來說，這個固定的字體大小是非常的小，大大降低了超過40歲的大部分用戶的網(wǎng)頁可閱讀性。

尊重用戶的喜好，讓他們根據(jù)需要調(diào)整字體大小。另外，要按相對值來定義大小的字體，不要按像素的絕對值定義大小。

六、網(wǎng)頁標題不容易被搜索引擎搜索出

搜索是用戶發(fā)現(xiàn)網(wǎng)站的最重要的途徑，也是用戶發(fā)現(xiàn)個人網(wǎng)站服務(wù)的最重要的途徑。簡單的網(wǎng)頁標題是你從搜索結(jié)果中吸引新訪客、幫助現(xiàn)存客戶找到他們需要的網(wǎng)頁的主要工具。

網(wǎng)頁標題是被包含在HTML <title>里的內(nèi)容，也是最經(jīng)常被用于搜索結(jié)果列表中的可點擊時的大標題。

搜索引擎會顯示標題中的前66個字符，所以這是很精簡關(guān)鍵的的簡短的內(nèi)容。

網(wǎng)頁標題也經(jīng)常被作為用戶添加到書簽中的默認入口名稱。比如你的公司網(wǎng)站主頁，以公司名稱作為開頭，跟上對網(wǎng)站的簡要描述，就是不錯的選擇。

不要以“The”或者“Welcome”為開頭，除非你想要強調(diào)T或者W。

除了主頁外的其他頁面，以最突出的內(nèi)容作為開頭，后跟用戶將會在這個網(wǎng)頁上看到的內(nèi)容的簡要描述。

由于網(wǎng)頁標題會被作為瀏覽器的窗口標題，所以它也會被作為顯示在任務(wù)欄的標簽內(nèi)容，這意味著高級用戶將會在多個窗口中，根據(jù)網(wǎng)頁的標題前一到兩個詞來判斷要切換到哪個窗口。

如果你所有的網(wǎng)頁標題都是以一樣的詞作為開頭，那么你就降低了使用多窗口的用戶的可用性。

七、看起來像廣告的東西

有選擇性的吸引注意力是非常有用的。網(wǎng)頁的用戶已經(jīng)學(xué)會了如何避免去關(guān)注任何可能阻擋他們目標的廣告。

很不幸的是，用戶也經(jīng)常忽略看起來像廣告

的合理的設(shè)計元素。畢竟，當(dāng)你開始忽略某些東西的時候，你就不會太認真地去研究它是什么。

因此，最好是能夠避免任何看起來像廣告的設(shè)計。這一個知道方針將會隨著廣告的新形式出現(xiàn)而發(fā)生變化。目前可以遵循以下規(guī)則：

• 無視橫幅：由于橫幅所在的網(wǎng)頁位置和形狀，用戶不會把注意力放在任何看似橫幅廣告的地方。
• 避免使用動畫：用戶會忽略不斷閃爍或者跳動的文字或者過于侵略用戶視線的動畫。
• 凈化彈框：用戶會在自己甚至都還沒看彈框內(nèi)容之前，關(guān)閉了彈出的窗口，有時候是帶著厭惡情緒關(guān)閉這個窗口的

八、違反設(shè)計慣例

一致性是一個最重要的可用性原則之一，當(dāng)所有的東西都是一致的表現(xiàn)形式，用戶不需要去擔(dān)心將會發(fā)生什么事情，他們可以根據(jù)自己之前的使用習(xí)慣，就預(yù)測到接下來他會碰到什么。

用戶的期待被驗證是正確得越多，那么他們也會更感受到他們在控制著系統(tǒng)，會更加喜歡這個系統(tǒng)。相反，如果系統(tǒng)經(jīng)常打破用戶的期待，那么他們會覺得失落。

Jakob’s的網(wǎng)頁用戶體驗原則里指出：用戶花了大部分時間在其他網(wǎng)頁上。

這句話指的是，用戶對你的網(wǎng)站有他們的使用期待，而這些期待是基于使用了大量具備有同樣使用習(xí)慣的其他網(wǎng)站而形成的。

如果你背離了，那么你的網(wǎng)站就很難使用，用戶就會離開。

九、打開新的瀏覽器窗口

打開新的瀏覽器窗口就像是一個吸塵器銷售業(yè)務(wù)在上門推銷的時候，把煙灰缸的雜物傾倒在消費者家的地毯上。

請不要用那么多的窗口污染我的屏幕，特別是當(dāng)前的操作系統(tǒng)的窗口管理十分混亂的時候。

設(shè)計師打開一個新的窗口是出于想要把用戶停留在他們的網(wǎng)站上，不希望用戶離開網(wǎng)站的設(shè)計理論的本意，但是卻忽略了控制用戶機器帶來的不良效應(yīng)。

這個策略是適得其反的，因為打開新的窗口，將沒法使用灰色的返回的按鈕，而返回按鈕已經(jīng)是用戶返回上一個網(wǎng)站的正常使用習(xí)慣。用戶經(jīng)常注意不到已經(jīng)有一個新的窗口被打開。特別當(dāng)他們窗口已經(jīng)最大化的時候。所以一個用戶在這種情況下，如果想要返回到原來的網(wǎng)站，將會十分的困惑，因為返回按鈕無法使用。

用戶對于他們系統(tǒng)的鏈接的理解，經(jīng)常不如被想象的那樣。一個鏈接應(yīng)該是一個簡單的超文本，點擊后目標頁面在當(dāng)前的瀏覽窗口中加載。

用戶痛恨沒有預(yù)警的彈出窗口。當(dāng)他們想要用新的網(wǎng)頁顯示新的內(nèi)容的時候，他們會自己用瀏覽器的“在打開新窗口打開”的方法。

十、不回答用戶的問題

用戶是十分的目標驅(qū)動性的，他們訪問網(wǎng)站是因為想要通過網(wǎng)站達成什么目的的?；蛟S是購買你的產(chǎn)品。網(wǎng)站很大的一個失敗是，很難令用戶找到他們想找的。

有時候答案很簡單，但就是不在網(wǎng)站上，于是你失去了這個銷售的機會。因為用戶找不到答案，他們必須假設(shè)你的產(chǎn)品或者服務(wù)不滿足他們的需求。

也有些時候他們想找的答案埋藏的太深，用戶沒有時間去一個個閱讀，這種隱藏太深的信息，就跟不在網(wǎng)站上也是差不多的。

最糟糕的例子是網(wǎng)站不提供“產(chǎn)品或者服務(wù)的價格”，沒有B2C的電商網(wǎng)站會犯這種錯誤，但是B2B的網(wǎng)站卻經(jīng)常發(fā)生，比如說人們根本就不能分辨出“企業(yè)級解決方案”是適用于100用戶的還是100000用戶的。

價格是用戶最容易去理解提供的產(chǎn)品的最重要的部分。不顯示價格，會讓人迷失，會讓人難以理解產(chǎn)品線。

即使是B2C的網(wǎng)站有時候也會忘記在產(chǎn)品列表里放價格的類似的錯誤，比如說目錄頁、搜索結(jié)果。價格是了解情況的關(guān)鍵因素。它讓用戶可以區(qū)分產(chǎn)品，并且讓用戶快速判斷選擇自身最合適的產(chǎn)品。

原作者：?Jakob Nielsen

原文地址： https://www.nngroup.com/articles/top10mistakeswebdesign/

本文由 @滿天星 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Unsplash ，基于 CC0 協(xié)議