用javascript懸停效果改善你的在線商店的12種方法

0 評論 5172 瀏覽 0 收藏 8 分鐘

我不得不承認在網頁設計中我是一個鐘情于“hover”或者“mouseover”功能(即懸停效果)的狂熱分子。任何一個點擊或者彈出窗口都會吸引作為消費者的我。我注意到一些零售商創造性地利用這種效果,遠不止一般的圖片放大或者彈出菜單。以下是我大愛的一些收集。

首頁和導航

首頁Flash

Barnes-and-Noble在首頁的flash橫幅上增加了產品詳細信息和加入購物車按鈕,當你把鼠標放在商品上就能看到這種效果。大多數的零售商都只是在圖片上放上超鏈接,但懸停效果這種方法節約了我跳轉頁面的時間。我可以知道我是否對自己要點擊的商品感興趣。

豐富的彈出菜單

彈出菜單允許訪問者不用點擊便能夠看到分類和

子分類,能夠更簡單快捷地定位商品,扁平化你的網站架構(通過一次點擊便能從首頁到達更多的頁面)。這些做法都是十分常見的,但我發現的一些你也許稱之為“豐富的彈出菜單”是比較特別的,他們包含了促銷信息或者產品的所旅途。比如:


American Eagle Outfitters展示了特色產品和促銷信息(上圖);Best Kiteboarding展示了一個產品圖片,當你把鼠標放在不同類別上時產品圖片也隨之改變(下圖)。

站內搜索豐富的自動提示
關于這點之前的文章已經提過,許多消費者軟件站點提供了一個自動提示功能,其中所謂的“豐富”是指附加的圖片,文本信息和促銷區域。以下是一個Apple Store的例子

分類頁

分類預覽
零售商們用了許多方法利用鼠標懸停功能區改善分類頁面。其中一種方法就是簡單的圖片放大功能用來細節預覽,像Bidz.com和Neiman Marcus

其他的站點則另辟蹊徑,像Blue Nile展示的是產品信息或者圖片和信息二者兼有。


Land’s End和Brooks Brothers允許你轉換縮略圖顏色。

產品頁

產品圖像
許多站點都提供鼠標懸停效果用來轉換顏色,產品展示或者放大……

但是還有許多創造性的事是你能做的。

產品頁里的分類頁展示

American Eagle Outfitters允許你在產品頁導航到分類頁并直接顯示,讓你不需要點返回按鈕。正如以下展示的,你能夠“view all shorts”(查看所有短褲)。

庫存情況

Gap展示了該尺寸或者顏色是否有貨,在產品圖片上顯示的很清楚。

(去Gap官網看了下沒找到該效果= =)

條款和政策
需要定義特征或者工業術語?看看Crutchfield 怎么做的吧。

同樣的,Virgin Mobile不需要彈出窗口便展示了隱私條款。(這個網站很有意思,大多數都是用flash做的,很華麗)

加入購物車錯誤處理
在加入購物車之前顧客很容易忘記選擇尺碼、顏色或者其他必須的選項。零售商們常常將使購買按鈕不可用直到所有選擇都合適或者重新刷新頁面提示錯誤信息。(這個現在已有很多改善了)。這兩種方式都會使得顧客困擾。處理這些錯誤的最好方法便是在購物按鈕旁展示錯誤信息,而不是在頁面頂部用紅字提示,因為那里比較不容易被注意到。

通過用戶行為學,如果你漏選了一個尺寸或者顏色,你馬上注意到的地方是在加入購物車按鈕上。

貨幣轉換
這個站點用懸停效果向你展示貨幣轉換值。你可以不用選擇一個貨幣而直接看到它們,并且不需要頁面加載。

交叉銷售預覽
Barnes and Noble讓你能夠預覽到產品建議價格、詳細說明甚至讓你能夠直接加入購物車。

結賬

政策和指示
Office Max用懸停效果解釋MaxPerks ID和Tax Exempt ID 意味著什么。

滾動找出MaxPerks ID和Tax Exempt ID是什么。
你也能夠用這個方法解釋政策或者提供指示。

這些都只是表面文章。頁面上的任何需要點擊或者彈出窗口的功能都能用鼠標懸停效果解決,這樣不僅能夠提供一個良好的用戶體驗,并且能夠使你的站點更時尚。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!