設計最終目標：“無摩擦”

杭州網(wǎng)站建設和他的團隊創(chuàng)建的結帳系統(tǒng)為在此基礎上構建未來的工作奠定了基礎。它是一個基于組件的系統(tǒng)，因此可以添加新的組件，例如字段和按鈕元素，并且可以修改或添加功能，而無需對整個系統(tǒng)進行全面檢查。

2.最終目標：“無摩擦”

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

他寫道，雖然極簡設計減少了體驗的表面積，但無摩擦設計是要減少體驗所需的能量。這在結帳設計中尤其重要。

他給出了無摩擦設計的6條原則：

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

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

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

值得一提的還有Sinofsky的＃5原則：構建功能，而不是裝飾效果。什么是“吹毛狗”？

Futzer是巧妙地偽裝成名詞的“ futzing”一詞（您可能聽起來更熟悉）。這是導致無意義的擺弄和浪費時間的事情。

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

說明這一點的一個好方法是查看購物者放棄購物車的主要原因。我想重點介紹兩項購物車放棄研究，并從兩者中汲取見解。

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

給出的六個原因與特征和裝飾效果之間的平衡有關。一探究竟：

1. “網(wǎng)站導航太復雜了”…引信過多。
2. “過程花費的時間太長”…過多的小裝飾。
3. “過多的支付安全檢查”…太多小裝飾。
4. “有關付款安全性的擔憂”…功能不足。
5. “交付選項不合適”……功能不足。
6. “價格以外幣表示”……功能不足。

換句話說，公司正在損失收入，因為購物者會在太多的裝飾物和功能不足的情況下離開。

在Baymard Institute在2016年進行的一項類似研究中，可用性研究人員發(fā)現(xiàn)，有27％的美國在線購物者僅僅是因為“結賬過程太長/太復雜而放棄了購物車”。“

Baymard的基準數(shù)據(jù)庫顯示，平均美國結帳流程包含默認顯示給用戶的23.48個表單元素。但是，研究結果表明，可以將平均結帳時間減少20-60％。

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

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

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

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

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

如果您的數(shù)據(jù)庫包含有關客戶的信息，請使用它來減少他或她必須填寫的字段數(shù)。亞馬遜的一鍵式購買功能就是一個很好的例子。

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

Shopify會使用“檢查點”維護數(shù)據(jù)。這意味著，如果用戶繼續(xù)進行運輸?shù)诟犊钸^程中退出，則收集的數(shù)據(jù)將得到維護，并且用戶可以從上次停止的地方繼續(xù)上路。

4.原諒設計

這三個品牌之間的最終共同點是“寬恕設計”的想法-設計者的目標是防止在結帳過程中出現(xiàn)任何錯誤。出色的結帳功能并沒有嚴格限制錯誤，而是讓用戶擺脫懶惰，因為缺少更好的詞匯。

以下是結帳流程中“寬容設計”的三個示例：1）添加禮品卡和折扣，2）禁用“提交”按鈕，以及3）輸入電話號碼。

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

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

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

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

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

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

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