加法 vs. 減法:購物車介面中,如何設計管理商品項目

廖浩宇
7 min readApr 16, 2019

--

「購物車頁面」觀察研究系列文章(三)

就像大賣場的推車,可以選擇商品項目結帳,把不想要的刪除,或移入收藏等管理商品項目的功能,都是非常基本、一定要做到的事。這一篇將先從加法、減法,兩種選擇商品結帳的模式開始,慢慢介紹各品牌如何設計機制,讓使用者方便管理商品項目外,亦巧妙避免使用者將商品從購物車中移除

在這篇文章你會看到

  • 加法 vs. 減法「兩種選擇商品結帳的模式」
  • 淘寶「點選商品項目以管理」
  • 購物車頁面少見「刪除」按鈕
  • Amazon「下次再買」設計
  • 如何處理購物車裡的失效商品

文章以蝦皮、屈臣氏、淘寶、Amazon 為分析對象。介面截圖時間為 2019 年 3 月底至 4 月初,少部分為 1 月截圖。其中可能經歷 APP 介面改版,如與實際 APP 有差異,請以文章中圖片為主。

圖片來源:Unsplash、蝦皮購物 APP、屈臣氏台灣 APP、手機淘寶 APP、Amazon APP

加法 vs. 減法:兩種選擇商品結帳的模式

而在討論購物車頁面裡,應該如何建立管理商品項目的機制之前,應該先了解有「加法」及「減法」兩種不同選擇商品結帳的模式

根據訪談,有許多使用者習慣在將若干有興趣的商品加入購物車後,在挑選真正要購買的商品。「加法」指的是由使用者一個個選擇需要購買的商品。「減法」指的是系統預設使用者要購買全部購物車內的商品,使用者需要一個個去除他不需購買的商品

除了結帳功能外,進一步管理商品項目的動作,例如:移入「下次再買」、移入收藏、刪除,在同一 APP 裡,亦會採用相同的機制。其中淘寶是一個典型以加法方式管理商品項目的例子。

運用「加法」模式的淘寶

直接點選商品項目以管理

在淘寶裡,每個商品項目前有空心方塊可以點選,空心圓點暗示可以點選並管理商品(亦可點選商家名稱,一次選取該店家所有商品)。點選商品後,下方的 Tool bar 會顯示被點選商品的合計總額

點選商品後,下方的 Tool bar 會顯示被點選商品的合計總額

如果點選頁面右上角的「管理」按鈕,此時 Tool bar 會變成帶有刪除、移入收藏功能的狀態,能進一步處理已點選的商品

屈臣氏:忽略編輯按鈕

此外,在屈臣氏的購物袋頁面中,其實有類似的管理機制:點選 Navigate bar 的「編輯」按鈕後,跳轉到編輯頁面進一步管理商品。

使用者忽略僅用 icon 表示的「編輯」按鈕,來啟動管理機制

然而在先前的研究中,在欲刪除商品時,使用者會將注意力放在商品項目上,尋找可點選的按鈕,而忽略僅用 icon 表示的「編輯」按鈕。因此如何使用適當的方法引導使用者「發現」這套機制,便是值得花心思的地方了。

少見「刪除」按鈕

除了點選商品後管理的方法外,常見的方法包括商品項目上即有移入收藏等按鈕、左滑商品項目即出現選項等。在蝦皮裡,將商品項目的數量減成 0 ,甚至亦會跳出是否刪除商品的提示視窗。

然而,通常少見在商品項目上,直接放上「叉叉」、「刪除」按鈕的做法,應該出自商業考量,與「希望使用者不能輕鬆移除商品項目」的目的有關。

不過 Amazon 的商品項目上,卻有很明顯的「刪除」按鈕,這又是為什麼?前文提到,淘寶以加法方式管理商品項目,相反地 Amazon 恰恰採用「減法」的方法:透過「下次再買」的設計,搭配按鈕的方法管理商品項目。

「減法」模式的例子

Amazon 採用「減法」方法:「下次再買」的設計,搭配按鈕的方法管理商品項目

「下次再買」

在 Amazon 裡,沒有大家熟悉的收藏功能,在刪除按鈕旁邊的是下次再買(Save for later)按鈕。

在購物車頁面中有兩個區域,確定要購買的會放在上方;沒那麼渴望的商品便可以存放在其下方的下次再買區域。不採用兩個頁面(購物車和我的收藏)的設計,背後對應的可能就是使用者習慣將有興趣的商品全部加入購物車後,再細細挑選的行為

搭配按鈕管理商品項目

在屈臣氏裡,購物袋頁面也分為購物袋和下次再買區域。與 Amazon 一樣,採用「減法」模式的屈臣氏,系統預設結帳所有在購物袋區域的商品,意思是,不想要這次購買的商品一律需要移到下次再買區域、移入收藏或刪除

使用者必須執行這個功能,而功能易用性不佳,可能造成不好的使用經驗

然而,在屈臣氏裡,其這些動作只能仰賴左滑商品項目,或者點擊右上角的編輯按鈕,進到編輯頁面管理。

使用者必須執行這個功能,而功能易用性不佳,可能造成不好的使用經驗。Amazon 是使用此種模式較好的範例,同樣以減法的概念,剔除這次不買的商品,將下次再買的按鈕直接放在商品項目上,方便使用者操作。

全選商品項目

在蝦皮,每個商品項目前有空心方塊可以點選,然而點選後僅能點選結帳。不過一進購物車頁面,便會自動全選所有商品項目,目的是方便亦促使使用者將所有商品直接結帳

失效商品

或許有人注意到,淘寶改變狀態後的 Tool bar 上,除了刪除、移入收藏的按鍵,還有一個「清除」按鈕。點選清除後,所有購物車內的商品將依加入時間的新舊,僅顯示圖片的排列

點選清除後,所有商品僅顯示圖片排列,方便使用者清理購物車
根據自己先前的訪談經驗,發現有些使用者偏好不使用收藏,而將有興趣的商品全部加入購物車,並在購物車頁面挑選此次欲購買的商品

而此功能便是針對習慣大量堆積商品在購物車,卻久久清理一次購物車頁面的使用者,方便其輕鬆瀏覽全部商品而設置的。另外,此功能亦可協助清除因為加入時間太久,而早已下架的商品。

TK延伸閱讀:收藏和購物車的使用者行為

如何處理失效商品?

失效商品是加入購物車後,因為商家無法出貨,而無法順利結帳的商品。在蝦皮 APP 裡,失效商品會另外形成一張卡片,在卡片下方亦有「移除目前無法購買的商品」的按鈕,可以移除全部失效商品

蝦皮:找相似按鈕,讓使用者選擇其他可替代的商品

另外每個失效商品項目的右下角有一個找相似按鈕,可以讓使用者選擇其他可替代的類似商品,防止流失原本消費的可能

購物車頁面中失效商品的設計,對 C2C 或有眾多商家的平台而言,格外重要。因為商家進入平台的門檻低,相對無法掌控商家管理商品的能力,因此「如果商品加入購物車後,無法順利結帳」的負面狀態是格外需要被考慮的。

結論

在設計管理購物車商品的介面前,可以思考該產品是用「加法」或「減法」的方法,選取商品加入購物車。這個思維方式可以幫助你更清楚自己的設計目標

另外,由於管理商品項目,幾乎等同於「減少這次的消費金額」的意思,是個企業最不樂見的事情。

為了商業目標,縱然將管理功能藏在次級功能,避免使用者「輕易」使用功能。於此同時,也應有明確的指示,讓使用者在必要的時刻得以依循,管理商品項目。反之,不好的使用經驗可能影響使用者的反感,對企業造成更大的傷害。

--

--

廖浩宇

前端工程師,任職於 FLUX。在七年設計學習後,兩年前仍深深被程式編寫的思維吸引,透過各種途徑自學前端語言直到現在。柔軟眉目的理性人類,成日打破砂鍋,對事物的本質感到好奇。