如何像PRO一樣的設(shè)計(jì)出驚人的網(wǎng)頁交互體驗(yàn)？

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

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

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

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

• ThinkGeek用戶體驗(yàn)總監(jiān)?Matt Chwat。馬特（Matt）在ThinkGeek（互聯(lián)網(wǎng)第一大（也是最討厭）的在線商店）工作了九年。他既是UX設(shè)計(jì)人員，又是前端開發(fā)人員。
• Shopify的設(shè)計(jì)總監(jiān)Kevin Clark。凱文·克拉克（Kevin Clark）是Shopify位于蒙特利爾的購買體驗(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ì)。用戶單擊購物車圖標(biāo)后，您就進(jìn)入了Kevin團(tuán)隊(duì)的域。從電子郵件收據(jù)，商戶與客戶的互動(dòng)，到實(shí)時(shí)訂單狀態(tài)頁面，所有內(nèi)容-如果您是在Shopify網(wǎng)站上購買商品的，那么奇數(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ì)無縫結(jié)帳時(shí)要記住的5條通用原則。

?

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

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

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

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

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

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

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

單頁結(jié)帳示例：

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

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

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

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

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

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

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

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

?

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

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

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

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

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

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