如果使用即時通訊 UI 來設計購物車結帳流程，會是什麼樣的感覺？

昨晚在填寫一些網路表單覺得好枯燥乏味時，突然標題靈光一閃，於是決定在放國慶連假前，好好的集中精神來實做、初探一下，否則放完了假可能會是一條活屍行走於人間…

而因為是一時興起，所以決定能不動流程就不動的前提之下來進行，流程參考為 P 家 APP 從檢視購物車到結帳的流程：

1. 購物車清單(可調整商品數量)
2. 付款方式選擇(可調整付款方式細項)
3. 購買人、發票與收貨人資料(可編輯)
4. 送出訂單。

當然，我不精於做購物網站，這個流程中一定還有很多特殊的「眉角」我沒注意到和不知道的，正在閱讀此篇文章的你，不管你是在這方面領域的高高手或是喜愛購物的捧油們，只要認為有問題或值得討論的地方就可以框起來留言或是在最底下留言，大家一起研究研究。

如果你準備好了就可以隨時開始閱讀，希望讀完後你會覺得我可以。

購物車清單 與 調整商品數量

左圖：購物車清單 ; 右圖：編輯購物車

開始總是美好的，畫完之後完全覺得沒問題…

清單中拋棄直接在裡面編輯數量的做法，因為版面會不夠用，所以乾脆直接用一顆修改按鈕。模糊背景後利用卡片式手法顯示編輯頁，單項數量增減使用大顆按鈕點擊，數字則不能歸 0 ，有看過一種方式是歸 0 後，會跳出警告視窗說明歸 0 會從購物車刪除，但我想讓這個品項必須按刪除才能刪除，讓商品盡可能留在畫面上，也許還有從 0 到 1 的機會(風險則是使用者會不會很想直接按刪除…)。

調整後回到左圖清單中，清單立即刷新，總額數字擺在結帳按鈕左邊，利用簡單的設計手法讓他看得清，但又不要一直注意總金額，畢竟，買到自己想要跟需要的產品，不管花多少應該都值得 。

右圖上方的總額捲動時會縮小並固定於最上方。另外卡片以垂直滑動，因為使用左右滑動可能會誤觸數量+- 按鈕，而且比起橫向滑動，我覺得垂直滑動更得心應手，而且不會有左右手問題。

付款方式選擇

左圖：選擇付款方式 ; 右圖：選擇信用卡分期付款。

畫到這裡其實已經開始覺得我幹嘛自己踩這個坑，這裡超煩躁的。

當上一步按結帳之後，訊息欄先跳出總金額，接著詢問付款方式，因為我們是用即時通訊的設計方法，所以詢問的語氣可以展現親和力。

因為規定自己在一天內完成這個實驗，所以直接挑信用卡實作，先不考量其他付款方式，但不管如何，這裏我想來想去都需要用第二畫面來實作，否則一問一答之下很容易讓訊息過多，也就分散購物的注意力了。另外則是用第二畫面之後，可以保留日後的擴充性。

接著是最底下「稍等再…要買」那個位置，我一直在思考什麼時候要讓使用者說話，如果有 AI 的介入，我可能就會把使用者文字輸入框永遠顯示。如果沒有，基於循循善誘的原則，放顆按鈕讓他可以隨時離開結帳流程，但導引他到可以買更多東西的地方去，比如可以引導去熱門商品逛逛看。

右圖左下角則提供更換付款方式。右下角按下確定後，則進入下一個對話。

購買人、發票方式與收貨人資料及其資料編輯

左圖：購買人資料 ; 右圖：購買人資料編輯。

如果先前已經購物過，則直接顯示購買人資訊，確定無誤則直接輸入信用卡背後 3 碼。若先前沒有購買過或是想修改資料，則使用第二畫面填寫，底下仍舊保留兩顆按鈕，可以取消修改或是按確定直接進到下一步。

這裡思考很久的地方是背面 3 碼要不要統一輸入形式的問題，但最後還是決定在修改時可以直接輸入，就不需要剛從傳統表單填完又要以即時通訊的輸入方式填那 3 碼，雖然分兩種輸入方式，但我覺得這樣會是比較好的。

左圖：發票處理方式 ; 右圖：使用者輸入統一發票

發票則因為相對簡單，捐贈可以使用第二畫面來挑選與輸入愛心碼，統一發票則是直接使用輸入框(右圖)，並提供一個取消按鈕，讓他可以返回。如果已經輸入了統一發票(下方左圖)，則取消會變成修改按鈕，提供修改機會。

左圖：收貨人資料 ; 右圖：收貨人資料編輯。

終於來到最後一個步驟，如果已經有資料則直接顯示，若沒有則有兩種方式：通訊錄快速選單 與 直接修改。 快速選單只顯示名稱與地址部分資料，因為這裡不會有數字增減按鈕，所以使用了左右滑動概念，點擊後直接更新收貨人資料。直接修改則是使用第二畫面，只顯示必要的欄位。

到了這個節骨眼，左下角仍舊保持著稍待結帳你可能覺得奇怪，而我的目的是為了讓使用者臨時想起或是親友突然要他加買個東西，可以再跳出去，等待下次進來(但仍舊是本次操作沒離開 APP)，就直接進到這個最後畫面，點擊完成終結這趟旅程，也就是說，整個旅程都是隨時可以跳出去的，即便這樣有風險，但也許會得到更多。

感想

優點：

1. 只要畫面捲回去看就一目瞭然各種資訊，畫面上不需要有重複提示(例如總金額，數量…等)。
2. 循序漸進的誘導，避免使用者以往在填寫表單時會不照順序填，出錯機率較小，一次只專注一種題目。
3. 視覺與心理較為輕鬆，不若以往心態上很謹慎的填寫(容易手滑？)。

缺點：

1. 仍在某些時刻，需要填寫傳統表單，若全用訊息方式訊息會過長。
2. 對於進階高手，有可能反而造成結帳速度過慢。
3. 沒有 AI 介入，為了防呆，使用者文字輸入框會極少出現，有點失去用此設計的意義。如果能直接輸入「信用卡分3期利率，開統一發票：12345678」，一瞬之間就可以忽略兩個步驟，而且自動判斷流程哪個還沒填到就最棒了。

可能需要的互動技巧：

任何經過修正的資料，都要在原來的對話方塊內做即時更新，讓未來畫面回卷時都能夠再做修正，避免使用者不知道之前的對話方塊內的按鈕是否能再點擊，而且有更動過的資料要重新顯示在最新訊息位置。另外置底的按鈕也要判斷是否已經填完全部所需資料，才出現「完成」按鈕。

結語

此篇幾乎都是基於我平時當一個正常使用者時的情況來做一個設想，初步探討用這樣的方式來設計購物車可能會遇到什麼樣的麻煩，然後如何解決遇到的問題。雖然沒有什麼數據可以支持我的這些構想，但如果有些許地方能幫上你的忙的話那就太棒了！

最後，獻上初淺的流程圖，祝大家民國106年國慶愉快！



本文於 2017/10/06 發表於：https://medium.com/uwillx