如何提高移動支付轉化率(下)
4.提供更簡單的編輯
一般來說,絕對使用者不清楚他們在網站上做了什麼。網上已經有足夠分心的資訊了,你所要做的事情就是給定明確的方向,以免分心。
但是,在結帳時,如果顧客在購物車中不同的顏色,大小或數量的商品中猶豫不決,可能會導致他們分心。不要讓他們回看網站,在結賬時給個編輯選項,從而明確使用路徑方向。
維多利亞的祕密是個很好的例子:

當他們第一次到達結帳螢幕時,顧客將看到他們即將購買的物品清單。當點選每個專案旁邊的大型“編輯”按鈕時,將開啟一個彈窗(如上所示)並顯示原始產品頁。基本上是原始產品頁面上疊加在結帳上面。使用者可以調整他們的選項並儲存更改,而無需離開結賬頁面。
如果你在檢視網站分析時發現,使用者偶爾會在結帳後返回(可以在銷售渠道中檢視),請新增此內建編輯功能。從而防止這種不必要的返回,從而提供使用者付費率。
5.開啟多重身份結賬選項
當消費者通過桌面裝置登入電子商務網站時,如果他們每次都必須輸入他們的使用者名稱,電子郵件地址或付款資訊,這可能不是什麼大問題。當然,如果這些無用功是可以避免,網頁端已經找到解決方案了(如允許網站儲存其資訊或使用LastPass等密碼管理器)。
在移動裝置上,重新輸入這些資訊是一種痛苦,尤其是哪些漫無邊際的表單。因此,為了簡化移動使用者的登入和結賬流程,請考慮可以簡化流程的方式:
1.允許客人結帳。
2.允許一鍵加急結賬。
3.啟用可信來源(如Facebook)的一鍵登入。
4.在可信付款提供商的網站上啟用付款,例如PayPal,Google電子錢包或條形。
Sephora已經採用方便的結賬流程,好處之一是客戶可以通過簡單的切換自動執行登入過程:

當客戶匆忙想要進入結賬的下一階段時,絲芙蘭的自動登入功能肯定會派上用場,從而鼓勵客戶從移動網站更頻繁地購買。
許多移動網站都會在登入頁面的底部,告訴客戶他們有什麼選項。但維多利亞的祕密再頁面最頂端,以最大的大按鈕在最上面顯示這些資訊:

客戶可以選擇使用其帳戶登入,作為訪客結賬或直接前往PayPal。但使用者並不會因為沒有提供他們偏好的結帳或付款方式而感到驚訝。
我也很喜歡維多利亞的祕密這樣賦予使用者選擇權。在“以遊客身份結賬”但按鈕旁邊有個顏色鮮豔的“登入”按鈕。首先,它為結帳添加了一些維多利亞的祕密品牌顏色,這是很好的品牌加強的方法。同時,按鈕的顏色方式也明確了主要操作的要求(即建立帳戶和登入)。
6.新增麵包屑
當推送客戶結帳時,你最不想要的是讓他們分心。這就是為什麼網站的標準導航欄(或漢堡選單)通常會從此頁面中刪除。
儘管如此,如果客戶不知道未來的情況,結賬流程可能會令人感到恐慌。他們需要填寫多少表單?需要什麼樣的資訊?在提交付款細節之前,他們是否有機會檢視他們的訂單?
如果你設計的是多頁結帳,請在頁面頂部用明確標記的麵包屑導航定義每一步,從而消除客戶的擔憂。此外,這將為您的結賬提供更清晰的設計,減少每頁的點選次數和滾動次數。
Hayneedle提供了一個麵包屑導航的例項:

你可以看到有三個步驟被清晰的標記。這裡絕對與使用者在這些步驟中遇到的問題無關,這將有助於讓他們心安。有三個步驟似乎足夠合理,使用者有機會在完成購買之前再次檢視訂單。
絲芙蘭在結賬時有另一種“麵包屑”風格:

Sephora的客戶不是將每個“麵包屑”放在結賬頁面的頂部,而顧客可以看到下一步是什麼,以及還有多少沒完成。
如果你不想製作頂部導航或麵包屑導航,這是一個很好的選擇。相反,使用者可以優先執行號CTA,這可以更好地激勵客戶向下移動頁面並完成購買。
不過,我認為這兩種麵包屑設計都是有效的。因此,如果你不確定哪些會帶來更多轉化,則可能需要進行A / B測試。
7.仔細格式化結帳表格
移動端設計良好的簽出表單遵循相當嚴格的公式。儘管在構建表單,每頁步驟數量,影象等方面在桌面端可能會有不同的展示效果,這時候在設計的時候就要注意靈活性。
相反,在構建表單時需要非常細緻:
1.設計結賬表單的每個欄位,以便延伸網站的整個寬度。
2.將欄位限制為唯一必需的欄位。
3.在輸入框的上端和外側給出清楚的標記。
4.至少使用16畫素字型。
5.對每個欄位進行格式化,使其足夠大,無需縮放即可進入。
6.需要標記時使用可識別的標誌(例如星號)。
7.在資訊輸入到欄位後,一旦發生錯誤,一定要讓使用者知道。
8.將CTA用語放在表單的最底部。
由於結賬表單是客戶通過結賬流程最重要的元素,因此不能亂用經過驗證的真實公式。如果使用者不能快速地從上到下瀏覽內容,如果這些欄位太難懂,或者表單本身的功能就充滿了錯誤,那麼你可能會跟使用者說再見。
Crutchfield展示瞭如何在建立手機上非常使用者友好的表單:

該按鈕可作為向客戶表明他們還沒有準備好提交其購買資訊的指標,這非常棒。即使表單設計精美 - 所有內容都有很好的標籤,欄位很大,表單也是有邏輯有組織的 - 移動使用者可能會意外地將欄位滾動太遠,直到點選CTA才會知道它。
如果可以防止使用者收到可怕的“缺失資訊”錯誤,那麼使用者能快速完成購買。
8.簡化表格輸入
深入挖掘這些表單的聯絡,讓我們看看如何簡化移動資料的輸入:
1.允許客戶使用瀏覽器的自動填充功能填寫表單。
2.包含一個tabindex HTML指令,使客戶可以在表單中上下點選箭頭。這使得他們的拇指始終保持在智慧手機的舒適範圍內,而不是不斷地進入新的領域。
3.新增一個複選框,自動將帳單地址資訊複製到發貨欄位。
4.根據輸入的欄位型別更改鍵盤。
一個例子是Bass Pro Shops的移動網站:

對於初學者來說,鍵盤使用標籤功能(參見鍵盤上方的向上和向下箭頭)。對於手指短或不耐煩且只想在鍵盤上打字的顧客,這些標籤有助於將雙手保持在一個位置,從而加速結賬。
此外,當客戶選擇僅限數字欄位(例如他們的電話號碼)時,鍵盤會自動更改,因此他們不必手動切換。再次,這是增加在移動裝置上進行購買的便利性的另一種方式。
亞馬遜的移動收銀臺包括一個快速複選框,可簡化客戶提交的賬單資訊:

正如我們在移動式結賬表單設計中看到的那樣,簡單一點總是更好。顯然,每次都需要收集客戶的某些細節(除非他們的賬戶已經儲存了這些資訊)。儘管如此,如果可以提供快速切換或複選框,以使他們能夠將資料從一種表單複製到另一種表單,然後執行操作。
9.不要跳過CTA
在設計桌面結帳時,對CTA的主要擔憂是按鈕的位置是否足夠重要、顏色是否足夠引人注目。
但是,在移動裝置上,也必須考慮尺寸 - 而不僅僅是在螢幕上佔用多少空間。請記住拇指區域以及使用者握住手機的各種方式。確保按鈕足夠寬,以便任何使用者都可以輕鬆點選它,而無需改變其手的位置。
因此,您的目標應該是設計(1)位於移動結賬頁面底部的按鈕,以及(2)從Staples的移動網站上的情況一直從左向右拉伸:

無論誰正在進行購買 - 左手,右手或雙手搖籃 - 該按鈕將很容易到達。
在我們今天介紹的所有移動式結賬增強功能中,CTA是最容易解決的問題之一。使其變大,賦予其獨特的色彩,將其放置在移動螢幕的最底部,並使其跨越整個寬度。換句話說,不要讓客戶在購買的最後一步太費力氣。
10.提供備用方法
最後,給客戶一個替換的選項。
假設他們在移動網站上購物,將商品新增到購物車中,但有些東西並不適合他們,他們也不想購買。你已盡全力向他們提供清晰,簡單且安全的結帳體驗,但他們只是沒有信心在手機上進行付款。
而不是僅僅希望清空購物車,給他們一個機會來儲存它以備後用。這樣,如果他們真的有興趣購買你的產品,他們可以在桌面上重新訪問並拉動觸發器。這並不理想,因為你確實希望將它們保留在手機上,但對於無法儲存的客戶而言,此選項非常有用。
正如您在L.L.Ban的移動網站上看到的那樣,結賬時有一個選項可用於“移至願望清單”:

關於這一點很好的是,L.L. Bean顯然不希望瀏覽願望清單或刪除某個專案作為主要操作。如果“移動到願望清單”顯示為一個大膽的CTA按鈕,更多的客戶可能會決定採取這個看似更安全的選擇。正如現在所設計的,它更像是一個“嘿,我們不希望你做任何你不舒服的事情。這是為了以防萬一。“
雖然網頁設計中的選項通常較少,但如果您的結帳在移動裝置上的購物車放棄率較高,則可能需要進行一些探索。