使用聊天介面方式 設計購物車結帳流程
某天晚上在填寫一些枯燥乏味的網路表單 時突然靈光一閃，想到如果在像 Line 一 樣的聊天介面中做購物車結帳流程，那會是甚麼樣的情況呢？於是在好奇心的驅使以及想快點看到成果的心情下，決定利用一天的時間來執行 UI 設計與撰寫文章。另外也因為不熟悉 製作購物網站的情況下，便以某熱門網購站的購物車結帳流程為大方向的前提之下進行少許修改，流程如下：
1. 購物車清單列表（可調整商品數量）
2. 付款方式選擇（可調整付款方式細項）
3. 購買人、發票與收貨人資料（可編輯）
4. 送出訂單
圖1:購物車清單(左)與調整商品數量(右)
購物車清單列表與調整商品數量
清單列表中拋棄了在畫面上直接編輯數量的做法，因為此舉會讓版面不夠用且難以操作，所以直接使用一顆修改按鈕的方式比較理想。點擊「修改」後即進入編輯頁面，單項商品數量的增減使用較為顯眼的大顆按鈕點擊或長按，且數字不能歸零。曾經體驗過一種方式是歸零後會跳出警告視窗，說明歸零後商品會從購物車刪除，體驗極差，我設想的是讓這個品項必須按刪除才能刪除，除了操作比較直覺以外， 商品盡可能留在畫面上也許還有從 0 到 1 的機會（風險則是使用者會不會想直接按刪除）。
商品內容調整後回到清單列表中並立即刷新，然後總額數字擺在結帳按鈕左邊，利用簡單的設計手法讓他看得清，但也不讓使用者太注意總金額，畢竟，買到自己想要或需要的產品，不管花多少應該都值得（笑）。
調整商品數量上方的總額，在畫面捲動時會縮小並固定於最上方，讓使用者在增減時能明確知道價錢的變化。另外卡片以垂直方式滑動，不採左右滑動的原因是這樣會誤觸數量增減按鈕，而且比起橫向滑動，垂直滑動對於使用者更得心應手，二來橫向滑動也有大拇指滑動距離問題，第三則是不會有左右手習慣問題。
付款方式選擇
圖2：選擇付款方式 ( 左 ) 與選擇信用卡分期付款 ( 右 )
按下結帳按鈕之後，聊天訊息先跳出總金額，接著詢問付款方式。因為我們是用聊天介面的設計方法，所以在整個流程中詢問的語氣可以親和力強的語彙讓使用者在結帳過程中放輕鬆一點，增加使用的愉悅程度。
因為規定在一天內完成這個實驗所以不考量太多付款方式，直接挑信用卡付款方式實作。但不管何種付款方式，這裏想來想去都需要用到第二個畫面來實作，不適合在原聊天視窗中進行，否則在一問一答情況之下，很容易讓訊息過多，這就分散使用者購物的注意力了。另外則是用第二畫面之後，可以保留日後的擴充性（例如活動優惠、點券使用等等）。選擇付款方式畫面最底下「稍等再結帳，我還有東西要買」那個藍色位置，在設計之前我一直在思考什麼時候才要讓使用者「說話」，如果有 AI 的介入，我可能就會把使用者文字輸入框永遠顯示。如果沒有，則使用循循善誘的原則，放顆按鈕讓他可以隨時離開結帳流程，且導引他到可以買更多東西的地方去，例如可以引導去熱門商品逛逛看。
信用卡分期付款下方則提供「更換付款方式」以及「確定」兩個按鈕。按下確定後，則進入回到聊天視窗。
購買人、發票方式 與收貨人資料及其資料編輯
如果先前已經購物過的使用者，則直接顯示購買人資訊，確定無誤就在下方輸入框直接 輸入信用卡背後 3 碼 （使用者亂輸入則需 要防呆）。若先前沒有購買過或是想修改資料，則使用購買人資料編輯畫面填寫，底下仍舊保留兩顆按鈕，可以取消或是按確定直接進到下一步。
圖 3：購買人資料 ( 左 ) 與購買人資料編輯 ( 右 )
這裡思考很久的地方是背面 3 碼在這兩種情況 下要不要統一輸入形式的問題，但最後還是決定在修改時也可以輸入，就不需要剛從傳統表單填完又要以聊天的輸入方式填那 3 碼，雖然分兩種輸入方式，但這樣會是比較好的。
圖4:發票處理方式 ( 左 ) 與使用者輸入統一發票 ( 右 )
發票流程則因為相對簡單，捐贈可以使用第二畫面來挑選與輸入愛心碼，統一發票則是直接使用輸入框（右圖），並提供取消按鈕讓使用者可以返回。如果已經輸入了統一發票，則取消會變成修改按鈕，提供修改機會。
圖 5：收貨人資料 ( 左 ) 與收貨人資料編輯 ( 右 )
終於來到了購物流程最後一個項目，如果已經有資料則直接顯示給使用者，若沒有則有兩種方式：通訊錄快速選單（靠近下方的橢圓形按鈕）與「修改」。快速選單只顯示名稱與地址部分資料，因為這裡不會有數字增減按鈕，所以使用了左右滑動概念，點擊後直接更新收貨人資料。「修改」則是使用第二畫面，只顯示必要的欄位。
收貨人頁面左下角仍舊保持著稍待結帳，目的是為了讓使用者臨時想起或是親友突然要他加買個東西，可以再跳出畫面，等待下次進來結帳流程時（但仍然是同一次操作），就直接進到這個最後畫面，然後直接點擊「完成」終結這趟旅程，也就是說，整個旅程中是隨時可以跳出去的，即便這樣有風險，但方便性上大幅提升（為了獲得更多而冒的風險）。
結論
優點
1. 只要聊天畫面捲回去看就一目瞭然各種資訊，畫面上不需要一直重複提示(例如總金額，數量……等)。
2. 循序漸進的誘導，避免使用者以往在填寫表單時會不照順序填，出錯機率較小，一次只專注一種題目。
3. 填寫資料時，在視覺與心理上都較為輕鬆， 也許會激發更多獲利的可能性。
缺點
1. 仍在某些時刻，需要填寫傳統表單，若全用聊天方式訊息會過長。
2. 對於進階高手，有可能反而造成結帳速度過 慢，需在特意有另外一個流程解決。
3. 沒有 AI 介入時，為了防呆，在底部的使用者文字輸入框會極少出現，有點失去用聊天介面此設計的意義。如果能直接輸入 「信用卡分 3 期 0 利率，開統一發票： 12345678」，一瞬之間就可以忽略兩個步驟，而且自動判斷流程哪個還沒填到就最好了，個人覺得也許這會是使用此種介面在購物上的最終堡壘，只要攻下就能站上王位。
可能需要的畫面互動技巧
1. 任何經過修正的資料，都要在原來的對話方塊內做即時更新，讓未來畫面回捲時都能夠再做修正，避免使用者不知道之前的對話方塊內的按鈕是否能再點擊。
2. 有更動過的資料要重新顯示在最新訊息位 置。
3. 置底的按鈕也要判斷是否已經填完全部所需資料，才出現最後的「完成」按鈕。
