移動購物車設計的注意事項：6 個實用拆解（移動電子商務深度指南）
已發表: 2018-08-08您已經知道您的購物車頁面是您電子商務機器中的一個重要齒輪。 但是，您的移動購物車頁面（訪問者在結賬前看到的頁面）是否會影響他們的體重？
在 Growcode，我們反復發現購物車頁面是我們客戶商店中最容易被忽視的部分之一，尤其是在移動設備方面。 後果很嚴重，嚴重削弱了他們的底線。
到 2021 年，移動商務銷售額預計將佔所有電子商務銷售額的 52.9%。然而，2017 年，移動購物車的平均放棄率高達 85.65%。
這意味著在將產品添加到購物車的所有客戶中，近十分之九的客戶沒有完成購買。
#移動商務銷售額預計到 2021 年將佔所有電子商務銷售額的 52.9%。#EcommerceStats點擊推文
移動設備導致放棄購物車。 請記住，如上圖所示，匯總數據並未說明行業之間的巨大差異。 來源。
在這篇文章中，我們將看一下購物車評論頁面的六個示例。 前三個使用您應該考慮複製的可靠設計實踐，而其餘示例包括最好避免的元素。
還值得一提的是，雖然我們專注於某些購物車設計的錯誤，但這並不意味著它們總體上非常糟糕。 讓我們深入了解移動購物車最佳實踐。
Growcode 還推薦這本電子書：
一個 7+ 圖在線商店的電子商務優化清單
1.做：亞馬遜
亞馬遜的移動網站購物車是一個出色的移動購物車設計案例。 它並不擁擠，但也不算太小。 所有必要的元素都包括在內，而不會將注意力從主要的 CTA 上移開。 還有一些不顯眼的“附加組件”可以用來增加訂單價值，從禮品包裝到相關項目。
亞馬遜的移動購物車 ux。 所有必要的元素都包括在內。
提示 #1：頁面頂部的一個清晰的 CTA 設置為對比色。 當用戶向下滾動時，此 CTA 繼續浮動在屏幕頂部。
#Mobile #cart 優化提示：在頁面頂部使用對比色設置一個清晰的 #CTA。 #ecommerce #optimization點擊推文
當用戶向下滾動時，CTA 會浮動在屏幕頂部。
提示#2： CTA 是全屏幕的，因此左手和右手用戶都可以輕鬆點擊它。
提示 #3：在頁面頂部重申免費送貨，以消除任何疑慮並“使交易更甜蜜”。
提示 #4：產品圖片和名稱鏈接到描述頁面，供想要重新檢查產品詳細信息的人使用。
提示 #5：有清晰且易於點擊的按鈕來更改訂單金額、刪除項目並保存以備後用。
提示 #6： “有貨”通知讓客戶放心，他們不必等待產品。
#Mobile #cart 優化提示：“有貨”通知讓 #customers 放心，他們不必等待產品。 #ecommerce點擊推文
提示#7：亞馬遜展示了“已保存以備後用”的產品，下方有一個簡單的“移至購物車”按鈕。
為以後保存的項目清晰可見。
提示#8：包含相關產品——“客戶也購買過”——可以在不離開頁面的情況下添加到購物車。 作為第三個項目的此元素設計的附加加號未完全顯示，因此建議使用滑動動作。
提示#9：大量空白和沒有不必要的“填充”細節。 亞馬遜只包含絕對必要的內容。
提示 #10：鏈接到頁腳中的“頁面頂部”。
嗚呼！ 你剛剛註冊。 檢查您的收件箱以確認訂閱。
2. 做：訂書釘
Staples 購物車的美妙之處在於它的簡單性。 可以在幾秒鐘內審查產品。 結果是更加強調所包含的選項。
Staples 購物車的美妙之處在於它的簡單性。 最好的移動電子商務購物車之一。
提示#1：與亞馬遜一樣，產品將在頁面頂部和付款摘要中免費運送這一事實引起了人們的注意。 更重要的是，文本是綠色的，這使得通知更加突出。 還顯示了“預期交付”的確切日期。
提示＃2：設計非常簡單，並且很好地利用了空白。 客戶可以快速檢查他們的訂單，在不離開頁面的情況下進行任何必要的更改，並驗證總數。
提示 #3： “優惠券和獎勵”框不顯眼。 還提供了“到店取貨”的重要選項，而不會將注意力從主要 CTA 上轉移開。
提示 #4：結帳 CTA 中包含“安全”一詞。
提示#5：頁腳已被刪除。
有什麼問題嗎？ 雖然 Staples 做對了很多，但這種購物車設計的一個問題是標題的簡單性，它不包括可擴展的菜單或搜索表單。 如果一家公司只銷售一種產品，這可能是一個可行的解決方案。 然而，對於多產品站點，如果客戶願意，讓他們選擇再次瀏覽總是值得的。
3.做：西爾斯
西爾斯提供了許多額外的選擇——包括付款計劃、店內提貨、禮品選擇和促銷。 他們的購物車是零售商的一個很好的例子，他們希望在一個頁面上組合許多不同的元素，而不會破壞防止移動購物車放棄的設計。
西爾斯移動購物車設計包含很多元素，但仍然保持簡單。
提示#1： CTA 包含在頁面頂部的小計旁邊。 鎖定圖標進一步建立信任，還提供使用 Paypal 結賬的選項。
提示#2：作為高價項目，付款計劃包括在此階段消除任何猶豫。
提示#3：訂單摘要部分的銷售節省以紅色顯示，通過建立緊迫性和減少懷疑來鼓勵客戶點擊結賬。
提示 #4：提供一個鏈接以登錄忠誠度計劃，作為對新客戶的進一步激勵。 重要的是要注意，這不是沒有任何好處的設置商店帳戶的鏈接，最好將其合併到結帳表格中。
提示 #5：頁面底部包含“安全結賬”印章。
有什麼問題嗎？ 只是有點太多了，效果可能是一些客戶的注意力分散。 例如，無需在底部提供雜誌訂閱和忠誠度計劃鏈接。
4. 不要：Vitacost
儘管 Vitacost 使用了許多上述元素，但它們的實施往往存在缺陷。 結果是一個設計不佳的購物車頁面，通過一些小的調整可能會增加購物車的轉化率。
Vitacost 使用了許多上述元素，但它們的實現往往存在缺陷。
錯誤 #1：包含一個引人注目的搜索欄，導致人們遠離購物車頁面。 對於想要繼續瀏覽的人來說，最好包含一個搜索欄圖標（如亞馬遜示例中所示）。 但不要讓它太大。
#Mobile #cart 優化提示：不要包含會導致人們遠離購物車的引人注目的搜索欄。 #ecommerce點擊推文
錯誤 2：自動包含可能混淆或惹惱客戶的不明確的“BOGO”產品（買一送一）。
錯誤 #3：突兀的促銷代碼欄。 這分散了對主要 CTA 的注意力，並鼓勵客戶離開購物車在線搜索促銷。 促銷盒應該是可見的，但不要過於明顯。 他們當然應該在 CTA 之後。
錯誤 #4：運費設置為“TBD”，這會引起懷疑（一般來說你應該避免縮寫）
錯誤#5：頁腳太大。 Vitacost 是否希望客戶完成購買或下載應用程序？
錯誤 6：用於移除或增加項目的產品選項太小且難以挖掘。
錯誤 #7：可以在屏幕截圖底部看到的浮動欄在較小的手機上佔用太多屏幕空間。
5.不要：孤獨星球
在 Staples 頁面有效利用最小設計的地方，Lonely Planet 排除了太多元素。 沒有減少猶豫和建立信任的功能，沒有增加購買價值的推薦或產品建議，而且許多按鈕難以點擊。 
孤獨星球排除了太多元素。 它們留下了大量空間，可用於改進購物車用戶體驗。
錯誤#1：空間使用不當。 最好讓購物車填充整個頁面，並利用空白，而不是在當前內容上彈出。
錯誤#2：不包含有關交貨、折扣或付款方式的信息。 這些可能會減少不確定客戶的疑慮和恐懼。
錯誤#3：沒有相關的產品建議。
錯誤#4：增加或減少產品數量的按鈕太小以至於幾乎無法點擊。
錯誤#5： CTA——“Proceed to Checkout”——看起來不像一個按鈕。
錯誤 #6：彈出格式使得從左側點擊 CTA 變得困難。 讓客戶同時使用他們的拇指！
6. 不要：耐克
耐克頁面的主要問題是各種元素被隨機包含的方式，幾乎沒有考慮將它們放在一起或放在頁面上的不同點時會如何工作。 關於 CTA 也存在混淆。
在耐克的頁面上，隨機包含了各種元素。
錯誤 #1：運費折扣僅適用於會員。 這會增加不必要的摩擦，並且可能會抑制那些不想加入的客戶，他們會認為他們正在失敗。 為客戶提供在結賬階段登錄的選項，以及為新客戶註冊的選項。 購物車頁面應專門用於查看訂單。
錯誤 #2：使用兩個 CTA。 在購物車頁面上有一個 CTA 幾乎總是更好，因為您正在尋求特定的行動方案。 提供多個 CTA 的唯一原因是讓客戶可以在不同的結帳選項之間進行選擇。 在用戶向您提供他的電子郵件地址後，最好顯示正確的表單（登錄表單或地址表單）。
錯誤 #3： “接受的付款類型”未在結帳 CTA 附近列出。 將這些徽章包含在您的購物車頁面上是個好主意，特別是如果您不像 Nike 那樣知名，但頁腳不是放置它們的地方。
錯誤 #4：如果客戶不以這種方式自我識別，“客人”一詞可能會導致混淆（如果以客人身份購物，您能成為會員嗎？）
結束移動購物車設計
大多數表現最好的購物車頁面的設計簡潔明了，但也提供了正確的類型和數量的信息。 當您重新設計自己的商品時，請記住購物車頁面的目的是讓購物者查看和確認他們的訂單，刪除任何不必要的商品並添加類似的商品。 任何其他所需的操作，例如登錄他們的帳戶或註冊，都可以留在結帳頁面。 所以請記住這些移動購物車最佳實踐和其他購物車優化技術。
請記住，拆分測試是關鍵！ 使用此處描述的策略來形成您自己的測試，並承諾長期調整元素。 如果你這樣做，你幾乎肯定會看到你的轉化率穩步增長。
獲取 115 點電子商務優化清單
憑藉八年的經驗，我們將所有頂級見解匯集到一本書中：7+ 數字在線商店的電子商務優化清單。 如果您想提高所有頁面的性能——從主頁到結賬，請在此處獲取副本。
