上帝就在細節中,Amazon 怎麼讓「下拉式選單」反應超級快

評論
評論

amazon-box-bench

如果你以前覺得 Amazon 這家公司不太會在使用者體驗下功夫,這篇文章可能會改變你的看法。

Amazon 首頁 的左上角有一個商品分類瀏覽的下拉式選單。當滑鼠從選單中的選項上滑過時,子選單的顯示速度超級快。我們可以看一下:

amazon 1

這個顯示速度基本上是與滑鼠移動同步的,但是絕大多數網站的下拉式選單在顯示子選單時會有一定的延遲,例如:

amazon 2

這個延遲反應是必須的,因為如果沒有,當你想把滑鼠從一個主選單挪到一個子選單時,子選單會消失。就像這樣:

amazon 3

 

但是 Amazon 的下拉式選單沒有這個延遲,而且子選單也不會在不應該的時候消失。它是怎樣做到這一點的呢?答案是透過偵測滑鼠移動的方向和軌跡。

 

amazon 4

想像將滑鼠當前的位置、子選單的左上角和左下角三個點連成一個三角形。如果滑鼠在這個三角形的範圍之內移動,那使用者很有可能是想把滑鼠從主選單移到子選單上,所以就不應該立刻更新子選單。但是如果滑鼠移動到這個三角形之外,則可以馬上更新子選單。這就是 Amazon 首頁反應速度超快的下拉式功能表背後的演算法。

上帝就在細節中(God is in the details)

揭開一個前端細節的秘密,我們看到的不僅是一個精妙的演算法,而是一家大型網路公司對於產品和使用者體驗的態度。Amazon 的數百億市值有多少是從這些很小很小,但是很明顯有用心的產品細節中積累出來的呢?

如果想把這個選單功能運用到你的網站上,這是 Khan Academy 工程師 Ben Kamens 寫的 jQuery 程式

如果你覺得這個很神奇,很想做這方面的工作,或是覺得這沒有什麼,你的 UX 設計比這個好,可以考慮給研發出這個細節的 Amazon 團隊([email protected])投一份履歷,因為他們正在招募新員工。

 

原文出處:Breaking Down Amazon's Mega Dropdown

延伸閱讀:[HCI] 費茲定律 Fitts’ Law 與使用者介面設計

相關文章

伸手就能「抓」到影中物,麻省理工發表虛實互動新技術

影片這種媒體形式,觀眾大部分還是被動接收訊息,嚴格來說本身並不算互動性的媒介,但美國麻省理工學院的 CSAIL 實驗室,讓觀眾可以伸手「摸」到影片中的物體,甚至可以進一步和影片中的物件互動,而且不需要用到綠幕。

召喚海歸!政府祭大補貼

科技部長陳良基昨(18)日宣布啟動「海外人才歸國方案」,預計年底前吸引 100 名、45 歲以下海外科技博士回台服務,以一年為期,科技部將補助 150 萬元生活費。

寄給早期投資的信怎麼寫?Y Combinator 合夥人教你三句話表達重點

Y Combinator 的合夥人 Michael Seibel 近期在部落格上發表了一篇文章,簡要地描述了新創寄給投資人的信該掌握哪些重點,就讓我們一起來看看在矽谷投資人眼中,怎麼樣的信才能順利吸引投資目光吧。

評論