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

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

他們的本能和經驗，也就是他們的期望

圍繞UI元素的其他信息

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

Alt文本

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

UX測試的價值

這就是用戶體驗測試如此重要的原因。你團隊中的每個人，包括你自己，從第一行代碼到最后一行代碼都知道網站是如何運行的，當然，網站上的每一個功能和交互都是清晰的，因為是你創(chuàng)建的。

讓不太熟悉你的項目的人來檢查可以產生有價值的數據，并有助于查明瓶頸和可用性問題。

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

用戶的意圖

根據用戶之前的經驗，用戶對UI應該如何工作有自己的期望，UI本身如何呈現，是否一致。

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

Alt文本

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

所以你可以看到，即使我們在創(chuàng)建UI元素時考慮了規(guī)格和設計，我們仍然需要考慮更大的前景:

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

UI元素將如何響應正確的用戶意圖

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

考慮另一個例子。

Alt文本

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

如何避免意外的互動

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

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

確保有足夠的信息引導用戶進入正確的流程，并教他們如何使用UI元素

尊重用戶意圖并滿足他們期望的導航

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

結論和額外的

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

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

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

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