在做前端項(xiàng)目時(shí)，我們通常會(huì)得到描述UI元素外觀和功能的設(shè)計(jì)、規(guī)范和用戶故事。我們使用這些設(shè)計(jì)和規(guī)范來創(chuàng)建UI，然后啟動(dòng)項(xiàng)目。

這很好，但是用戶通常不會(huì)知道單個(gè)元素的功能。他們將依賴于:

他們的本能和經(jīng)驗(yàn)，也就是他們的期望

圍繞UI元素的其他信息

如果用戶看到一個(gè)漢堡菜單圖標(biāo)，他們會(huì)希望在點(diǎn)擊圖標(biāo)時(shí)出現(xiàn)某種主菜單。但是如果他們看到網(wǎng)站標(biāo)識(shí)旁邊有一個(gè)“箭頭向下”的圖標(biāo)，他們就不確定當(dāng)他們點(diǎn)擊它時(shí)會(huì)發(fā)生什么。它可以是一個(gè)主菜單，網(wǎng)站切換器，語言切換器等等。

Alt文本

在“Libreria”下面有更多的類別(用戶需要滾動(dòng))，但是用戶一開始不會(huì)知道

UX測試的價(jià)值

這就是用戶體驗(yàn)測試如此重要的原因。你團(tuán)隊(duì)中的每個(gè)人，包括你自己，從第一行代碼到最后一行代碼都知道網(wǎng)站是如何運(yùn)行的，當(dāng)然，網(wǎng)站上的每一個(gè)功能和交互都是清晰的，因?yàn)槭悄銊?chuàng)建的。

讓不太熟悉你的項(xiàng)目的人來檢查可以產(chǎn)生有價(jià)值的數(shù)據(jù)，并有助于查明瓶頸和可用性問題。

我目前提供前端和用戶體驗(yàn)審計(jì)服務(wù)，所以如果你感興趣，請檢查它。

用戶的意圖

根據(jù)用戶之前的經(jīng)驗(yàn)，用戶對UI應(yīng)該如何工作有自己的期望，UI本身如何呈現(xiàn)，是否一致。

但是他們在網(wǎng)站上的意圖是什么呢?讓我們看一下這個(gè)例子。

Alt文本

用戶在使用了菜單上方的搜索之后，打算使用左邊的側(cè)邊欄導(dǎo)航(“Shop by”部分下的分類過濾器)。用戶然后移動(dòng)他們的鼠標(biāo)向下，但百萬菜單激活反應(yīng)意外懸停和覆蓋整個(gè)左導(dǎo)航!用戶現(xiàn)在必須關(guān)閉超級菜單，這樣他們才能使用他們打算使用的元素。

所以你可以看到，即使我們在創(chuàng)建UI元素時(shí)考慮了規(guī)格和設(shè)計(jì)，我們?nèi)匀恍枰紤]更大的前景:

元素將如何與頁面上的其他元素交互

UI元素將如何響應(yīng)正確的用戶意圖

基本上，我們希望確保在與UI交互時(shí)不會(huì)出現(xiàn)意外和意外，我們希望確保UI僅在用戶期望時(shí)才對用戶交互做出響應(yīng)。

考慮另一個(gè)例子。

Alt文本

紅色箭頭表示用戶將光標(biāo)從菜單移動(dòng)到鏈接時(shí)的自然路徑，但這將導(dǎo)致菜單更改為另一子菜單，因?yàn)樗鼤?huì)在懸停時(shí)做出反應(yīng)。綠色箭頭表示開發(fā)人員創(chuàng)建并知道如何使用的安全路徑。但這與使用此UI元素時(shí)的用戶體驗(yàn)和意圖不一致。

如何避免意外的互動(dòng)

使用延遲-添加setTimeout和clearTimeout超時(shí)值200ms到mega菜單將解決這個(gè)問題。用戶甚至不會(huì)注意到這種輕微的延遲，用戶會(huì)覺得他們已經(jīng)完全控制

考慮可交互區(qū)域——交互區(qū)域可能太寬或太窄。確保用戶可以激活懸停功能的尺寸是最佳的。

確保有足夠的信息引導(dǎo)用戶進(jìn)入正確的流程，并教他們?nèi)绾问褂肬I元素

尊重用戶意圖并滿足他們期望的導(dǎo)航

下面是我創(chuàng)建的導(dǎo)航，它利用了延遲和優(yōu)化的交互區(qū)域，以確保導(dǎo)航響應(yīng)用戶意圖。

結(jié)論和額外的

我們已經(jīng)看到了用戶的期望和意圖是如何揭示我們網(wǎng)站上糟糕的用戶體驗(yàn)問題的。如果沒有完全了解網(wǎng)站功能和代碼的人進(jìn)行測試，這些問題是完全不會(huì)被發(fā)現(xiàn)的。

我們還看到了如何將用戶意圖考慮在內(nèi)，并創(chuàng)建用戶體驗(yàn)很棒、使用起來令人愉快的UI元素。

我建議閱讀Steve Krug的《不要讓我思考》，以更好地理解用戶意圖和web UX。

這些文章是用咖啡做燃料的。所以如果你喜歡我的工作并且覺得它有用，考慮給我買一杯咖啡!我真的很感激。