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

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

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

圍繞UI元素的其他信息

如果用戶(hù)看到一個(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)站切換器，語(yǔ)言切換器等等。

Alt文本

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

UX測(cè)試的價(jià)值

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

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

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

用戶(hù)的意圖

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

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

Alt文本

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

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

元素將如何與頁(yè)面上的其他元素交互

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

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

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

Alt文本

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

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

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

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

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

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

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

結(jié)論和額外的

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

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

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

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