<noframes id="797jn">

      <noframes id="797jn">

          <noframes id="797jn"><address id="797jn"></address>
          <address id="797jn"><nobr id="797jn"></nobr></address>
          QQ:在線客服

          24小時客服:15069066861 建站流程

          NEWS建網站知識

          濟南建網站知識,網站建設技術靈魂總結
          Website news, Technical summary of soul

          濟南網站建設結帳頁面設計:終極指南

          點擊次數:更新時間:2020-03-27 23:03:08【打印】【關閉】

          產品頁面的轉換效果如何都沒關系。如果您的結帳頁面漏水,您就不會賺錢。

          許多公司在優化電子商務網站上浪費了 數千 美元,卻在結帳頁面上留下了明顯的錯誤。

          (這意味著他們正在損失成千上萬的利潤。)

          在本指南中,您將學習如何重新設計您的結帳頁面以減少購物車放棄,吸引更多客戶并增加電子商務商店的收入。

          繼續閱讀。

          目錄

          第1章:人們為什么要購買?
          第2章:"添加到購物車"體驗
          第3章:顯示購物車內容
          第4章:帳戶創建最佳做法
          第5章:結帳頁面
          第6章:移動購物最佳做法

           

          總結:您的高轉化電子商務結帳頁面

          第1章:人們為什么要購買?

          您必須先理解人們為什么決定購買,然后才能鼓勵他們購買更多產品。

          在本章中,您將學習觸發購物行為的因素,并看到一些電子商務網站的示例,它們在鼓勵購物者購物方面做得很好。

          霧行為模型

          斯坦福大學一位名叫BJ Fogg的教授研究決策。

          他將他的發現濃縮到了福格行為模型中。

          讓我們使用此模型來說明人們如何通過結帳進行進度。

          T霧行為模型為 B=MAT。當動機和能力高到足以引發火災時,就會發生行為。

          動機:一個人 想要多少?
          能力:這有多可行?這會需要很多時間或精力嗎?
          觸發因素:當動機和能力足夠高時,就會激發某人采取行動。

          積極性很高但耗時或艱苦的活動通常會導致無所作為。

          同樣,容易進行的活動(具有較高的能力)但不是很積極地導致沮喪和無聊。

          最重要的是,當動機或能力不足時,觸發器(例如收到有關您感興趣的產品的電子郵件)將失敗。

          觸發器示例

          聽到/看到廣告
          開啟電子郵件
          社會影響力

          這是交易。

          如果人們不感興趣,那么大量的營銷或文案寫作都不會使他們感興趣。

          但是,那些仍然擁有欲望核心的人可以變成買家。

          就是這樣。

          霧與電子商務

          讓我們看一下電子商務買家的旅程。

          首先,有人加載您的產品頁面。您可以假設他們有購買產品的動力-他們正在研究產品。

          購物者可能會在這里下車的原因很多。他們中的大多數人可以追溯到動力或能力。

          動機:他們對它的作用不感興趣,似乎不能解決問題,或者收益還不夠清楚。

          能力:成本太高,太大/太小,或者他們對自己對購買的滿意程度有疑問。

          T該觸發器是"加入購物車"按鈕。

          有時還有其他激勵因素:

          • 訂單金額超過$ <免運費>
          • 在<重要日期>之前交貨(如果您在接下來的<少量>小時內購買),或者
          • 看到其他人只是實時購買了類似產品

          我們已經討論了很多如何提高產品頁面轉換率。

          假設觸發了觸發器,他們將產品添加到了購物車中。恭喜你!

          現在,下一步:讓他們結帳。

          讓我們再次遵循模型。

          這開始有意義嗎?如果仍有不清楚的地方,請在評論中告知我們。

          第2章:"添加到購物車"體驗

          根據Baymard的研究,有69.57%的購物者放棄了購物車。

          這似乎很愚蠢,但有時人們不知道您的網站是否確實將產品添加到了購物車中。

          所以他們再次添加了...

          否則他們會感到困惑...

          無論哪種方式,您都無法使他們的生活更輕松。

          在本章中,您將學習如何優化"添加到購物車"體驗。

          顯示明確的確認

          最好的方法是使用動畫。

          但是哪些動畫呢?

          我們已經看到了一些技巧:

          1. 動畫購物車
          2. 設置"添加到購物車"按鈕的動畫
          3. 在購物車上或CTA下方顯示確認消息

          讓我們來看一下。

          購物車動畫

          使用動畫顯示購物者的購物車內容,而不是加載新頁面。

          人們通常會先檢查購物車中的內容,然后再添加更多內容。這樣一來,他們就可以留在您的產品頁面上。

          CTA 動畫

          鼓勵購物者單擊帶有小動畫的"添加到購物車"按鈕(即,提高他們的能力)。

          確認訊息

          當有人將商品添加到購物車時,提供正面的反饋。

          在此示例中,Oui Shave使用動畫顯示購物車內容。

          但這不是唯一的方法。您可以在購物車圖標上顯示一條通知,然后將其攪動以達到相同的效果。

          接下來發生什么?

          那取決于你的目標。

          您應該  始終向他們顯示購物車中的物品。

          從那里,您有2個選擇。

          目標A:獲得更多的首次客戶

          鼓勵此人盡快結帳。一旦從購物者轉變為購買者,他們更有可能再次購買。

          目標B:提高平均訂單價值

          如果您有大量使用小推車結帳的回頭客,這是最好的選擇。

          向他們展示追加銷售和交叉銷售,以鼓勵他們以更大的購物車價值結賬。

          第3章:顯示購物車內容

          下一個重要步驟是顯示購物車中的物品。

          毫無疑問,購物者會對他們的購物車中的東西或花費多少錢感到懷疑。畢竟,出人意料的成本是促使人們放棄購物車的巨大誘因。

          (是的,B = MAT也適用?。?/p>

          同樣,對于他們來說,更改數量或從購物車中完全刪除物品應該不費吹灰之力。

          在本章中,您將學習如何創建出色的購物車體驗。

          清晰度設計

          您需要在購物車頁面上顯示的內容是:

          1. 購物車中的產品
          2. 每種產品的數量
          3. 每個產品的成本+倍數
          4. 運費+費用
          5. 總計花費

          讓我們簡要地看一下。

          購物車中的產品

          顯然,您需要向客戶顯示他們購物車中的內容。

          包括一切。

          甚至免費的產品。

          每種產品的數量

          您應該顯示購物車中每種產品的數量。

          如果沒有產品,請不要顯示。

          如果該產品有2,則表明有2。

          每件產品成本

          即使某人擁有某件商品的2件,您仍應顯示每件商品的費用。

          然后顯示該項目的數量和總成本。

          例如$ 19.99 x 2 = $ 39.98。

          運送費

          Baymard Research發現,有53%的購物者放棄了購物車,因為額外的費用(運輸,稅金和費用)過高。

          您不希望在付款信息之前隱藏這些費用。

          相反,請先顯示它們。

          也就是說,額外的費用會降低購物者的  動機 和 完成訂單的能力。

          您需要盡一切努力來彌補這一點。(提供超過一定門檻的免費送貨,包括商品價格中的稅費等)

          總計花費

          驚喜費用導致廢棄的購物車!

          您需要準確告知購物者在點擊"結帳"并轉到結帳頁面之前,他們要為結帳支付多少費用。

          購物車控制

          不要強迫人們使用"更改"按鈕來確認他們的更改。

          相反,只需接受他們所做的修改。

          如果他們刪除商品或將質量更改為0,則您的商店應將該更改保存在購物車中。

          視覺層次結構:引導他們簽出

          您的第一行動應該是繼續結帳。

          購物車頁面或彈出窗口上的"結帳"按鈕應突出顯示。

          使用大膽的顏色和空白來創建對比度(使其突出)。

          Away Travel做得很好:

          "簽出"按鈕的顏色與頁面其余部分的顏色不同,周圍有很多空白,并且為粗體。

          優惠券難題

          優惠券是降低首次購買門檻的好方法(因此可以提高他們成為客戶的能力)。它們也是加強您與現有客戶關系的好方法。

          但是優惠券表格可以驅走(沒有折扣)沒有優惠券的客戶。

          解決方案?

          早在2009年,Jakob Nielsen建議將優惠券嵌入到電子郵件的鏈接中。當購物者單擊鏈接時,該優惠券將自動應用。

          從結帳表格中刪除優惠券代碼。

          堅持購物車內容

          并非所有人都會在他們第一次訪問您的網站時購買商品。

          但是,如果有人將商品添加到他們的購物車中,離開您的商店,回來,然后發現該商品不再在他們的購物車中...?

          您也不會去尋找它,對嗎?

          這相當于您的計算機崩潰并吃掉未保存的工作的電子商務。真令人沮喪!有了選擇,大多數人都會走開。

          堅持購物車中的物品以解決此問題。

          第4章:帳戶創建最佳做法

          開設帳戶是購物者的主要落腳點。

          實際上,由于強制注冊,有31%的購物者放棄了購物車。

          但是注冊對于您的業務仍然很重要;創建帳戶的客戶將來會擁有更流暢的結帳頁面體驗。

          在本章中,您將學習如何充分利用這兩個方面:創建帳戶和降低購買放棄率的客戶。

          繼續閱讀。

          不要強行注冊

          需要重復。

          認真地,停止這樣做。

          您應該改用以下方法:


          1.總是提供客人結帳

          您在此處使用的語言會產生影響。不要強迫人們在"登錄"和"注冊"之間進行選擇。讓他們在"回頭客"和"新客戶"之間進行選擇。

          更好的是:假設他們沒有帳戶,但可以給他們選擇登錄結帳頁面的選項。


          2.跳過登錄屏幕

          與前面的技巧相似。

          如果用戶沒有帳戶,將用戶定向到登錄頁面會浪費時間。

          而是在"回頭客"和"新客戶"之間選擇,僅將回頭客發送到登錄頁面。


          3.在結帳頁面上先要求電子郵件

          您應該為新客戶做的第一件事就是索要他們的電子郵件。

          為什么?

          因為現在,即使他們沒有結帳,您仍然可以向他們發送市場營銷電子郵件。換句話說,您可以向他們發送提醒以進行結帳。


          4.在"謝謝您/確認"頁面上創建優惠帳戶

          現在,客戶已經確認了他們的訂單,是時候提示他們進行帳戶了。

          為什么?

          好吧,一方面,還有什么要做?

          但更重要的是:他們已經做了大事。他們購買了商品。他們已經從"購物者"轉變為"買方"。

          買家有賬戶。


          5.提供開戶獎勵

          流程的最后是向某人提供創建帳戶的動力的最佳時機。

          他們剛剛完成購買。他們在您的確認/謝謝頁面上。

          這是設置下一次購買的絕佳機會。在下次購買時提供折扣或免費送貨。如果他們創建了一個帳戶,可以向他們當前購買的東西免費贈送(或添加免費贈品)。

          第5章:結帳頁面

          即使您進行了上述所有操作,如果您的結帳頁面過于令人生畏,那么人們將趁機保釋。

          您所做的所有工作都是浪費。

          幸運的是,我們可以使用心理學研究和最佳實踐來盡可能減少這種情況的發生。

          繼續閱讀。

          在結帳頁面上最后詢問帳單信息

          先大問小問。

          遵守小要求的人更有可能也遵守大要求。(這被稱為"踩腳技術"。)

          您的結帳表格上要求最高的是什么?

          它的帳單信息-他們必須找到他們的錢包,掏出他們的卡,然后打成一堆不同的號碼。這比鍵入他們的名字需要更多的投入。

          從"最簡單"或"最困難"對表單字段進行排名,并相應地對結帳頁面進行重新排序。

          使用多步驟表單

          對于某些人來說,即使看到"難題"也會導致他們跳船。

          對于其他人,這是表格長度的問題??吹剿麄冃枰顚懙娜績热萏珖樔肆?,或者是他們保釋的借口。

          但是,如果您使用多步驟表單,則可以完全避開這種擔心。

          使用擬態付款表格(使您的付款表格看起來像卡一樣)

          如果您將付款表的結構看起來像一張卡片,則可以使您的付款表的威脅程度降低。

          這對您的客戶來說是一個有用的視覺幫助:字段上的卡號告訴他們在卡上的哪里看。

          它消除了一個步驟,即使它很小。

          這是我們的一位設計師模擬的示例。隨意使用它作為起點。

          在結帳頁面上確保付款安全

          人們提防信用卡信息盜竊。

          如果您的付款網關看起來不安全,則將觸發該保護措施。

          (按照福格的說法,您會扼殺他們繼續結帳的動力。)

          如何使付款字段看起來安全?

          創建視覺顯著性

           

          圖片來自Baymard

           

          Baymard模擬了2個付款表格版本。第一個(A)在付款信息和其他信息之間沒有區別。第二個專門列出付款表格。

          顯然,第二個并不比第一個安全—視覺設計對交易的安全性沒有影響。但感覺更安全給客戶。

          壓出結帳頁面上的可視錯誤

          尤其是在結帳過程中,如果看起來有些腥,人們會認為是。

          不要讓化妝錯誤破壞您的銷售機會。

          將卡存儲在系統中

          對于回頭客-通過將他們的運送和賬單信息存儲在系統中,使結帳頁面的使用過程輕松自如。

          這大大減少了他們需要進行的點擊和操作的數量。

          (這意味著您已經提高了他們完成結帳流程的能力?。?/p>

          如果您只能對擁有帳戶的購物者執行此操作,則可以將其設置為帳戶創建要求的一部分。

          第6章:移動購物最佳做法

          在吸引人們結賬時,移動平臺面臨著一系列獨特的挑戰。

          首先,移動用戶更有可能保釋。

          由于需要額外的點擊,因此表單也很難填寫。

          在本章中,您將學習如何創建一個可轉換的移動結帳頁面。

          購物車最佳做法

          移動設備上最大的體驗障礙歸結為加載時間。

          這是移動設備比臺式機具有更少的處理能力。更少的處理能力意味著點擊和操作之間的延遲更多。

          如果您讓人們點擊很多,那會讓他們等待很多。

          (而且我們討厭等待。)

          給購物車添加反饋

          就像在臺式機上一樣,當有人將產品添加到購物車中時,請使其清晰。

          在這里,赫歇爾做了兩件事:

          1. 他們顯示一個模型,向購物者確認他們已將產品添加到購物車中
          2. 他們更改了CTA文字,以確認購物者已將產品添加到購物車中

          這些是對UX的小改進,可以大有幫助,尤其是在移動設備上。

          提供對購物車的快速訪問

          不要讓您的客戶加載新頁面來查看他們的購物車。

          在移動設備上使用下拉菜單或滑出按鈕更為重要。

          Herschel在他們的工作上做得很好。

          輕松更新購物車內容

          如果購物者必須努力更新其購物車中的物品,則可能會完全疏遠他們。

          不要刷新頁面。

          不要讓他們使用"更新"按鈕來提交更改。

          在每個使用AJAX更改其購物車內容的商品旁邊實現一個"刪除"按鈕(因此不會強制刷新頁面)。

          (這里,在EOS的情況下,我們不確定如果單擊"刪除"而不是"更新購物車"會發生什么—該產品確實被刪除了嗎?)

          支持切換設備的能力

          有些人會在手機上購物,但要等到他們到達計算機后才能實際結帳。

          蘋果具有出色的切換功能。但是Android用戶無權訪問。

          相反,您應該讓人們有機會登錄以跨設備同步他們的購物。

          表單字段和輸入最佳實踐

          顯示正確的鍵盤

          您想知道什么煩人嗎?

          當您的客戶輸入他們的信用卡號時,您會使用標準鍵盤出示他們。

          如果有人在數字字段(信用卡信息,電話號碼等)中輸入內容,請給他們一個號碼頁。

          同樣,在電子郵件字段中使用特殊的電子郵件關鍵字。

           

          根據先前的輸入來預填充字段(用于回頭客)

          如果某人在您的帳戶中有一個帳戶,則您應保存其信息,并在下次結帳時預先填寫表格。

          這使得后續購買更加無縫。它減少了點擊次數(總是在移動設備上獲得獎勵),并降低了完成結帳流程所需的花費。

          使用瀏覽器自動填充名稱,地址,電子郵件,電話,密碼和信用卡信息

          您要確保您的商店與Safari和Chrome瀏覽器自動填充兼容。

          為什么?

          因為瀏覽器自動填充功能可為購物者節省大量時間和精力。 (這增加了他們完成結帳過程的能力。

          為狀態和付款到期日期設置長下拉菜單

          長時間下拉列表對移動用戶不利。

          它們需要過多的滾動,并且通常比簡單鍵入花費更多的時間。

          讓您的購物者在這些字段中輸入。

          移動支付


          不要讓購物者選擇太多付款方式

          我們知道選擇令人沮喪。

          我們還知道,當您強迫某人做出選擇時,就是在稀釋他們的某些智力。

          看看Vineyard Vines的作用:

          他們有三種不同的結帳CTA。

          不要這樣 擁有一個CTA(結帳),然后讓人們可以選擇要付款的方式。


          使用Apple(和Google)Pay

          Apple Pay可讓Apple用戶快速結帳。Google Pay對Android用戶也是如此。它消除了最困難的步驟:輸入信用卡信息。

          幸運的是,Shopify和WooCommerce都具有內置的Apple and Google Pay功能。

          您只需要在設置上激活它即可。

          這是低掛的水果,但很容易忽略。再檢查一遍!

           

          濟南網站建設成功案例更多
          底部線條

          7x24小時服務熱線:15069066861   網站建設博客

          陈冠希视频

            <noframes id="797jn">

              <noframes id="797jn">

                  <noframes id="797jn"><address id="797jn"></address>
                  <address id="797jn"><nobr id="797jn"></nobr></address>