文章彙整

Magento 2 結帳流程的優化與設計準則

By Astral Web 2 years agoNo Comments
首頁  /  網頁視覺設計  /  Magento 2 結帳流程的優化與設計準則

Magento 2 結帳流程優化

今天歐斯瑞要來談談Magento 2結帳流程頁面,相較Magento 1.9設計上有哪些優化呢?在設計時需要注意哪些事情? 一起來看看吧!

 

結帳頁面的重要性

好不容易讓客人進入到結帳頁,卻又因為繁瑣的步驟或是煩雜的畫面內容,增加了廢棄購物車的機會,別讓使用者在結帳的過程中增加負擔,進而影響了你的銷售,更多結帳頁設計技巧可以參考我們的文章「12個結帳頁面的設計技巧」。

 

Magento 2 的結帳頁更為優化

  • 更簡化的步驟

將結帳步驟簡化至2步驟,對於使用者來做不必分成5步驟,即可完成結帳動作。

designing-tips-for-magento-2-checkout-flow (3)

 

  • 響應式設計更符合行動裝置

畢竟Magento 1已經釋出數年之久,起初的設計與現今的需求一定會有落差,而釋出的新版Magento 2結帳頁也更符合現代需求。

designing-tips-for-magento-2-checkout-flow (5)

  • 不需加入會員即可結帳

雖然Magento 1.9 也有提供結帳並註冊,但Magento 2 從購物車到結帳頁可以直接跳轉,省略了登入畫面,減少了一個步驟,也降低使用者離開的因素。

 

  • 收合當下不需要的內容

將當下不必要的資訊作收合或移除,讓使用者能把焦點放在當前項目上。

designing-tips-for-magento-2-checkout-flow (6)

  • 優惠劵輸入區塊加入付款頁

Magento 1.9輸入優惠劵代碼只有放在購物車頁面,Magento 2 除了在購物車內可以輸入優惠劵代碼外,也在結帳付款中也可以輸入優惠劵代碼,讓使用者能統一在同一個階段處裡錢的事情。

 

  • 提示結帳步驟區塊

顯示所有需要處理的結帳階段,並讓使用者清楚知道當前的位置,可以降低使用者操作錯誤以及不確定性。

designing-tips-for-magento-2-checkout-flow (7)

 

 

使用Magento 2的網站範例

designing-tips-for-magento-2-checkout-flow (1)

St. John Knits: http://www.stjohnknits.com/

Venroy: https://www.venroy.com.au/

Jaguar Shop: https://shop.jaguar.com/uk/

Helly Hansen: https://shop.hellyhansen.com/en_no/

Soak & Sleep: https://www.soakandsleep.com/

 

根據上述優勢及範例,我們了解到Magento 2本身已有提供良好的結帳規劃,而範例中也是保持原生既有的優勢基礎下,來去設計符合自己網站的風格。

在結帳過程中要讓使用者清楚知道下一步該怎麼做,並且能讓使用者專心與安心的完成結帳動作,減少廢棄購物車的產生,使用更精簡、更直覺設計成就更快速結帳

 

網站若有任何需要協助的地方,歡迎隨時洽詢歐斯瑞有限公司

 

資參考資料來源:

5 Ways the Magento 2 Checkout can Reduce Abandoned Carts and Increase Sales

NINE CHECKOUT IMPROVEMENTS IN MAGENTO 2

EXAMPLES OF MAGENTO 2 WEBSITES

 

 

範例來源:

http://www.stjohnknits.com/

https://www.venroy.com.au/

https://shop.jaguar.com/uk/

https://shop.hellyhansen.com/en_no/

https://www.soakandsleep.com/

 

以上內容由Astralweb 歐斯瑞編寫製作

 000

推薦文章

Categories:
  網頁視覺設計Magento-2

留下回應

你的電子郵件地址不會被公開.

取得獨家電子商務祕技

建立更好的策略靈感

跟上全球的網路趨勢

絕佳的電商解決方案

電子商務戰略全指南

每月發送電商戰略指南,只要填寫E-mail即可訂閱!

請到您的信箱確認,即可完成訂閱。