就像大賣場的推車,可以選擇商品項目結帳,把不想要的刪除,或移入收藏等管理商品項目的功能,都是非常基本、一定要做到的事。這一篇將先從加法、減法,兩種選擇商品結帳的模式開始,慢慢介紹各品牌如何設計機制,讓使用者方便管理商品項目外,亦巧妙避免使用者將商品從購物車中移除。
在這篇文章你會看到
- 加法 vs. 減法「兩種選擇商品結帳的模式」
- 淘寶「點選商品項目以管理」
- 購物車頁面少見「刪除」按鈕
- Amazon「下次再買」設計
- 如何處理購物車裡的失效商品
文章以蝦皮、屈臣氏、淘寶、Amazon 為分析對象。介面截圖時間為 2019 年 3 月底至 4 月初,少部分為 1 月截圖。其中可能經歷 APP 介面改版,如與實際 APP 有差異,請以文章中圖片為主。
圖片來源:Unsplash、蝦皮購物 APP、屈臣氏台灣 APP、手機淘寶 APP、Amazon APP
加法 vs. 減法:兩種選擇商品結帳的模式
而在討論購物車頁面裡,應該如何建立管理商品項目的機制之前,應該先了解有「加法」及「減法」兩種不同選擇商品結帳的模式。
根據訪談,有許多使用者習慣在將若干有興趣的商品加入購物車後,在挑選真正要購買的商品。「加法」指的是由使用者一個個選擇需要購買的商品。「減法」指的是系統預設使用者要購買全部購物車內的商品,使用者需要一個個去除他不需購買的商品。
除了結帳功能外,進一步管理商品項目的動作,例如:移入「下次再買」、移入收藏、刪除,在同一 APP 裡,亦會採用相同的機制。其中淘寶是一個典型以加法方式管理商品項目的例子。
運用「加法」模式的淘寶
直接點選商品項目以管理
在淘寶裡,每個商品項目前有空心方塊可以點選,空心圓點暗示可以點選並管理商品(亦可點選商家名稱,一次選取該店家所有商品)。點選商品後,下方的 Tool bar 會顯示被點選商品的合計總額。
如果點選頁面右上角的「管理」按鈕,此時 Tool bar 會變成帶有刪除、移入收藏功能的狀態,能進一步處理已點選的商品。
屈臣氏:忽略編輯按鈕
此外,在屈臣氏的購物袋頁面中,其實有類似的管理機制:點選 Navigate bar 的「編輯」按鈕後,跳轉到編輯頁面進一步管理商品。
然而在先前的研究中,在欲刪除商品時,使用者會將注意力放在商品項目上,尋找可點選的按鈕,而忽略僅用 icon 表示的「編輯」按鈕。因此如何使用適當的方法引導使用者「發現」這套機制,便是值得花心思的地方了。
少見「刪除」按鈕
除了點選商品後管理的方法外,常見的方法包括商品項目上即有移入收藏等按鈕、左滑商品項目即出現選項等。在蝦皮裡,將商品項目的數量減成 0 ,甚至亦會跳出是否刪除商品的提示視窗。
然而,通常少見在商品項目上,直接放上「叉叉」、「刪除」按鈕的做法,應該出自商業考量,與「希望使用者不能輕鬆移除商品項目」的目的有關。
不過 Amazon 的商品項目上,卻有很明顯的「刪除」按鈕,這又是為什麼?前文提到,淘寶以加法方式管理商品項目,相反地 Amazon 恰恰採用「減法」的方法:透過「下次再買」的設計,搭配按鈕的方法管理商品項目。
「減法」模式的例子
「下次再買」
在 Amazon 裡,沒有大家熟悉的收藏功能,在刪除按鈕旁邊的是下次再買(Save for later)按鈕。
在購物車頁面中有兩個區域,確定要購買的會放在上方;沒那麼渴望的商品便可以存放在其下方的下次再買區域。不採用兩個頁面(購物車和我的收藏)的設計,背後對應的可能就是使用者習慣將有興趣的商品全部加入購物車後,再細細挑選的行為。
搭配按鈕管理商品項目
在屈臣氏裡,購物袋頁面也分為購物袋和下次再買區域。與 Amazon 一樣,採用「減法」模式的屈臣氏,系統預設結帳所有在購物袋區域的商品,意思是,不想要這次購買的商品一律需要移到下次再買區域、移入收藏或刪除。
然而,在屈臣氏裡,其這些動作只能仰賴左滑商品項目,或者點擊右上角的編輯按鈕,進到編輯頁面管理。
使用者必須執行這個功能,而功能易用性不佳,可能造成不好的使用經驗。Amazon 是使用此種模式較好的範例,同樣以減法的概念,剔除這次不買的商品,將下次再買的按鈕直接放在商品項目上,方便使用者操作。
全選商品項目
在蝦皮,每個商品項目前有空心方塊可以點選,然而點選後僅能點選結帳。不過一進購物車頁面,便會自動全選所有商品項目,目的是方便亦促使使用者將所有商品直接結帳。
失效商品
或許有人注意到,淘寶改變狀態後的 Tool bar 上,除了刪除、移入收藏的按鍵,還有一個「清除」按鈕。點選清除後,所有購物車內的商品將依加入時間的新舊,僅顯示圖片的排列。
根據自己先前的訪談經驗,發現有些使用者偏好不使用收藏,而將有興趣的商品全部加入購物車,並在購物車頁面挑選此次欲購買的商品。
而此功能便是針對習慣大量堆積商品在購物車,卻久久清理一次購物車頁面的使用者,方便其輕鬆瀏覽全部商品而設置的。另外,此功能亦可協助清除因為加入時間太久,而早已下架的商品。
TK延伸閱讀:收藏和購物車的使用者行為
如何處理失效商品?
失效商品是在加入購物車後,因為商家無法出貨,而無法順利結帳的商品。在蝦皮 APP 裡,失效商品會另外形成一張卡片,在卡片下方亦有「移除目前無法購買的商品」的按鈕,可以移除全部失效商品。
另外每個失效商品項目的右下角有一個找相似按鈕,可以讓使用者選擇其他可替代的類似商品,防止流失原本消費的可能。
購物車頁面中失效商品的設計,對 C2C 或有眾多商家的平台而言,格外重要。因為商家進入平台的門檻低,相對無法掌控商家管理商品的能力,因此「如果商品加入購物車後,無法順利結帳」的負面狀態是格外需要被考慮的。
結論
在設計管理購物車商品的介面前,可以思考該產品是用「加法」或「減法」的方法,選取商品加入購物車。這個思維方式可以幫助你更清楚自己的設計目標。
另外,由於管理商品項目,幾乎等同於「減少這次的消費金額」的意思,是個企業最不樂見的事情。
為了商業目標,縱然將管理功能藏在次級功能,避免使用者「輕易」使用功能。於此同時,也應有明確的指示,讓使用者在必要的時刻得以依循,管理商品項目。反之,不好的使用經驗可能影響使用者的反感,對企業造成更大的傷害。