- 相關(guān)推薦
網(wǎng)站建設之殤：揭秘用戶(hù)體驗的“反面模式”
作為網(wǎng)站的一個(gè)用戶(hù)，你也許時(shí)常會(huì )發(fā)現，使用網(wǎng)站時(shí)，有些東西很令人厭煩。例如一個(gè)登錄的表單，或是導航，或者是整個(gè)網(wǎng)頁(yè)應用，都有可能讓你難以完成一項任務(wù)。是什么原因讓網(wǎng)站的設計產(chǎn)生了這些問(wèn)題?
答案是復雜的。首當其沖的問(wèn)題是,設計師們可能忽略了很重要的一點(diǎn)：對實(shí)際用戶(hù)進(jìn)行測試。這個(gè)問(wèn)題的原因通常是,設計師想當然的認為，他們自己知道如何處理好網(wǎng)站某一部分的交互細節。因為很多設計師覺(jué)得，他們已經(jīng)在其他案例中看到過(guò)類(lèi)似的交互,原設計者肯定已經(jīng)測試過(guò)，為什么多此一舉呢? 拿來(lái)就好。于是，我們頻繁查看別人寫(xiě)好的CSS開(kāi)源代碼庫，直接復制到自己的設計中，而并沒(méi)有在真實(shí)場(chǎng)景中測試。如此一來(lái)，我們已經(jīng)在不知不覺(jué)中建立起一個(gè)由既定模板堆砌的作品。
有些模板還比較有效，但有一些就有問(wèn)題了。假如把這些模版看做車(chē)輪，那么經(jīng)常你直接拿來(lái)裝在汽車(chē)上的輪子可能是自行車(chē)輪，驢頭不對馬嘴。所以沒(méi)錯，你應當重新為你的汽車(chē)設計車(chē)輪，并且要把輪子裝在車(chē)上試試。
你要考慮的事情：
1、你的用戶(hù)未必與亞馬遜，谷歌的目標用戶(hù)相同，甚至與你的競爭對手的用戶(hù)也不同。想弄明白究竟一個(gè)設計模板是否有效，你一定需要親自請你的“上帝”(用戶(hù))來(lái)測試。也許你的他們是迪拜的船員(沒(méi)開(kāi)玩笑!這是我們公司近期的一個(gè)案例)�？偠灾�，你的用戶(hù)和其他網(wǎng)站目標用戶(hù)的需求是不一樣的。
2、可是，我們不是已經(jīng)了解到人類(lèi)大腦如何與信息進(jìn)行互動(dòng)嗎?
沒(méi)錯，但是我得重申，這些知識很宏觀(guān)很寬泛。沒(méi)有什么事情是絕對的。用哈佛大學(xué)最近的一個(gè)實(shí)驗舉個(gè)例子吧，在這個(gè)實(shí)驗中，研究員們設計的一個(gè)游戲能夠根據你點(diǎn)擊鼠標的速率正確猜測到你的年齡(譯者注：更多關(guān)于此實(shí)驗的信息可參考http://.html)。我(指原文作者)也參與了，真是很有開(kāi)拓性的實(shí)驗!
處于不同年齡，不同身體條件，不同文化或其他方面不同的用戶(hù)會(huì )有完全不一樣的需求。這就是為什么使用大而籠統的解決辦法會(huì )有適得其反的效果。
什么是反面模式?
反面模式(anti-pattern)是指在實(shí)踐中明顯出現但又低效或是有待優(yōu)化的設計模式。你會(huì )在網(wǎng)頁(yè)應用或網(wǎng)站看到這種方法，更具體地說(shuō)，會(huì )出現在任何一個(gè)用戶(hù)產(chǎn)生行為的地方，比如登錄頁(yè)面，輸入信息或閱讀信息等地方。
如何識別反面模式?
作為一個(gè)網(wǎng)頁(yè)設計師，你可能很容易就察覺(jué)到設計中明顯出問(wèn)題的地方(比如，一個(gè)下拉菜單在你點(diǎn)擊其中一個(gè)條目之前就收起來(lái))。然而，反面模式中存在的設計問(wèn)題會(huì )更加難以察覺(jué)。雖然一個(gè)專(zhuān)注于在網(wǎng)站上完成某個(gè)任務(wù)的用戶(hù)會(huì )跳過(guò)這個(gè)問(wèn)題，但依然帶有些許不爽。
為了讓這些問(wèn)題現出原形，你最好打開(kāi)網(wǎng)絡(luò )數據統計工具。Google Analytics是不錯的選擇，因為它免費并且很容易安裝。
你需要從測量到的數據中尋找一些問(wèn)題的“癥狀”(有可能是反面模式)，包括：
1、頁(yè)面用戶(hù)訪(fǎng)問(wèn)量的下降
本來(lái)有許多用戶(hù)被引到某一個(gè)頁(yè)面，但突然大量的用戶(hù)消失，這時(shí)你該仔細瞅瞅這個(gè)頁(yè)面出了什么問(wèn)題。問(wèn)問(wèn)自己，用戶(hù)需要某一個(gè)交互行為來(lái)進(jìn)行下一步嗎?他們是不是不知道如何進(jìn)入下一步?整個(gè)頁(yè)面是否是一個(gè)動(dòng)畫(huà)?這些問(wèn)題你必須實(shí)地調查才能知曉。把這些問(wèn)題都記錄下來(lái)以便于之后的用戶(hù)研究和分析。
2、漫無(wú)目的的點(diǎn)擊
如果用戶(hù)在整個(gè)頁(yè)面上到處亂點(diǎn)，說(shuō)明他們根本不知道應該點(diǎn)擊什么。
3、反復的上下滾動(dòng)
如果用戶(hù)在頁(yè)面內不停地上下滑動(dòng)滾動(dòng)條，證明他們找不到自己想要的東西，或者他們壓根不知道想要什么內容。
4、一些常見(jiàn)的反面模式
一個(gè)可用性的問(wèn)題不一定等同于反面模式的癥結，但是有跡可循的。許多設計中的反面模式因為低效的可用性而被當做差勁的想法，實(shí)在很可惜。以下是一些反面模式的案例：
1. 可點(diǎn)擊的元素看起來(lái)卻沒(méi)有點(diǎn)擊的暗示
(譯者注：我們?yōu)槭裁礋o(wú)法區分按鈕是否可點(diǎn)擊?按鈕的顏色與頁(yè)面上的文本顏色相同，沒(méi)有設置為藍色，也沒(méi)有將其像其他文字鏈那樣進(jìn)行按鈕化處理。沒(méi)有加粗也沒(méi)有下劃線(xiàn)。沒(méi)有圖標或箭頭示意，或任何提供可點(diǎn)擊的暗示)
包含的問(wèn)題有：
1. 按鈕太小
2. 文字鏈沒(méi)有視覺(jué)區分(藍色是最好的選擇)
3. 按鈕太過(guò)扁平化以至于無(wú)法告訴用戶(hù)：“哥其實(shí)是一個(gè)按鈕!”
4. 懸停狀態(tài)的缺失可能也會(huì )造成問(wèn)題，比如沒(méi)有使用{cursor：pointer;}的標簽
2. 懸停的問(wèn)題
把信息隱藏在有懸停效果的部件(按鈕或標題)之后是一種規整界面的很方便的辦法，但是要保證鼠標離開(kāi)熱區之后，信息不要隱藏的太快。用戶(hù)的反應沒(méi)有你想象中那么迅速。作為設計師，想象一下，反復做懸停的動(dòng)作以使信息可見(jiàn)是一件多么不愉快的事情。
3. 不統一的語(yǔ)境
比方說(shuō)，一個(gè)頁(yè)面上有三個(gè)不同類(lèi)型的鏈接。一種引導用戶(hù)返回首頁(yè)，一種把用戶(hù)帶出本站，而第三個(gè)打開(kāi)一個(gè)彈窗。這也太令用戶(hù)迷惑了。
4. 沒(méi)有批量的執行操作
在一個(gè)復雜的列表里，如果有需要用戶(hù)執行的功能，比如添加，刪除，或改變列表里元素的狀態(tài)，請務(wù)必提供批量處理的功能!一次一個(gè)的進(jìn)行處理絕對造成相當差的用戶(hù)體驗。
5. 大量?jì)热萑麧M(mǎn)第一屏空間
研究表明，用戶(hù)其實(shí)更集中注意力于閱讀第一屏之后的內容。但由于某些原因所致，把內容盡量堆在首屏的做法依舊存在。所以我的建議是：合理利用空間，把內容區隔開(kāi)來(lái)。
6. 彈跳式導航 (Pogo stick navigation)
彈跳式導航(譯者注：pogo stick的字面意思是彈簧單高蹺，又稱(chēng)“跳跳鼠”)是指用戶(hù)為了完成一個(gè)操作，必須從主導航深入至一兩個(gè)層級，然后回到主導航，從另一個(gè)欄目再次深入。 “彈跳式導航”是由Jared Spool確定命名的，這種導航形式使用戶(hù)需要不斷在層級中深入和返回，就像跳跳鼠一樣跳上跳下。
7. 清空所有錯誤信息
這種模式的情景是，當用戶(hù)填寫(xiě)完成一個(gè)表單，系統告知某項信息不符合要求，而這時(shí)網(wǎng)站自動(dòng)清空所有或某一部分用戶(hù)已輸入的信息，并且需要重新填寫(xiě)。
8. 錯誤的目標頁(yè)面
是指當用戶(hù)完成一系列交互行為后，卻被引入一個(gè)不同的預期之外的頁(yè)面。這種模式經(jīng)常出現在電子商務(wù)網(wǎng)站：用戶(hù)進(jìn)行在線(xiàn)交易之前需要登錄，當他們登陸之后，用戶(hù)并沒(méi)有被引導至進(jìn)行填寫(xiě)信用卡信息的表單頁(yè)，而是被帶到了首頁(yè)。
[網(wǎng)站建設之殤：揭秘用戶(hù)體驗的“反面模式”]相關(guān)文章：
1.網(wǎng)站建設之殤:揭秘用戶(hù)體驗的“反面模式”
【網(wǎng)站建設之殤：揭秘用戶(hù)體驗的“反面模式”】相關(guān)文章：
卓越、當當、京東哪個(gè)網(wǎng)站的用戶(hù)體驗更好一些？07-11
豆瓣的用戶(hù)體驗有何優(yōu)勢07-10
站長(cháng)知道用戶(hù)是怎么瀏覽網(wǎng)站的嗎07-11
提升用戶(hù)體驗的3個(gè)小技巧07-17
唯“懲”求進(jìn)教育之殤作文08-04
網(wǎng)站建設策劃方案07-09
行業(yè)網(wǎng)站建設方案07-18