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

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

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

圍繞UI元素的其他信息

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

Alt文本

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

UX測試的價值

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

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

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

用戶的意圖

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

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

Alt文本

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

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

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

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

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

考慮另一個例子。

Alt文本

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

如何避免意外的互動

使用延遲-添加setTimeout和clearTimeout超時值200ms到mega菜單將解決這個問題。用戶甚至不會注意到這種輕微的延遲，用戶會覺得他們已經(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)行測試，這些問題是完全不會被發(fā)現(xiàn)的。

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

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

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