Chrome Browser新分頁的微互動


我前一兩天忽然發現一個Chrome瀏覽器的微互動!Google設計的細膩之處。

在開啟新分頁時的頁面,會有幾個使用者常用網頁縮圖小塊,如下圖,當游標Hover到黃色區域時,關閉的icon會約慢1至0.5秒才出現,當游標Hover到紅色區域時,關閉的icon會立即出現。

當游標Hover到黃色區域時,關閉的icon會略慢出現,當游標Hover到紅色區域時,關閉的icon會立即出現

為什麼會有這樣的差異呢?我想因為多數使用者到新分頁,會Hover到網站縮圖上,主要就是想要進入該網站,因此會馬上點擊。如果這時候馬上出現X的關閉icon,似乎就有些惱人,因為多數人並不是想要關閉才去hover。而且關閉在右上角這件事,應該知道之後,就會馬上記得,所以重要性降低許多。

而真的需要關閉的使用者,往往滑鼠可能就習慣直接進入紅色區塊,X關閉的icon馬上也會顯現,沒有時間遲緩,所以不會造成他們的困擾。

有時間的遲緩,那麼第一次的使用者,不就會很容易沒注意到?第一次的使用者通常在摸索期,動作相對遲緩,所以當他們第一次使用的時候,可能會在縮圖上面停留1至0.5秒的時間,所以還是會讓他們注意到這個功能


發現Chrome這個祕密之後,我就稍微看一下其他家瀏覽器,Firefox就沒有這樣的時間延遲了,兩個球體在Hover時會馬上出現,且在視覺上,略顯干擾。

Firefox沒有時間延遲,兩個球體在視覺上,略顯干擾

我在想Google在做這個設計的時候,可能也有偷偷收集過資料或是研究,不同深淺使用經驗的使用者,意圖採取一些行為時,滑鼠遊標通常會停留在哪?停留多久,才再定義出延遲的時間應該多久,才比較適當。

總之,這是個有趣的小發現,大家可以試玩看。身為互動設計師,平時也應保有對產品觀察的敏銳度,去發現一些互動設計的小細節,並思考背後可能的考量。

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.