淺談?dòng)脩?hù)體驗(yàn)的“反面模式”
作為網(wǎng)站的一個(gè)用戶(hù),你也許時(shí)常會(huì)發(fā)現(xiàn),使用網(wǎng)站時(shí),有些東西很令人厭煩。例如一個(gè)登錄的表單,或是導(dǎo)航,或者是整個(gè)網(wǎng)頁(yè)應(yīng)用,都有可能讓你難以完成一項(xiàng)任務(wù)。是什么原因讓網(wǎng)站的設(shè)計(jì)產(chǎn)生了這些問(wèn)題?
答案是復(fù)雜的。首當(dāng)其沖的問(wèn)題是,設(shè)計(jì)師們可能忽略了很重要的一點(diǎn):對(duì)實(shí)際用戶(hù)進(jìn)行測(cè)試。這個(gè)問(wèn)題的原因通常是,設(shè)計(jì)師想當(dāng)然的認(rèn)為,他們自己知道如何處理好網(wǎng)站某一部分的交互細(xì)節(jié)。因?yàn)楹芏嘣O(shè)計(jì)師覺(jué)得,他們已經(jīng)在其他案例中看到過(guò)類(lèi)似的交互,原設(shè)計(jì)者肯定已經(jīng)測(cè)試過(guò),為什么多此一舉呢??拿來(lái)就好。于是,我們頻繁查看別人寫(xiě)好的CSS開(kāi)源代碼庫(kù),直接復(fù)制到自己的設(shè)計(jì)中,而并沒(méi)有在真實(shí)場(chǎng)景中測(cè)試。如此一來(lái),我們已經(jīng)在不知不覺(jué)中建立起一個(gè)由既定模板堆砌的作品。
有些模板還比較有效,但有一些就有問(wèn)題了。假如把這些模版看做車(chē)輪,那么經(jīng)常你直接拿來(lái)裝在汽車(chē)上的輪子可能是自行車(chē)輪,驢頭不對(duì)馬嘴。所以沒(méi)錯(cuò),你應(yīng)當(dāng)重新為你的汽車(chē)設(shè)計(jì)車(chē)輪,并且要把輪子裝在車(chē)上試試。
你要考慮的事情:
–?你的用戶(hù)未必與亞馬遜,谷歌的目標(biāo)用戶(hù)相同,甚至與你的競(jìng)爭(zhēng)對(duì)手的用戶(hù)也不同。想弄明白究竟一個(gè)設(shè)計(jì)模板是否有效,你一定需要親自請(qǐng)你的“上帝”(用戶(hù))來(lái)測(cè)試。也許你的他們是迪拜的船員(沒(méi)開(kāi)玩笑!這是我們公司近期的一個(gè)案例)??偠灾?,你的用戶(hù)和其他網(wǎng)站目標(biāo)用戶(hù)的需求是不一樣的。
–?可是,我們不是已經(jīng)了解到人類(lèi)大腦如何與信息進(jìn)行互動(dòng)嗎?
沒(méi)錯(cuò),但是我得重申,這些知識(shí)很宏觀很寬泛。沒(méi)有什么事情是絕對(duì)的。用哈佛大學(xué)最近的一個(gè)實(shí)驗(yàn)舉個(gè)例子吧,在這個(gè)實(shí)驗(yàn)中,研究員們?cè)O(shè)計(jì)的一個(gè)游戲能夠根據(jù)你點(diǎn)擊鼠標(biāo)的速率正確猜測(cè)到你的年齡(譯者注:更多關(guān)于此實(shí)驗(yàn)的信息可參考
http://www.dailymail.co.uk/sciencetech/article-2313388/Age-test-drive-dotty-Online-quiz-reveals-old-REALLY-based-reaction-time.html)。我(指原文作者)也參與了,真是很有開(kāi)拓性的實(shí)驗(yàn)!
處于不同年齡,不同身體條件,不同文化或其他方面不同的用戶(hù)會(huì)有完全不一樣的需求。這就是為什么使用大而籠統(tǒng)的解決辦法會(huì)有適得其反的效果。
什么是反面模式?
反面模式(anti-pattern)是指在實(shí)踐中明顯出現(xiàn)但又低效或是有待優(yōu)化的設(shè)計(jì)模式。你會(huì)在網(wǎng)頁(yè)應(yīng)用或網(wǎng)站看到這種方法,更具體地說(shuō),會(huì)出現(xiàn)在任何一個(gè)用戶(hù)產(chǎn)生行為的地方,比如登錄頁(yè)面,輸入信息或閱讀信息等地方。
如何識(shí)別反面模式?
作為一個(gè)網(wǎng)頁(yè)設(shè)計(jì)師,你可能很容易就察覺(jué)到設(shè)計(jì)中明顯出問(wèn)題的地方(比如,一個(gè)下拉菜單在你點(diǎn)擊其中一個(gè)條目之前就收起來(lái))。然而,反面模式中存在的設(shè)計(jì)問(wèn)題會(huì)更加難以察覺(jué)。雖然一個(gè)專(zhuān)注于在網(wǎng)站上完成某個(gè)任務(wù)的用戶(hù)會(huì)跳過(guò)這個(gè)問(wèn)題,但依然帶有些許不爽。
為了讓這些問(wèn)題現(xiàn)出原形,你最好打開(kāi)網(wǎng)絡(luò)數(shù)據(jù)統(tǒng)計(jì)工具。Google?Analytics是不錯(cuò)的選擇,因?yàn)樗赓M(fèi)并且很容易安裝。
你需要從測(cè)量到的數(shù)據(jù)中尋找一些問(wèn)題的“癥狀”(有可能是反面模式),包括:
頁(yè)面用戶(hù)訪問(wèn)量的下降
本來(lái)有許多用戶(hù)被引到某一個(gè)頁(yè)面,但突然大量的用戶(hù)消失,這時(shí)你該仔細(xì)瞅瞅這個(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í)地調(diào)查才能知曉。把這些問(wèn)題都記錄下來(lái)以便于之后的用戶(hù)研究和分析。
漫無(wú)目的的點(diǎn)擊
如果用戶(hù)在整個(gè)頁(yè)面上到處亂點(diǎn),說(shuō)明他們根本不知道應(yīng)該點(diǎn)擊什么。
反復(fù)的上下滾動(dòng)
如果用戶(hù)在頁(yè)面內(nèi)不停地上下滑動(dòng)滾動(dòng)條,證明他們找不到自己想要的東西,或者他們壓根不知道想要什么內(nèi)容。
一些常見(jiàn)的反面模式
一個(gè)可用性的問(wèn)題不一定等同于反面模式的癥結(jié),但是有跡可循的。許多設(shè)計(jì)中的反面模式因?yàn)榈托У目捎眯远划?dāng)做差勁的想法,實(shí)在很可惜。以下是一些反面模式的案例:
1.?可點(diǎn)擊的元素看起來(lái)卻沒(méi)有點(diǎn)擊的暗示
(譯者注:我們?yōu)槭裁礋o(wú)法區(qū)分按鈕是否可點(diǎn)擊?按鈕的顏色與頁(yè)面上的文本顏色相同,沒(méi)有設(shè)置為藍(lán)色,也沒(méi)有將其像其他文字鏈那樣進(jìn)行按鈕化處理。沒(méi)有加粗也沒(méi)有下劃線(xiàn)。沒(méi)有圖標(biāo)或箭頭示意,或任何提供可點(diǎn)擊的暗示) 包含的問(wèn)題有: 1.?按鈕太小 2.?文字鏈沒(méi)有視覺(jué)區(qū)分(藍(lán)色是最好的選擇) 3.?按鈕太過(guò)扁平化以至于無(wú)法告訴用戶(hù):“哥其實(shí)是一個(gè)按鈕!” 4.?懸停狀態(tài)的缺失可能也會(huì)造成問(wèn)題,比如沒(méi)有使用{cursor:pointer;}的標(biāo)簽 2.?懸停的問(wèn)題 把信息隱藏在有懸停效果的部件(按鈕或標(biāo)題)之后是一種規(guī)整界面的很方便的辦法,但是要保證鼠標(biāo)離開(kāi)熱區(qū)之后,信息不要隱藏的太快。用戶(hù)的反應(yīng)沒(méi)有你想象中那么迅速。作為設(shè)計(jì)師,想象一下,反復(fù)做懸停的動(dòng)作以使信息可見(jiàn)是一件多么不愉快的事情。 3.?不統(tǒng)一的語(yǔ)境 比方說(shuō),一個(gè)頁(yè)面上有三個(gè)不同類(lèi)型的鏈接。一種引導(dǎo)用戶(hù)返回首頁(yè),一種把用戶(hù)帶出本站,而第三個(gè)打開(kāi)一個(gè)彈窗。這也太令用戶(hù)迷惑了。 4.?沒(méi)有批量的執(zhí)行操作 在一個(gè)復(fù)雜的列表里,如果有需要用戶(hù)執(zhí)行的功能,比如添加,刪除,或改變列表里元素的狀態(tài),請(qǐng)務(wù)必提供批量處理的功能!一次一個(gè)的進(jìn)行處理絕對(duì)造成相當(dāng)差的用戶(hù)體驗(yàn)。 5.?大量?jī)?nèi)容塞滿(mǎn)第一屏空間 研究表明,用戶(hù)其實(shí)更集中注意力于閱讀第一屏之后的內(nèi)容。但由于某些原因所致,把內(nèi)容盡量堆在首屏的做法依舊存在。所以我的建議是:合理利用空間,把內(nèi)容區(qū)隔開(kāi)來(lái)。 6.?彈跳式導(dǎo)航?(Pogo?stick?navigation) 彈跳式導(dǎo)航(譯者注:pogo?stick的字面意思是彈簧單高蹺,又稱(chēng)“跳跳鼠”)是指用戶(hù)為了完成一個(gè)操作,必須從主導(dǎo)航深入至一兩個(gè)層級(jí),然后回到主導(dǎo)航,從另一個(gè)欄目再次深入?!皬椞綄?dǎo)航”是由?Jared?Spool確定命名的,這種導(dǎo)航形式使用戶(hù)需要不斷在層級(jí)中深入和返回,就像跳跳鼠一樣跳上跳下。 7.?清空所有錯(cuò)誤信息 這種模式的情景是,當(dāng)用戶(hù)填寫(xiě)完成一個(gè)表單,系統(tǒng)告知某項(xiàng)信息不符合要求,而這時(shí)網(wǎng)站自動(dòng)清空所有或某一部分用戶(hù)已輸入的信息,并且需要重新填寫(xiě)。 8.?錯(cuò)誤的目標(biāo)頁(yè)面 是指當(dāng)用戶(hù)完成一系列交互行為后,卻被引入一個(gè)不同的預(yù)期之外的頁(yè)面。這種模式經(jīng)常出現(xiàn)在電子商務(wù)網(wǎng)站:用戶(hù)進(jìn)行在線(xiàn)交易之前需要登錄,當(dāng)他們登陸之后,用戶(hù)并沒(méi)有被引導(dǎo)至進(jìn)行填寫(xiě)信用卡信息的表單頁(yè),而是被帶到了首頁(yè)。 檢查你現(xiàn)在正在做的項(xiàng)目中是否出現(xiàn)這樣的反面模式,或與其相關(guān)的癥狀。找一個(gè)朋友或者沒(méi)有參與到項(xiàng)目中的合作者來(lái)走查一下網(wǎng)站,看看會(huì)發(fā)生什么。他們是否會(huì)在網(wǎng)站的某處感到不爽?用戶(hù)體驗(yàn)不順暢的地方往往是反面模式的前兆。 以上的例子只是冰山一角!你在你設(shè)計(jì)的網(wǎng)站中還發(fā)現(xiàn)了哪些反面模式? 原文作者及出處: Sarah?Kahn,May?8th,?2013 http://webdesign.tutsplus.com/articles/user-experience-articles/the-world-of-ux-anti-patterns/作業(yè)
(微博UDC原創(chuàng)博文,轉(zhuǎn)載請(qǐng)注明出處)
不錯(cuò)。