一個 UX 的想法：知道你將會移動到的地方（譯文）

查看原文：A UX Idea: Know where they are aiming!

我個人不擁有這個文章的版權，僅僅只是把英文翻譯過來，如有錯漏，請指正。

另外，知乎不支持 GIF 插入，請點解原網頁看圖片。

如果你是一個 Web 開發者或者設計師，你應該會知道 :Hover 這個選擇器。瀏覽器是會知道鼠標的位置的，並且會添加 CSS 規則，如果你定義過的話。

這在可用性具備有兩個顯著特徵。一個是你可以創造一個下拉菜單來收納很多不同的東西；另一個，你也可以自動顯示一個浮層，來解釋一個按鈕的作用。

無論如何，有一個缺點很難忽視。有些時候，你讓你的用戶移動鼠標去一個目標上。看看下面這個例子：

正如你所見，在 Gmail 中，你需要在「＋」號上懸停，才可以去你「^.^」這個表情按鈕。然而，又為了「默認全屏」，你需要點擊右下角插入符號，然後才可以前往你想點擊的鏈接。下方是 紐約時報 的網站，為了顯示菜單列表，你需要點擊 Sections 按鈕，然後才可以前往別的頁面。

在各種各樣的網站，都可以找到這些例子。老實說，我們做錯了。這是和「最少努力原則」衝突的，因為我們創造了更長的移動路徑和用戶需要更多的時間才可以探索到他需要的目標。這是一個問題，用戶總是很匆忙的，但是我們阻止了他做的更快的可能性。

所以，我們可以使鼠標移動路勁更短一些，在分析哪些元素才是用戶願意去懸停或者點擊的之後。

現在，看看新的方法在「紐約時報」的例子上：

正如你所見，我們寫了一個演算法，當鼠標在移向菜單按鈕的過程中，我們就知道你就點擊菜單按鈕，以減少需要的鼠標移動路勁。在這個情況下，用戶將至需要更少的時間，來完成他的任務。

jQuery.aim，這是我創造的一個插件。它只是計算鼠標可能會去的地方，在用戶點擊之前，調用對應的事件。

這裡你可以看到一個 DEMO，下拉菜單會在鼠標點擊之前，就做出相應，如果鼠標路勁的確要前往那裡的話。我將此稱為「Anticipator」元素。如果鼠標移動得更快，這個計算的路線也更大。

圓圈顯示了用戶鼠標路勁的計算結果。

這個插件適合與各種菜單、下拉菜單、彈出框或者那些自動隱藏和顯示的元素。如果你想看更多的例子，反饋 Bugs 和給予意見，請見 Github 項目頁面吧。

我是從亞馬遜的下拉菜單和 Teehan+Lax 網站獲得這個靈感的。

註：插件仍然是測試階段，請不要用在你的項目上。他只是寫了幾個小時，有很多 Bug 和性能問題。