網站(zhàn)制作(zuò)用(yòng)戶體驗的“反面模式”成都網站(zhàn)建設

​

什(shén)麽是反面模式?

反面模式(anti-pattern)是指在實踐中明(míng)顯出現(xiàn)但(dàn)又低(dī)效或是有待優化的設計(jì)模式。你(nǐ)會(huì)在網頁應用(yòng)或網站(zhàn)看(kàn)到(dào)這(zhè)種方法，更具體地說，會(huì)出現(xiàn)在任何一個用(yòng)戶産生行爲的地方，比如登錄頁面，輸入信息或閱讀信息等地方。

如何識别反面模式?

作(zuò)爲一個網頁設計(jì)師，你(nǐ)可能(néng)很(hěn)容易就察覺到(dào)設計(jì)中明(míng)顯出問題的地方(比如，一個下(xià)拉菜單在你(nǐ)點擊其中一個條目之前就收起來(lái))。然而，反面模式中存在的設計(jì)問題會(huì)更加難以察覺。雖然一個專注于在網站(zhàn)上(shàng)完成某個任務的用(yòng)戶會(huì)跳過這(zhè)個問題，但(dàn)依然帶有些(xiē)許不爽。

爲了(le)讓這(zhè)些(xiē)問題現(xiàn)出原形，你(nǐ)最好(hǎo)打開(kāi)網絡數據統計(jì)工(gōng)具。Google Analytics是不錯的選擇，因爲它免費并且很(hěn)容易安裝。

你(nǐ)需要從(cóng)測量到(dào)的數據中尋找一些(xiē)問題的“症狀”(有可能(néng)是反面模式)，包括：

頁面用(yòng)戶訪問量的下(xià)降

本來(lái)有許多用(yòng)戶被引到(dào)某一個頁面，但(dàn)突然大(dà)量的用(yòng)戶消失，這(zhè)時(shí)你(nǐ)該仔細瞅瞅這(zhè)個頁面出了(le)什(shén)麽問題。問問自(zì)己，用(yòng)戶需要某一個交互行爲來(lái)進行下(xià)一步嗎?他(tā)們是不是不知(zhī)道(dào)如何進入下(xià)一步?整個頁面是否是一個動畫(huà)?這(zhè)些(xiē)問題你(nǐ)必須實地調查才能(néng)知(zhī)曉。把這(zhè)些(xiē)問題都記錄下(xià)來(lái)以便于之後的用(yòng)戶研究和(hé)分析。

漫無目的的點擊

如果用(yòng)戶在整個頁面上(shàng)到(dào)處亂點，說明(míng)他(tā)們根本不知(zhī)道(dào)應該點擊什(shén)麽。

反複的上(shàng)下(xià)滾動

如果用(yòng)戶在頁面内不停地上(shàng)下(xià)滑動滾動條，證明(míng)他(tā)們找不到(dào)自(zì)己想要的東西，或者他(tā)們壓根不知(zhī)道(dào)想要什(shén)麽内容。

一些(xiē)常見的反面模式

一個可用(yòng)性的問題不一定等同于反面模式的症結，但(dàn)是有迹可循的。許多設計(jì)中的反面模式因爲低(dī)效的可用(yòng)性而被當做差勁的想法，實在很(hěn)可惜。以下(xià)是一些(xiē)反面模式的案例：

1. 可點擊的元素看(kàn)起來(lái)卻沒有點擊的暗示淺談用(yòng)戶體驗的“反面模式”

(譯者注：我們爲什(shén)麽無法區(qū)分按鈕是否可點擊?按鈕的顔色與頁面上(shàng)的文(wén)本顔色相同，沒有設置爲藍色，也(yě)沒有将其像其他(tā)文(wén)字鏈那樣進行按鈕化處理(lǐ)。沒有加粗也(yě)沒有下(xià)劃線。沒有圖标或箭頭示意，或任何提供可點擊的暗示)

包含的問題有：

1. 按鈕太小(xiǎo)

2. 文(wén)字鏈沒有視(shì)覺區(qū)分(藍色是最好(hǎo)的選擇)

3. 按鈕太過扁平化以至于無法告訴用(yòng)戶：“哥(gē)其實是一個按鈕!”

4. 懸停狀态的缺失可能(néng)也(yě)會(huì)造成問題，比如沒有使用(yòng){cursor：pointer;}的标簽

2. 懸停的問題

把信息隐藏在有懸停效果的部件(按鈕或标題)之後是一種規整界面的很(hěn)方便的辦法，但(dàn)是要保證鼠标離開(kāi)熱區(qū)之後，信息不要隐藏的太快(kuài)。用(yòng)戶的反應沒有你(nǐ)想象中那麽迅速。作(zuò)爲設計(jì)師，想象一下(xià)，反複做懸停的動作(zuò)以使信息可見是一件多麽不愉快(kuài)的事(shì)情。

3. 不統一的語境

比方說，一個頁面上(shàng)有三個不同類型的鏈接。一種引導用(yòng)戶返回首頁，一種把用(yòng)戶帶出本站(zhàn)，而第三個打開(kāi)一個彈窗。這(zhè)也(yě)太令用(yòng)戶迷惑了(le)。

4. 沒有批量的執行操作(zuò)

在一個複雜(zá)的列表裏，如果有需要用(yòng)戶執行的功能(néng)，比如添加，删除，或改變列表裏元素的狀态，請(qǐng)務必提供批量處理(lǐ)的功能(néng)!一次一個的進行處理(lǐ)絕對(duì)造成相當差的用(yòng)戶體驗。

5. 大(dà)量内容塞滿第一屏空(kōng)間

研究表明(míng)，用(yòng)戶其實更集中注意力于閱讀第一屏之後的内容。但(dàn)由于某些(xiē)原因所緻，把内容盡量堆在首屏的做法依舊存在。所以我的建議(yì)是：合理(lǐ)利用(yòng)空(kōng)間，把内容區(qū)隔開(kāi)來(lái)。

6. 彈跳式導航 (Pogo stick navigation)

彈跳式導航(譯者注：pogo stick的字面意思是彈簧單高(gāo)跷，又稱“跳跳鼠”)是指用(yòng)戶爲了(le)完成一個操作(zuò)，必須從(cóng)主導航深入至一兩個層級，然後回到(dào)主導航，從(cóng)另一個欄目再次深入。“彈跳式導航”是由 Jared Spool确定命名的，這(zhè)種導航形式使用(yòng)戶需要不斷在層級中深入和(hé)返回，就像跳跳鼠一樣跳上(shàng)跳下(xià)。

7. 清空(kōng)所有錯誤信息

這(zhè)種模式的情景是，當用(yòng)戶填寫完成一個表單，系統告知(zhī)某項信息不符合要求，而這(zhè)時(shí)網站(zhàn)自(zì)動清空(kōng)所有或某一部分用(yòng)戶已輸入的信息，并且需要重新填寫。

8. 錯誤的目标頁面

是指當用(yòng)戶完成一系列交互行爲後，卻被引入一個不同的預期之外(wài)的頁面。這(zhè)種模式經常出現(xiàn)在電子商務網站(zhàn)：用(yòng)戶進行在線交易之前需要登錄，當他(tā)們登陸之後，用(yòng)戶并沒有被引導至進行填寫信用(yòng)卡信息的表單頁，而是被帶到(dào)了(le)首頁。

作(zuò)業

檢查你(nǐ)現(xiàn)在正在做的項目中是否出現(xiàn)這(zhè)樣的反面模式，或與其相關的症狀。找一個朋友或者沒有參與到(dào)項目中的合作(zuò)者來(lái)走查一下(xià)網站(zhàn)，看(kàn)看(kàn)會(huì)發生什(shén)麽。他(tā)們是否會(huì)在網站(zhàn)的某處感到(dào)不爽?用(yòng)戶體驗不順暢的地方往往是反面模式的前兆。