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

3周帶你玩轉Excel!在行第一行家手把手帶學+作業實戰+答疑輔導,升職加薪快人一步,了解一下>>

我不得不承認在網頁設計中我是一個鐘情于“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是什麼。
你也能夠用這個方法解釋政策或者提供指示。

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

給作者打賞,鼓勵TA抓緊創作!
評論
歡迎留言讨論~!