「十個讓購物車更好用的小提點」

分類: 技術分享 作者: suzy

9 4 月 2009

這篇原文文章連結是從 Jace 的 Email 中得來的:
10 Tips to Design Usable Shopping Carts

如何設計購物網站讓線上購物變得更簡單、更方便、更容易使用、更貼近使用者的心!
本篇將原文提出的十點簡單列出並加上一些個人心得。

古人說,要抓住先生的心,要先抓住他的胃。
雖然現在時代已經不同了,以前是男主外、女主內,現在則常是雙方都要工作,所以就不一定是鐵則了 (本人也沒有在怕這句話的 XD)。

當一個公認的完美老婆,如果不會做愛心便當,好像就不能是100分一樣。
同樣的,我們對做好網站的心意就好比一個想要當100分的好老婆一樣。
當我們在對一件事力求完美時(想要抓住顧客的心時),只要是能做得到,一定都會盡力去達成的。

因此當我們看到了一篇:標題為 10 Tips to Design Usable Shopping Carts 就不能視而不見,一定要進去看一下。

這篇文章選了幾個外國知名購物網站作圖例,找出了共通點並加以分析。
作者認為:這十點是可以無形中幫助使用者更順暢地完成購物的重點。

第一點:購物網站需兼具「迷你購物車」及「購物車詳細頁」

放置「迷你購物車」在每一頁 固定 而且 顯眼 的地方 。

我認為這個功能雖然非必要,但是好處多多。

有了「迷你購物車」使用者可以隨時 確認自己買了什麼 或 買了多少錢。這對預算上有限制,或是正在比較多個產品的使用者來說,應該會滿方便的。不用隨時轉到「購物車詳細頁」看買了些什麼。

我還有看過另一個購物網站:它把目前使用者購買的產品的重量同步計算出來,並在「迷你購物車」框框中告訴使用者”再買0.8公斤的產品的運費跟目前的運費是一樣的唷”。這個方法 有效的刺激消費、又同時便利了使用者 (真聰明)。

第二點:購物流程 務求清楚明確!

如果可以的話,當然在一頁完成所有的流程最好,
但如果比較多頁面,那一定要 Step by Step (eg 上方畫個步驟圖)。

我覺得 必要時還可以再加上”再一步就完成了”這樣鼓勵性的字眼。

第三點:「迷你購物車」旁邊要有個連結(icon佳)連到「購物車詳細頁」

在「迷你購物車」旁邊加一個 購物車icon 連結到「購物車詳細頁」。因為icon容易辨認、也可以吸引使用者去點選。

第四點:把「加入購物車」及「結帳」按鈕 放在顯眼的地方

當我們在設計按鈕的花樣時,也同時要顧及 夠不夠明確(可不要太花俏反而誤導了),讓使用者可以一眼就看到。

第五點:購物明細 格式要容易讀 且用 table based 樣式

文章說建議使用 table,要讓使用者容易讀,並且避免用 太花的背景 或是 瀏覽器沒有支援的特殊字型(eg 華康娃娃體之類的)。

我個人覺得 如果 ul/ol 用得好,也是可,只是在 css 花的心力就必須比平常小心再小心,因為這頁很重要。歪掉的陳列,可能會讓使用者 理解錯誤 而放棄購物。

第六點: 需要有「繼續購物」鈕

要有回去上一頁的「繼續購物」鈕

這應該大部份的購物車都有了吧。特別是那種產品類別很多的更需要。
而且導覽(Navigation) 或 麵包屑(Breadcrumbs) 也要規劃清楚,因為使用者對 產品類別 跟 產品 在哪裡?怎麼找到剛剛的地方?一定不會比做網站的我們清楚。

第七點: 避免太多欄位

欄位越精簡越好。

Lativ 生活著的購物車只要一頁就可以完成所有的動作, 連會員註冊只要五個欄位

圖片說明: Lativ 生活著的購物車只要一頁就可以完成購買流程, 包括會員註冊在內僅需五個欄位

大部份的使用者都沒有耐心去填一堆欄位,尤其是欄位多、檢核又查很嚴的表單。
(我最痛恨的是 欄位多,檢核時還不會幫忙記憶要重填,而且錯誤訊息還是那種缺哪幾欄不一次講清楚要一個一個來那種)
這麼沒效率的表單,只會讓使用者卻步,只要使用者當時對產品有一丁點的猶豫,可能因此就馬上少了一個訂單。

這一點我認為這是最重要的一點,只要程式員一個小小的 Javascript Error 就可能讓整個購物流程全盤失敗。

第八點: 儘可能的用各種方式提供協助

一些輔助的文字 ,
例如在文字欄先輸入一個範例,讓使用者馬上瞭解要填什麼,或是在旁邊說明 類似信用卡背後的認證三碼要如何看等貼心的提示。

734-zakka

第九點: 視覺上的協助

有時候用圖片表示是最清楚的。目的是讓圖片來輔助文字 (但是不要讓使用者分散注意力的圖片為宜 太大的圖或太多圖 過與不及反而都沒有幫助)。

像某一些特定類型的產品,它們的圖片辨識度比文字來的高 像是 唱片 或是 攝影照片。
文章作者舉例:
把產品圖片拉到購物車(利用拖拉的效果) 取代 加到購物車鈕 (不用換頁)。
這樣可以增加使用者的感官享受 又可以讓整個網站的質感提升 。

第十點: 提供 確認頁面

「確認頁面」是在 使用者按下「付款」 前 提供給使用者檢查資料有無填錯,並再一次確定他們買的東西對不對。

Nani衣著遊樂園的確認頁面

圖片說明:Nani衣著遊樂園的「確認頁面」

文章作者說:
「確認頁面」一定要有「修改鈕」讓使用者可以發現並修正錯誤 。
以及「取消鈕」讓使用者可以放棄這一次的購買 (個人認為這個鈕可以小一點 :D)

「確認頁面」必需顯示所有的資訊 包括 運送費用 需要多少天 還有 手續費 等等。

結論與心得:
這篇文章給我的感想是,購物網站何其多,但是能擠身於眾人之上必有其理由。
當我們愉快地完成一次購物後,除了在興奮的期待收到商品的日期之餘,偶爾也可以稍微佇足回想,它的過人之處。
往往一些細節就是抓住客人的心的關鍵。

還有,其實以上的提點我相信,我們做過的網站都有達到該有的標準,因為哇寶是專業的^^b。
但是,有時候那是因為我們做習慣了,所以做出這些功能會覺得是理所當然的... Art 給我們畫面,我們就照切照著寫程式...
但是其實這其中是包涵了很多我們看不到的 Art (or PM) 辛苦與客戶多次腦力激蕩(Brain Storming)討論出來的心血結晶。
這是在後來自己有機會跟客戶面對面討論,什麼頁面要放什麼功能的時候,才體會到的。
而且我們現在覺得是理所當然的功能,也許以後又會有更好用的功能出來或是又有對使用者更好的東西T_T
因此,我們也要常常保持著敏銳的流行嗅覺,才可以滿足客戶胃口跟充份瞭解當下的消費者想要什麼。

最後的最後的心得是:做網站時可以細細想這些東西真的很好玩。嘿嘿。

我要留言

關於這裡

這個部落格分享了哇寶在電子商務領域的技術及資訊,希望能讓更多人一起為台灣的網路產業加油。