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

0 評(píng)論 5260 瀏覽 0 收藏 8 分鐘

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

首頁和導(dǎo)航

首頁Flash

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

豐富的彈出菜單

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

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


American Eagle Outfitters展示了特色產(chǎn)品和促銷信息(上圖);Best Kiteboarding展示了一個(gè)產(chǎn)品圖片,當(dāng)你把鼠標(biāo)放在不同類別上時(shí)產(chǎn)品圖片也隨之改變(下圖)。

站內(nèi)搜索豐富的自動(dòng)提示
關(guān)于這點(diǎn)之前的文章已經(jīng)提過,許多消費(fèi)者軟件站點(diǎn)提供了一個(gè)自動(dòng)提示功能,其中所謂的“豐富”是指附加的圖片,文本信息和促銷區(qū)域。以下是一個(gè)Apple Store的例子

分類頁

分類預(yù)覽
零售商們用了許多方法利用鼠標(biāo)懸停功能區(qū)改善分類頁面。其中一種方法就是簡單的圖片放大功能用來細(xì)節(jié)預(yù)覽,像Bidz.com和Neiman Marcus

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


Land’s End和Brooks Brothers允許你轉(zhuǎn)換縮略圖顏色。

產(chǎn)品頁

產(chǎn)品圖像
許多站點(diǎn)都提供鼠標(biāo)懸停效果用來轉(zhuǎn)換顏色,產(chǎn)品展示或者放大……

但是還有許多創(chuàng)造性的事是你能做的。

產(chǎn)品頁里的分類頁展示

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

庫存情況

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

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

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

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

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

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

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

交叉銷售預(yù)覽
Barnes and Noble讓你能夠預(yù)覽到產(chǎn)品建議價(jià)格、詳細(xì)說明甚至讓你能夠直接加入購物車。

結(jié)賬

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

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

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

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 目前還沒評(píng)論,等你發(fā)揮!