設(shè)計(jì)網(wǎng)站商城的最佳體驗(yàn)

結(jié)帳體驗(yàn)可以說(shuō)是您在線商店中最關(guān)鍵的方面。任何打h和客戶都可能會(huì)分心，失望或離開(kāi)，從而使貴公司的收入（支付您的薪水）流失了。它需要是完美的。作為用戶體驗(yàn)設(shè)計(jì)師，確保結(jié)帳體驗(yàn)無(wú)縫有效是您的工作。沒(méi)錯(cuò)

在本文中，我想討論結(jié)賬設(shè)計(jì)和一些原則，以實(shí)現(xiàn)最佳的購(gòu)物付款體驗(yàn)。我知道。當(dāng)您聽(tīng)到“結(jié)帳設(shè)計(jì)”時(shí)，您可能會(huì)很高興……

…但是，在網(wǎng)上賺錢的過(guò)程中，橡膠恰逢其路。沒(méi)有結(jié)帳，您將不會(huì)獲得報(bào)酬。所以最好變好。

為了回答最佳結(jié)帳體驗(yàn)的問(wèn)題，我在主要的電子商務(wù)品牌中尋找了三位經(jīng)驗(yàn)豐富的UX設(shè)計(jì)師：ThinkGeek，Shopify和REI。這些公司看到數(shù)以百萬(wàn)計(jì)的美元，并且用戶每天都要通過(guò)其結(jié)帳“通道”。這三個(gè)人是：

• ThinkGeek用戶體驗(yàn)總監(jiān) Matt Chwat。馬特（Matt）在ThinkGeek（互聯(lián)網(wǎng)第一大（也是最討厭）的在線商店）工作了九年。他既是UX設(shè)計(jì)人員，又是前端開(kāi)發(fā)人員。
• Shopify的設(shè)計(jì)總監(jiān)Kevin Clark。凱文·克拉克（Kevin Clark）是Shopify位于蒙特利爾的購(gòu)買體驗(yàn)設(shè)計(jì)團(tuán)隊(duì)的設(shè)計(jì)主管。他負(fù)責(zé)監(jiān)督負(fù)責(zé)整個(gè)電子商務(wù)平臺(tái)的結(jié)帳體驗(yàn)的團(tuán)隊(duì)。用戶單擊購(gòu)物車圖標(biāo)后，您就進(jìn)入了Kevin團(tuán)隊(duì)的域。從電子郵件收據(jù)，商戶與客戶的互動(dòng)，到實(shí)時(shí)訂單狀態(tài)頁(yè)面，所有內(nèi)容-如果您是在Shopify網(wǎng)站上購(gòu)買商品的，那么奇數(shù)就是凱文及其團(tuán)隊(duì)的幫助。
• REI高級(jí)UX設(shè)計(jì)師 Catherine Ho。凱瑟琳曾在Intuit工作，在REI西雅圖工作了兩年。她喜歡UX，因?yàn)樗鼘Ｗ⒂谌耍⑶壹染哂屑夹g(shù)性又具有創(chuàng)造性。她在REI的角色是研究與設(shè)計(jì)之間的混合體。她的項(xiàng)目包括店內(nèi)設(shè)備，例如用于POS系統(tǒng)的iPod touch，iOS應(yīng)用程序以及會(huì)員和帳戶，特別是重新設(shè)計(jì)了登錄和愿望清單體驗(yàn)。

在與他們的對(duì)話中，我注意到設(shè)計(jì)無(wú)縫結(jié)帳時(shí)要記住的5條通用原則。

1. Shopify結(jié)帳體驗(yàn)的三個(gè)黃金標(biāo)準(zhǔn)：易于理解，簡(jiǎn)單和快速

2016年，Kevin Clark及其團(tuán)隊(duì)負(fù)責(zé)重新設(shè)計(jì)所有Shopify網(wǎng)站的結(jié)帳體驗(yàn)。那幾乎是一百萬(wàn)家商店。作為電子商務(wù)領(lǐng)域的榜首，人們的期望很高。

凱文（Kevin）和他的團(tuán)隊(duì)與主題小組緊密合作，致力于標(biāo)準(zhǔn)化通用Shopify結(jié)帳體驗(yàn)。所有Shopify主題都是相同的。

除了基本的安全感外，Shopify的購(gòu)買體驗(yàn)還應(yīng)該易于理解，簡(jiǎn)單且快速。

設(shè)計(jì)與事務(wù)一樣具有事務(wù)性和流程驅(qū)動(dòng)性的最佳方法是測(cè)試所有內(nèi)容。

例如，為了測(cè)試關(guān)于結(jié)帳體驗(yàn)應(yīng)包含多少步驟的假設(shè)，他和他的團(tuán)隊(duì)進(jìn)行了一項(xiàng)測(cè)試，將一頁(yè)，兩頁(yè)和三頁(yè)的體驗(yàn)進(jìn)行了比較，每種體驗(yàn)都具有相同的信息。

單頁(yè)結(jié)帳示例：

兩頁(yè)結(jié)帳的示例：

結(jié)果表明，一頁(yè)讓用戶感到不知所措，因?yàn)樗谝豁?yè)上顯示了太多的信息，兩頁(yè)將步驟劃分為尷尬，而三頁(yè)則變得簡(jiǎn)單易行。

這三個(gè)步驟是客戶信息，運(yùn)輸方式和付款：

— Shopify的凱文·克拉克（Kevin Clark）

這三個(gè)步驟在所有站點(diǎn)上都是一成不變的。但是除此之外，商店所有者還可以進(jìn)行一些定制以匹配其品牌。

但是對(duì)于自定義，Kevin建議不要過(guò)度使用：

相反，應(yīng)該設(shè)置適當(dāng)?shù)目丶?lái)保護(hù)一致，熟悉和安全的基準(zhǔn)體驗(yàn)。一個(gè)示例就是Shopify系統(tǒng)根據(jù)對(duì)比度算法（即深色背景上的淺色文字）知道要使用和不使用的顏色，并調(diào)整其可讀性。

凱文和他的團(tuán)隊(duì)創(chuàng)建的結(jié)帳系統(tǒng)為在此基礎(chǔ)上構(gòu)建未來(lái)的工作奠定了基礎(chǔ)。這是一個(gè)基于組件的系統(tǒng)，因此可以添加新的組件（例如字段和按鈕元素），并且可以修改或添加功能，而無(wú)需對(duì)整個(gè)系統(tǒng)進(jìn)行全面檢查。

2.最終目標(biāo)：“無(wú)摩擦”

Windows和Internet Explorer的父親是前微軟傳奇人物Steven Sinofsky，目前為Product Hunt，Box等公司提供咨詢服務(wù)，并是Andreessen Horowitz的董事會(huì)成員。他是一位內(nèi)心的設(shè)計(jì)師，也是產(chǎn)品開(kāi)發(fā)的大師。在他的無(wú)摩擦產(chǎn)品設(shè)計(jì)文章中，他指出了極簡(jiǎn)主義和無(wú)摩擦設(shè)計(jì)之間的區(qū)別。

他寫(xiě)道，雖然極簡(jiǎn)設(shè)計(jì)減少了體驗(yàn)的表面積，但無(wú)摩擦設(shè)計(jì)是要減少體驗(yàn)所需的能量。這在結(jié)帳設(shè)計(jì)中尤其重要。

他給出了無(wú)摩擦設(shè)計(jì)的6條原則：

1. 確定默認(rèn)值而不是選項(xiàng)
2. 創(chuàng)建功能或任務(wù)的一條路徑
3. 提供個(gè)性化而非定制
4. 堅(jiān)持所做的更改
5. 構(gòu)建功能，而不是裝飾
6. 一直正確地猜測(cè)

在REI，凱瑟琳最近在一個(gè)項(xiàng)目上實(shí)施了無(wú)摩擦設(shè)計(jì)的示例。她的團(tuán)隊(duì)發(fā)現(xiàn)，當(dāng)客戶準(zhǔn)備將商品添加到購(gòu)物車中時(shí)，登錄后會(huì)將客戶轉(zhuǎn)到新的網(wǎng)頁(yè)，從而破壞了購(gòu)物體驗(yàn)。為了解決此問(wèn)題，她A / B測(cè)試了登錄小部件，該小部件打開(kāi)了下拉登錄模式，從而將體驗(yàn)保持在頁(yè)面上，而不是將購(gòu)物者發(fā)送到新的登錄頁(yè)面。

數(shù)據(jù)分析顯示流量或流量沒(méi)有差異，因此他們保留了這一點(diǎn)。訪客可以登錄并繼續(xù)從同一頁(yè)面購(gòu)物，而不會(huì)失去位置感。這是Sinofsky＃2原則的一個(gè)示例：為功能或任務(wù)創(chuàng)建一條路徑。用戶的路徑是單邊的，而不是在道路上創(chuàng)建叉子來(lái)登錄或繼續(xù)購(gòu)物。

同樣值得一提的是Sinofsky的＃5原則：構(gòu)建功能，而不是裝飾效果。什么是“吹毛求疵者”？

Futzer是巧妙地偽裝成名詞的“ futzing”（可能聽(tīng)起來(lái)更熟悉）一詞。這是導(dǎo)致無(wú)意義的擺弄和浪費(fèi)時(shí)間的事情。

這是設(shè)計(jì)師被絆倒的地方。您如何確定特征與保險(xiǎn)絲之間的區(qū)別？正如Sinofsky所暗示的那樣，它需要一個(gè)微妙的平衡，既要給用戶提供他們想要的東西，又不能給用戶太多。

說(shuō)明這一點(diǎn)的一個(gè)好方法是查看購(gòu)物者放棄購(gòu)物車的主要原因。我想重點(diǎn)介紹兩項(xiàng)購(gòu)物車放棄研究，并從兩者中汲取見(jiàn)解。

在第一項(xiàng)研究（2013年）中，支付處理公司W(wǎng)orldpay調(diào)查了人們?yōu)楹尾桓跺X就離開(kāi)在線購(gòu)物車的原因。

給出的六個(gè)原因與特征和裝飾效果之間的平衡有關(guān)。一探究竟：

1. “網(wǎng)站導(dǎo)航太復(fù)雜了”…引號(hào)過(guò)多。
2. “過(guò)程花費(fèi)的時(shí)間太長(zhǎng)”…過(guò)多的小裝飾。
3. “過(guò)多的支付安全檢查”…過(guò)多的裝飾。
4. “有關(guān)付款安全性的擔(dān)憂”…功能不足。
5. “交付選項(xiàng)不合適”……功能不足。
6. “價(jià)格以外幣表示”…功能不足。

換句話說(shuō)，公司的收入減少是因?yàn)橘?gòu)物者在裝滿毛絨玩具而功能不足的情況下會(huì)離開(kāi)。

在Baymard Institute在2016年進(jìn)行的一項(xiàng)類似研究中，可用性研究人員發(fā)現(xiàn)，有27％的美國(guó)在線購(gòu)物者僅因“結(jié)賬過(guò)程太長(zhǎng)/太復(fù)雜”而放棄了購(gòu)物車。“

Baymard的基準(zhǔn)數(shù)據(jù)庫(kù)顯示，美國(guó)平均結(jié)帳流程包含默認(rèn)顯示給用戶的23.48個(gè)表單元素。但是，研究結(jié)果表明，可以將平均結(jié)帳長(zhǎng)度減少20-60％。

結(jié)帳研究的定性1：1適度可用性測(cè)試和眼動(dòng)追蹤研究表明，理想的結(jié)帳流程可以減少到12個(gè)表單元素（7個(gè)表單字段，2個(gè)復(fù)選框，2個(gè)下拉菜單和1個(gè)單選按鈕）接口）。

您的結(jié)帳有多少個(gè)表單元素？大于12的數(shù)字可能表示您的結(jié)帳流程中存在炸鍋。如何減少表單元素的數(shù)量？唯一的測(cè)試是最終的答案，但是就目前而言，接下來(lái)的步驟就足夠了。

3.維護(hù)數(shù)據(jù)

這是一個(gè)要問(wèn)您的結(jié)帳設(shè)計(jì)師的問(wèn)題：您如何在整個(gè)結(jié)帳流程中利用數(shù)據(jù)？

ThinkGeek的Matt認(rèn)為，最佳的結(jié)帳體驗(yàn)只會(huì)收集必要的數(shù)據(jù)，然后在交易結(jié)束之前一直保持這些數(shù)據(jù)：

如果您的數(shù)據(jù)庫(kù)包含有關(guān)客戶的信息，請(qǐng)使用它來(lái)減少他或她必須填寫(xiě)的字段數(shù)。亞馬遜的一鍵式購(gòu)買功能就是一個(gè)很好的例子。

通過(guò)了解客戶的數(shù)據(jù)，它可以以零的工作量正確地“猜測(cè)”用戶的首選送貨方式，地址和付款明細(xì)。通過(guò)一鍵式一鍵式結(jié)帳，就沒(méi)有機(jī)會(huì)遇到瓶頸。

Shopify會(huì)使用“檢查點(diǎn)”維護(hù)數(shù)據(jù)。這意味著，如果用戶繼續(xù)進(jìn)行運(yùn)輸?shù)诟犊钸^(guò)程中退出，則收集的數(shù)據(jù)將得到維護(hù)，并且用戶可以在他們離開(kāi)的地方繼續(xù)上路。

4.原諒設(shè)計(jì)

這三個(gè)品牌之間的最終共同點(diǎn)是“寬恕設(shè)計(jì)”的想法-設(shè)計(jì)者的目標(biāo)是防止在結(jié)帳過(guò)程中出現(xiàn)任何錯(cuò)誤。出色的結(jié)帳功能并沒(méi)有嚴(yán)格限制錯(cuò)誤，而是讓用戶擺脫懶惰，因?yàn)槿鄙俑玫脑~匯。

以下是結(jié)帳流程中“寬容設(shè)計(jì)”的三個(gè)示例：1）添加禮品卡和折扣，2）禁用“提交”按鈕，以及3）輸入電話號(hào)碼。

在第一個(gè)示例中，所有三個(gè)品牌都具有禮品卡和折扣-完善的在線交易結(jié)束工具。但通常情況下，并不總是很清楚在哪里輸入代碼或兌換卡。

據(jù)凱文·克拉克說(shuō)：

在Shopify，大量的工程工作使用戶可以將禮品卡或折扣代碼粘貼到同一字段中，然后系統(tǒng)會(huì)自動(dòng)對(duì)其進(jìn)行分類。犯錯(cuò)是不可能的。

其次，有時(shí)商店會(huì)禁用或“灰顯”提交/繼續(xù)按鈕，直到用戶填寫(xiě)所有必填字段。

你應(yīng)該這樣做嗎？在UX社區(qū)中，關(guān)于是否啟用“提交/繼續(xù)”按鈕一直是一個(gè)激烈的辯論，但根據(jù)Stack Exchange上一位用戶的非正式研究，一小部分網(wǎng)站中大約有5％或更少的網(wǎng)站使“提交/繼續(xù)”按鈕處于禁用狀態(tài)。

在Shopify，ThinkGeek和REI，即使缺少信息，也始終啟用“提交/繼續(xù)”按鈕。為什么？出于三個(gè)原因：

1. 它可以防止用戶混淆。“顯示為灰色”按鈕告訴購(gòu)物者出了什么問(wèn)題，但沒(méi)有指出確切的位置，而是盲目地尋找錯(cuò)誤。一個(gè)活動(dòng)的按鈕將傳達(dá)可點(diǎn)擊性，這將在需要有效輸入的字段上顯示一條簡(jiǎn)單消息（通常為紅色）。
2. 網(wǎng)站設(shè)計(jì)制作。在某些情況下（罕見(jiàn)），用戶可能在其瀏覽器中禁用了Javascript，這將阻止按鈕的動(dòng)態(tài)狀態(tài)更改從禁用變?yōu)閱⒂谩?/span>
3. 它可以防止開(kāi)發(fā)人員出錯(cuò)。可能已經(jīng)錯(cuò)過(guò)了有效的用例或應(yīng)該激活提交/繼續(xù)按鈕的輸入（即，國(guó)際性），使購(gòu)物者陷入困境，只能刷新或退出。