網(wǎng)站制作用戶體驗(yàn)的“反面模式”成都網(wǎng)站建設(shè)
?
什么是反面模式?
反面模式(anti-pattern)是指在實(shí)踐中明顯出現(xiàn)但又低效或是有待優(yōu)化的設(shè)計(jì)模式。你會在網(wǎng)頁應(yīng)用或網(wǎng)站看到這種方法，更具體地說，會出現(xiàn)在任何一個(gè)用戶產(chǎn)生行為的地方，比如登錄頁面，輸入信息或閱讀信息等地方。
如何識別反面模式?
作為一個(gè)網(wǎng)頁設(shè)計(jì)師，你可能很容易就察覺到設(shè)計(jì)中明顯出問題的地方(比如，一個(gè)下拉菜單在你點(diǎn)擊其中一個(gè)條目之前就收起來)。然而，反面模式中存在的設(shè)計(jì)問題會更加難以察覺。雖然一個(gè)專注于在網(wǎng)站上完成某個(gè)任務(wù)的用戶會跳過這個(gè)問題，但依然帶有些許不爽。
為了讓這些問題現(xiàn)出原形，你最好打開網(wǎng)絡(luò)數(shù)據(jù)統(tǒng)計(jì)工具。Google Analytics是不錯(cuò)的選擇，因?yàn)樗赓M(fèi)并且很容易安裝。
你需要從測量到的數(shù)據(jù)中尋找一些問題的“癥狀”(有可能是反面模式)，包括：
頁面用戶訪問量的下降
本來有許多用戶被引到某一個(gè)頁面，但突然大量的用戶消失，這時(shí)你該仔細(xì)瞅瞅這個(gè)頁面出了什么問題。問問自己，用戶需要某一個(gè)交互行為來進(jìn)行下一步嗎?他們是不是不知道如何進(jìn)入下一步?整個(gè)頁面是否是一個(gè)動畫?這些問題你必須實(shí)地調(diào)查才能知曉。把這些問題都記錄下來以便于之后的用戶研究和分析。
漫無目的的點(diǎn)擊
如果用戶在整個(gè)頁面上到處亂點(diǎn)，說明他們根本不知道應(yīng)該點(diǎn)擊什么。
反復(fù)的上下滾動
如果用戶在頁面內(nèi)不停地上下滑動滾動條，證明他們找不到自己想要的東西，或者他們壓根不知道想要什么內(nèi)容。
一些常見的反面模式
一個(gè)可用性的問題不一定等同于反面模式的癥結(jié)，但是有跡可循的。許多設(shè)計(jì)中的反面模式因?yàn)榈托У目捎眯远划?dāng)做差勁的想法，實(shí)在很可惜。以下是一些反面模式的案例：
1. 可點(diǎn)擊的元素看起來卻沒有點(diǎn)擊的暗示淺談用戶體驗(yàn)的“反面模式”
(譯者注：我們?yōu)槭裁礋o法區(qū)分按鈕是否可點(diǎn)擊?按鈕的顏色與頁面上的文本顏色相同，沒有設(shè)置為藍(lán)色，也沒有將其像其他文字鏈那樣進(jìn)行按鈕化處理。沒有加粗也沒有下劃線。沒有圖標(biāo)或箭頭示意，或任何提供可點(diǎn)擊的暗示)
包含的問題有：
1. 按鈕太小
2. 文字鏈沒有視覺區(qū)分(藍(lán)色是最好的選擇)
3. 按鈕太過扁平化以至于無法告訴用戶：“哥其實(shí)是一個(gè)按鈕!”
4. 懸停狀態(tài)的缺失可能也會造成問題，比如沒有使用{cursor：pointer;}的標(biāo)簽
2. 懸停的問題
把信息隱藏在有懸停效果的部件(按鈕或標(biāo)題)之后是一種規(guī)整界面的很方便的辦法，但是要保證鼠標(biāo)離開熱區(qū)之后，信息不要隱藏的太快。用戶的反應(yīng)沒有你想象中那么迅速。作為設(shè)計(jì)師，想象一下，反復(fù)做懸停的動作以使信息可見是一件多么不愉快的事情。
3. 不統(tǒng)一的語境
比方說，一個(gè)頁面上有三個(gè)不同類型的鏈接。一種引導(dǎo)用戶返回首頁，一種把用戶帶出本站，而第三個(gè)打開一個(gè)彈窗。這也太令用戶迷惑了。
4. 沒有批量的執(zhí)行操作
在一個(gè)復(fù)雜的列表里，如果有需要用戶執(zhí)行的功能，比如添加，刪除，或改變列表里元素的狀態(tài)，請務(wù)必提供批量處理的功能!一次一個(gè)的進(jìn)行處理絕對造成相當(dāng)差的用戶體驗(yàn)。
5. 大量內(nèi)容塞滿第一屏空間
研究表明，用戶其實(shí)更集中注意力于閱讀第一屏之后的內(nèi)容。但由于某些原因所致，把內(nèi)容盡量堆在首屏的做法依舊存在。所以我的建議是：合理利用空間，把內(nèi)容區(qū)隔開來。
6. 彈跳式導(dǎo)航 (Pogo stick navigation)
彈跳式導(dǎo)航(譯者注：pogo stick的字面意思是彈簧單高蹺，又稱“跳跳鼠”)是指用戶為了完成一個(gè)操作，必須從主導(dǎo)航深入至一兩個(gè)層級，然后回到主導(dǎo)航，從另一個(gè)欄目再次深入。“彈跳式導(dǎo)航”是由 Jared Spool確定命名的，這種導(dǎo)航形式使用戶需要不斷在層級中深入和返回，就像跳跳鼠一樣跳上跳下。
7. 清空所有錯(cuò)誤信息
這種模式的情景是，當(dāng)用戶填寫完成一個(gè)表單，系統(tǒng)告知某項(xiàng)信息不符合要求，而這時(shí)網(wǎng)站自動清空所有或某一部分用戶已輸入的信息，并且需要重新填寫。
8. 錯(cuò)誤的目標(biāo)頁面
是指當(dāng)用戶完成一系列交互行為后，卻被引入一個(gè)不同的預(yù)期之外的頁面。這種模式經(jīng)常出現(xiàn)在電子商務(wù)網(wǎng)站：用戶進(jìn)行在線交易之前需要登錄，當(dāng)他們登陸之后，用戶并沒有被引導(dǎo)至進(jìn)行填寫信用卡信息的表單頁，而是被帶到了首頁。
作業(yè)
檢查你現(xiàn)在正在做的項(xiàng)目中是否出現(xiàn)這樣的反面模式，或與其相關(guān)的癥狀。找一個(gè)朋友或者沒有參與到項(xiàng)目中的合作者來走查一下網(wǎng)站，看看會發(fā)生什么。他們是否會在網(wǎng)站的某處感到不爽?用戶體驗(yàn)不順暢的地方往往是反面模式的前兆。
成都奕博科技有限公司專注服務(wù)于軟件開發(fā)、APP移動應(yīng)用、網(wǎng)站建設(shè)、網(wǎng)站優(yōu)化、虛擬現(xiàn)實(shí)智能化設(shè)備研發(fā)。服務(wù)熱線：028-66713560?
