一款出色的結(jié)賬表單都具備什么特點(diǎn)?

1 評論 4340 瀏覽 33 收藏 12 分鐘

對于客戶來說,購買東西的流程越容易,他們就越容易進(jìn)行購買。

毫無疑問,結(jié)賬體驗(yàn)是所有網(wǎng)上商店最重要的一部分,表單的設(shè)計(jì)直接關(guān)系著電子商務(wù)網(wǎng)站的轉(zhuǎn)換率 – 更快,更方便用戶填寫的表單,就意味著將獲得更高的轉(zhuǎn)換率。

作為用戶體驗(yàn)設(shè)計(jì)師,而你的工作就是確保用戶有一個(gè)無縫且高效的結(jié)賬體驗(yàn)。在本文中,我將分享十個(gè)非常實(shí)用的小技巧來幫助你設(shè)計(jì)出一款出色的結(jié)帳表單。

1. 不要強(qiáng)迫用戶創(chuàng)建帳戶

據(jù)Baymard研究所稱,強(qiáng)制性要求用戶創(chuàng)建賬戶是人們放棄購買流程的首要原因之一。不要犯這樣的錯(cuò)誤!允許用戶不需要?jiǎng)?chuàng)建賬戶即可購買商品。重要的是,你不僅要提供客人的結(jié)帳選項(xiàng),還要使其清晰可見。

Baymard 研究院發(fā)現(xiàn),88%的移動支付表單未能使訪客結(jié)賬選項(xiàng)達(dá)到清晰可見的效果,因此用戶經(jīng)常忽略它。

eBay為用戶提供了一個(gè)訪客選項(xiàng)

2. 減少用戶注冊所需的信息

談到信息收集時(shí),最重要的原則便是“少即是多”。Baymard的一項(xiàng)研究發(fā)現(xiàn),近三分之一的美國在線購物者因“太長/太復(fù)雜的結(jié)賬流程”而放棄了他們的購買。同一項(xiàng)研究發(fā)現(xiàn),平均付款的時(shí)間是有可能縮短20-60%的。因此,作為設(shè)計(jì)師,你應(yīng)該盡量減少用戶的信息量。例如,如果你并不打算打電話給你的客戶,則無需要求他們的電話號碼。

通過減少所填字段,不僅可以提高完成時(shí)間,還可以讓此過程進(jìn)行的更加順暢。字段數(shù)越少意味著用戶的認(rèn)知負(fù)擔(dān)越小,因此潛在錯(cuò)誤就會減少。

提示:清楚標(biāo)記所有可選字段。如果你有可選字段,則應(yīng)該用單詞“optional(可選)”或“*”符號進(jìn)行標(biāo)記。這將讓那些想要盡快填寫完表單的用戶快速的跳過這些字段。

3. 不要使用字段標(biāo)簽作為占位符

帶標(biāo)簽的主要目的不是在用戶輸入數(shù)據(jù)時(shí)隱藏它們。字段標(biāo)簽應(yīng)始終保持可見; 理想情況下,他們應(yīng)該位于字段的頂部或左側(cè)。如果你設(shè)計(jì)的移動端并且屏幕空間有限,則可以使用浮動標(biāo)簽技術(shù)。當(dāng)用戶激活一個(gè)字段時(shí),占位符文本會淡出,并且跳出顯示在頂部。

標(biāo)簽應(yīng)始終展現(xiàn)給用戶 圖片來源:MDS

4. 設(shè)計(jì)單列表格

在多列形式下,眼睛會遵循曲線型瀏覽,這使得用戶更難專注于某些元素(眼睛不會注意到某些特定的元素)。因此,多列表格會增加完成時(shí)間。當(dāng)表格由單列組成時(shí),用戶會更容易進(jìn)行瀏覽 – 因?yàn)檠劬裱怪睊呙枘J健?/p>

5.將大量相關(guān)信息分在一起

一次性顯示出太多的信息,會讓用戶感到有些不知所措。分層技術(shù)可以幫助你提供相同數(shù)量的信息而無需過載。有兩種類型的組塊:

頁面上的分組。你可以將相關(guān)信息分組在一起,并按邏輯順序排列。

左:字段之間沒有可視的劃分。右圖:相同數(shù)量的字段在視覺上被分成3個(gè)部分。圖片:NNGroup

創(chuàng)建多步結(jié)帳過程。你可以將結(jié)帳過程分解為多個(gè)單獨(dú)的步驟。例如,典型的結(jié)賬流程可以分為四個(gè)步驟 – 客戶信息,運(yùn)送方式,付款,訂單匯總。將大任務(wù)分解為幾個(gè)較小的任務(wù)可以讓用戶專注于一種特定類型的輸入。但是如果你使用這種方法,請確保你的結(jié)帳過程是易于操作和理解的。用戶需要了解他們花費(fèi)多少時(shí)間來完成付款。如果你可以提供一個(gè)易于用戶填寫和操作的表單,這就太棒了。

多步結(jié)帳流程:表單清楚表明用戶當(dāng)前處于哪個(gè)階段。

提示:對于多步驟結(jié)帳流程,確保后退按鈕操作與用戶期望保持一致非常重要。用戶期望后退按鈕能讓他們退后一步(到他們認(rèn)為是他們上一頁的地方),而不是回到產(chǎn)品頁面。第二種行為通常伴隨著用戶數(shù)據(jù)丟失,因此可能會導(dǎo)致用戶放棄結(jié)賬流程。

6.幫助用戶填寫地址

盡量減少用戶打字的需求。當(dāng)用戶開始輸入地址時(shí),你可以使用自動建議和自動完成機(jī)制。諸如Google地理定位搜索之類的服務(wù), 在用戶輸入前幾個(gè)字是就可自動匹配地址。同時(shí),你應(yīng)該使預(yù)填充字段可編輯,以便用戶可以更改其中的信息。

自動匹配地址功能。圖片來源: Eric Nguyen

提示:在手機(jī)上填寫地址的步驟可能會更加直接。你可以要求訪問用戶的當(dāng)前位置并根據(jù)當(dāng)前位置進(jìn)行填充。

7.提供不同的付款選項(xiàng)并創(chuàng)建一張完美信用卡表格

提供盡可能多的支付選項(xiàng),這樣用戶可以選擇他們最喜歡的方法。

沃爾瑪允許使用信用卡,禮品卡和許多其他受歡迎的支付方式(如PayPal)進(jìn)行支付。

在許多支付選項(xiàng)中,信用卡仍然是最常用的支付方式之一。這一點(diǎn)非常重要:確保結(jié)賬表單已針對使用信用卡購物進(jìn)行了優(yōu)化,這里有幾件事要記?。?/p>

  • 告知用戶可接受的卡片類型。你可以將此信息和支持卡發(fā)行商的圖標(biāo)放在一起。如果你的支付系統(tǒng)不支持某種類型的卡片,請?jiān)谟脩糨斎肟ㄌ枙r(shí)告訴他們。
  • 根據(jù)輸入的第一個(gè)數(shù)字顯示卡類型。前六位數(shù)字標(biāo)識用戶卡的確切發(fā)行者。將卡發(fā)行者的標(biāo)志顯示出來更好,這樣用戶可以看到系統(tǒng)已經(jīng)識別了他/她的卡。
  • 使用卡片有效期的占位符文本。幫助用戶進(jìn)行有效格式的輸入。
  • 當(dāng)詢問“安全碼”時(shí),請?zhí)崾究蛻粼谀睦锟梢哉业剿_@可能與字段旁邊的’?’圖標(biāo)類似,當(dāng)用戶點(diǎn)擊它時(shí)會彈出顯示信息。請記住,“安全代碼”不統(tǒng)一 – 不同的發(fā)卡機(jī)構(gòu)使用不同的命名,位置和長度(例如,VISA的安全代碼位于卡的背面,由三位數(shù)字組成,而對于AMEX,安全代碼在前面并包含四位數(shù)字)。

Visa / MasterCard,JCB和American Express的安全碼

銀行卡信息格式滿足上述所有要求

8.提供訂單匯總

在購買前提供訂單匯總至關(guān)重要。此功能允許用戶查看訂單詳細(xì)信息和選定的交貨選項(xiàng),再次確認(rèn)費(fèi)用以及送貨信息是否正確,并在必要時(shí)進(jìn)行更改。

Asos提供訂單匯總:用戶可以查看和修改他們的訂單

9.設(shè)計(jì)“快速購買”功能

“快速購買”是使客戶回買的一個(gè)優(yōu)勢功能。如果你的數(shù)據(jù)庫包含有關(guān)客戶的信息,那就不必要求他們重新執(zhí)行所有的付款步驟。此功能可讓用戶直接跳轉(zhuǎn)到訂單匯總界面,可使用之前購買的結(jié)算和運(yùn)送信息。

亞馬遜的一鍵式購買功能可實(shí)現(xiàn)立即購買產(chǎn)品。這將從客戶購買數(shù)據(jù)中獲取有關(guān)首選運(yùn)輸方法、地址和付款細(xì)節(jié)的信息。

10. 提供在另一設(shè)備上完成購買的選項(xiàng)

一個(gè)比較典型的情況是,用戶會在移動設(shè)備上瀏覽商品,但在填寫結(jié)賬表單時(shí),他們會切換到桌面端。當(dāng)用戶切換到桌面時(shí),通過給他們提供一個(gè)“通過電子郵件發(fā)送到購物車”這樣的選項(xiàng),讓用戶能夠按照之前在手機(jī)上的步驟繼續(xù)進(jìn)行操作。

結(jié)論

當(dāng)談到結(jié)賬過程時(shí),你最終目標(biāo)是提高成功率(用戶轉(zhuǎn)換率)并減少完成時(shí)間(更快地完成)。對于客戶來說,購買東西的流程越容易,他們就越容易進(jìn)行購買。

 

原文作者:Nick Babich

原文地址:https://www.mockplus.com/blog/post/design-checkout-form

本文由@Mockplus團(tuán)隊(duì)?翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載。

題圖來自PEXELS,基于CC0協(xié)議

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!