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

古人說，要抓住先生的心，要先抓住他的胃。
雖然現在時代已經不同了，以前是男主外、女主內，現在則常是雙方都要工作，所以就不一定是鐵則了 (本人也沒有在怕這句話的 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 生活著的購物車只要一頁就可以完成購買流程, 包括會員註冊在內僅需五個欄位

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

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

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

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

第九點: 視覺上的協助

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

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

第十點: 提供 確認頁面

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

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

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

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

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

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

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