負(fù)能量嗅探器！網(wǎng)站中那些令用戶抓狂的細(xì)節(jié)

生活和現(xiàn)實(shí)總有許多無奈，當(dāng)我們?cè)L問互聯(lián)網(wǎng)的時(shí)候，這些負(fù)面情緒往往很容易被放大。上到各種負(fù)面新聞，下到瀏覽器卡頓，我們很容易陷入抓狂的狀態(tài)無法自拔。所以，對(duì)于網(wǎng)頁設(shè)計(jì)師而言，應(yīng)當(dāng)盡量避免出現(xiàn)那些讓用戶糾結(jié)抓狂的細(xì)節(jié)。接下來我們總結(jié)了10項(xiàng)最令用戶抓狂的細(xì)節(jié)，以及相應(yīng)的解決方案。

自己的網(wǎng)站在用戶體驗(yàn)上不盡如人意問題何在？看看那些被誤解的UX原則吧：《中槍了木有！最常被誤解的18個(gè)用戶體驗(yàn)設(shè)計(jì)原理》

1、無法提交的表單

好象在世界范圍內(nèi)，這個(gè)問題是被反映最多也是最令人無法忍受的問題。用戶在搜索框內(nèi)輸入內(nèi)容，眨眼之間沒了；壇友在論壇中激揚(yáng)文字，寫下1000字的精彩吐槽，暗爽之下，提交內(nèi)容，結(jié)果突然間頁面一片空白，一切都沒了！

你應(yīng)該這樣解決：

如果你是一名Web開發(fā)人員，那么你只需要為你的表單添加一些JavaScript代碼，使用驗(yàn)證庫(kù)，或者通過Ajax來提交表單就好了。 如果你希望表單提交的時(shí)候在服務(wù)器端更符合邏輯一些，那么請(qǐng)確保用戶之前填寫未曾提交的內(nèi)容能被再次填充進(jìn)去。

表單設(shè)計(jì)提升指南：《騰訊精品好文！7個(gè)方法幫你全面提升WEB表單填寫體驗(yàn)》

2、奇葩的驗(yàn)證環(huán)節(jié)

我想我不是唯一討厭這個(gè)的人。長(zhǎng)長(zhǎng)的一串肉眼幾乎無法識(shí)別的字符（對(duì)，說的就是你，谷歌），還有一些驗(yàn)證機(jī)制你甚至完全不明白它是啥。當(dāng)然，如果你碰上奇葩的驗(yàn)證碼的同時(shí)還無法提交，估計(jì)想死的心都有了！

這樣的驗(yàn)證碼……你讓沒有中文輸入法的美帝人們?cè)趺摧斎耄?/p>

你應(yīng)該這樣解決：

垃圾郵件和垃圾信息推送用的機(jī)器人越來越智能，這是造成驗(yàn)證機(jī)制越來越復(fù)雜的主要原因。在諸多驗(yàn)證機(jī)制中仔細(xì)選一下，總有幾種比較人性化。比如使用門牌號(hào)碼的圖片作為驗(yàn)證內(nèi)容，至少對(duì)于人類而言更容易識(shí)別出來。

3、垃圾郵件

當(dāng)一個(gè)網(wǎng)站開始堅(jiān)持不懈地向你推送帶有無用信息的電子郵件的時(shí)候，你會(huì)恨透它的。當(dāng)然，比這個(gè)更可惡的情況是，你發(fā)現(xiàn)你無法退訂它……在這里，點(diǎn)名批評(píng)LinkedIn。

你應(yīng)該這樣解決它：

作為站長(zhǎng)的你只需要做2件事情：1、別發(fā)垃圾郵件了。2、關(guān)閉你的LinkedIn帳號(hào)，謝謝。

4、不合理的設(shè)置名稱

在網(wǎng)頁的按鈕和設(shè)置中使用過于富有創(chuàng)造性的語言，往往會(huì)讓用戶疑惑：“我了個(gè)擦，這是個(gè)啥！？到底要不要勾選？”

你應(yīng)該這樣解決它：

在設(shè)置啊按鈕這些地方盡量使用簡(jiǎn)潔直觀的措辭，使用明確的復(fù)選框，不要使用過多的選項(xiàng)，盡可能讓整個(gè)設(shè)置界面邏輯清晰，分類明確。

5、超長(zhǎng)的表單

我們會(huì)在網(wǎng)上耗費(fèi)很多時(shí)間，但是在這過程中最煩的恐怕就是填寫那種超長(zhǎng)的表單。這種情況多見于注冊(cè)網(wǎng)站或者論壇的時(shí)候，填完郵箱密碼個(gè)人信息之后，你還得填寫公司人數(shù)、喜歡的顏色、談過幾次戀愛，等看到提交按鈕可以點(diǎn)擊的時(shí)候你會(huì)發(fā)現(xiàn)自己處于崩潰的邊緣。當(dāng)然，筋疲力盡的你這個(gè)時(shí)候還特別容易填錯(cuò)驗(yàn)證碼……

你應(yīng)該這樣解決它：

對(duì)于絕大多少網(wǎng)站而言，并不需要那么多復(fù)雜的信息！所以作為網(wǎng)頁設(shè)計(jì)師or站長(zhǎng)的你，應(yīng)該盡量讓用戶提供最關(guān)鍵的信息就夠了。正如許多網(wǎng)站所做的，提供郵箱設(shè)置密碼，或者直接調(diào)用新浪微博或者谷歌帳號(hào)之類的API。

你真的需要提升網(wǎng)站的可用性：《讓網(wǎng)站飛起來！教你簡(jiǎn)單10步大幅提升網(wǎng)站可訪問性》

6、插播廣告

對(duì)于谷歌瀏覽器和火狐瀏覽器的用戶而言，應(yīng)該非常熟悉反廣告插件吧？看視頻之前有廣告也就算了，當(dāng)你看到女主絕命逃亡，沉浸到劇情當(dāng)中的時(shí)候，突然插入優(yōu)酸乳的廣告，這算是個(gè)啥！同理，在APP和網(wǎng)頁關(guān)鍵部位插入的廣告同樣令人抓狂。

你應(yīng)該這樣解決它：

這種廣告會(huì)割裂網(wǎng)站體驗(yàn)，令用戶煩躁，我想你也沒少在優(yōu)酷的用戶評(píng)論中看到關(guān)于廣告的吐槽。過于坑爹的中插廣告會(huì)促使用戶安裝反廣告插件。解決方法很簡(jiǎn)單，去掉這些部位的廣告。

7、確認(rèn)關(guān)閉的彈窗

從內(nèi)心深處我非常討厭這種彈窗。我已經(jīng)決定離開這個(gè)頁面了，結(jié)果網(wǎng)站還要生拉硬拽的讓我再確認(rèn)一次，心情不佳的時(shí)候尤其容易讓人著急上火。

我真的要關(guān)閉頁面！擦！

你需要這樣解決它：

你是一個(gè)壞人。把你的網(wǎng)站關(guān)了吧。（笑）

8、內(nèi)容被放置到意想不到的地方

用戶界面和交互應(yīng)該是符合邏輯的。按鈕和操作應(yīng)該符合用戶的使用情境，APP和網(wǎng)頁的導(dǎo)航也應(yīng)該清晰直觀。所以，不要將一些內(nèi)容、按鈕放置在一些奇怪的地方。反例如下：

你應(yīng)該這樣解決它：
?閱讀一些關(guān)于UX和UI設(shè)計(jì)的文章，這將幫你發(fā)現(xiàn)并解決許多可用性問題。
?仔細(xì)觀察一下親戚朋友們使用你的網(wǎng)站或者APP時(shí)候的操作，如果他們都搞不清楚，那么你得重新設(shè)計(jì)了。

9、在手機(jī)上顯示不正常

這讓我想起多年以前網(wǎng)頁設(shè)計(jì)師迫不及待拋棄1024x768分辨率的時(shí)代。在移動(dòng)端爆發(fā)式增長(zhǎng)的今天，打開網(wǎng)頁一看陡然發(fā)現(xiàn)是桌面端的網(wǎng)頁，WTF？！做個(gè)響應(yīng)式的網(wǎng)頁有那么難么？

Quore估計(jì)是想逼你用他們的客戶端吧……

你應(yīng)該這樣解決它：

移動(dòng)端的用戶訪問量只會(huì)越來越大，所以盡可能做成響應(yīng)式的網(wǎng)站吧。Wordpress網(wǎng)站可以用響應(yīng)式的主題，或者使用柵格系統(tǒng)、BootStrap也不錯(cuò)。

10、付費(fèi)墻

有些能提供高質(zhì)量?jī)?nèi)容的網(wǎng)站，會(huì)使用一種健全的商業(yè)模式：給你看個(gè)開頭，然后在付費(fèi)墻上告訴你，只有付費(fèi)才能看到后面的內(nèi)容。

解決方案？換種商業(yè)模式吧！

【網(wǎng)站用戶體驗(yàn)提升大法】

技巧加持：
《幫你年底上線！超實(shí)用的網(wǎng)頁設(shè)計(jì)應(yīng)急小技巧》

技術(shù)加持：
《如此風(fēng)騷！2014年刷爆朋友圈的十大 HTML5 技術(shù)案例》

經(jīng)驗(yàn)加持：
《移動(dòng)設(shè)備手勢(shì)分析！用戶到底是怎樣操作手機(jī)的？》

原文地址：tutorialzine
優(yōu)設(shè)網(wǎng)譯者：@陳子木

本文由優(yōu)設(shè)網(wǎng)原創(chuàng)翻譯，請(qǐng)尊重版權(quán)和譯者成果，轉(zhuǎn)摘請(qǐng)附上優(yōu)設(shè)鏈接，違者必究。謝謝各位編輯同仁配合。

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專注分享網(wǎng)頁設(shè)計(jì)、無線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量87萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計(jì)教程、經(jīng)驗(yàn)分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁設(shè)計(jì) 微信號(hào)：【youshege】?jī)?yōu)設(shè)哥的全拼
您也可以通過掃描下方二維碼快速添加：