推特（Twitter）的聯(lián)合創(chuàng)始人Evan Williams曾說過：“UX（User Experience, 用戶體驗(yàn)）就是一切。其實(shí)它一直以來都是，只是在很長一段時間內(nèi)沒有得到足夠的重視與投資而已?！?/p>

電商的UX也沒什么兩樣，商家們會花成千上萬的錢在Facebook廣告、產(chǎn)品研究及設(shè)計上，然而，人們卻常常低估了UX的影響。

這是一個很嚴(yán)重的問題。它會影響到你的客流、客戶甚至是利潤，最終影響到你自己，如果你還沒有開始優(yōu)化你的UX，你得知道你的對手們估計已經(jīng)搶先一步開始了。

01 什么是UX？為什么你要重視它？

用戶體驗(yàn)（UX）是一個用戶在訪問你的網(wǎng)站時從頭到尾的綜合體驗(yàn)。一般來講，它通過網(wǎng)站給用戶所帶來的便捷度和舒適度來衡量，包括瀏覽店面、在網(wǎng)站上尋找他們想要的東西以及在線購物過程等。

在談及UX時，我猜大部分人一定首先想到的是設(shè)計，但是你必須知道一個積極正面的用戶體驗(yàn)可不僅僅是設(shè)計這么簡單。比如說：

• 網(wǎng)站的下載速度快么？
• 網(wǎng)站方便瀏覽么？
• 網(wǎng)站在移動設(shè)備上的體驗(yàn)也一樣便捷和舒適么？
• 網(wǎng)站的文案簡潔、具體和清晰么？
• 小圖標(biāo)容易辨識么？
• 是否除去不必要的步驟？

我可以就這么一直列下去，因?yàn)橛绊懹脩趔w驗(yàn)的因素實(shí)在是太多了，而設(shè)計僅僅是其中一個因素而已。

來自AGConsult的Karl Gilis這樣解釋道：

“很多人認(rèn)為UX只跟設(shè)計有關(guān)，我認(rèn)為UX不僅如此，因?yàn)樗脩粼谠L問網(wǎng)站時的體驗(yàn)有關(guān)，這也就意味著網(wǎng)站的方方面面以及你能提供的東西會對用戶的體驗(yàn)產(chǎn)生影響。

這也就是你為什么要重視它的原因：一個不好的體驗(yàn)會讓用戶離開你的網(wǎng)站。而且他不僅僅是離開，他離開的時候?qū)ζ放频挠∠罂赡芤膊淮蠛谩?/p>

我必須承認(rèn)，作為一個追求使用性能的人，我從來都沒有特別喜歡’UX’這個詞。其中一部分原因可能是就算我有一個不好的體驗(yàn)，我還是會有一個用戶體驗(yàn)，但是很多設(shè)計師通常會把關(guān)注點(diǎn)放在’體驗(yàn)’上，而且這個詞很可能會激發(fā)他們更為藝術(shù)與創(chuàng)意的一面，以致于忽略了’用戶’這個詞?！?/p>

以下這個來自Karl的UX演講的一張幻燈片將這一點(diǎn)表達(dá)得清清楚楚，它的大意是：UX的主要問題就在于，（差的）設(shè)計師只聽到’體驗(yàn)’這個詞。

這些內(nèi)容為何那么重要？因?yàn)橄M(fèi)者們有太多的選擇了。

據(jù)eMarketer預(yù)測，2020年由零售電商所創(chuàng)的銷售將超4萬億美元，達(dá)全年零售消費(fèi)的14.6%。

在選擇如此之多的情況下，如果你的UX讓人頭大或者設(shè)計得不怎么樣，那么消費(fèi)者們肯定會毫不猶豫地另選他人。

不要低估了當(dāng)UX低于標(biāo)準(zhǔn)時可能給消費(fèi)者造成的困擾，對他們來講換一家在線商店是輕而易舉的事。57%的消費(fèi)者已經(jīng)放棄購物車轉(zhuǎn)而選擇對比購物，不管你的UX質(zhì)量如何。

來自GetUplift.co的Talia Wolf解釋說，UX終于可以把消費(fèi)者放回中心位上：
“UX跟傳統(tǒng)的平面設(shè)計和UI（用戶界面）完全不同，它依賴數(shù)據(jù)和客戶，其主要任務(wù)是幫助客戶實(shí)現(xiàn)他們的目標(biāo)，而另外兩個內(nèi)容主要是負(fù)責(zé)好看。

UX建立在調(diào)查與驗(yàn)證上，最重要的是，它的核心是用戶。

設(shè)計和UI一般更注重頁面和品牌的美觀度，而UX則把重點(diǎn)放在更好地理解客戶的需求以及如何幫助他們達(dá)到這些目的上。UX的目的就是確保產(chǎn)品和你所打造的用戶體驗(yàn)相結(jié)合能夠滿足客戶的需求?！?/p>

02 4條電商UX指南

1. 功能至上

你熟悉以下幾條設(shè)計趨勢么？

• 視差滾動（前景層的元素比背景層的元素移動得更快）
• 圖片自動輪播
• 幽靈按鈕（透明按鈕 ）
• 視頻背景

這些熱門趨勢一般很容易就能實(shí)現(xiàn)，因?yàn)樗麄兛雌饋砗懿诲e，問題就在于他們有時候不太穩(wěn)定，需要取決于其執(zhí)行的質(zhì)量。

• 視差滾動通常效果不太理想，而且也不太容易執(zhí)行。
• 圖片自動輪播很容易分心，下載速度比較慢，而且反饋的呈現(xiàn)效果也不是特別好。
• 幽靈按鈕如其名，經(jīng)常很難點(diǎn)擊或被忽略。
• 視頻背景分散注意力，下載速度也慢。

正如之前所介紹的，重要的不是在線商店看起來如何，而是它是否可行：

“當(dāng)然設(shè)計很重要，但是它首先必須得是可行的，而不是看起來華麗與否。

你可以參考一下谷歌，愛彼迎或是亞馬遜的網(wǎng)站，這些網(wǎng)站在設(shè)計方面不一定是最富創(chuàng)意的，但它們可能比你的網(wǎng)站更受歡迎。

其實(shí)它們在設(shè)計上都有一個共同點(diǎn)：可行性很強(qiáng)，而且沒有令人眼花繚亂的視覺。

這就是一個好的UX設(shè)計關(guān)鍵所在，好的設(shè)計不一定就是添加各種元素，它是適當(dāng)添加所需元素，然后去除一些沒有必要的東西。

網(wǎng)頁上的每一個元素都必須能幫助訪客實(shí)現(xiàn)其目標(biāo)。

這是你首先需要注意的一點(diǎn)，人們通常是帶著某種目的進(jìn)入你的網(wǎng)站，不論是著陸頁或產(chǎn)品頁，還是博客文章，并不是因?yàn)樗麄儫o所事事。

你的設(shè)計應(yīng)該把重心放在這些目標(biāo)上?！本湍肈eath Wish Coffee做個例子吧，他們在網(wǎng)站上清楚地為產(chǎn)品區(qū)分優(yōu)先順序，就連主頁也一樣：

在你的視線內(nèi)絲毫沒有任何會分散注意力的東西，網(wǎng)站上的每個元素都是為同一個目標(biāo)而服務(wù)：賣更多的咖啡。

2. 以客戶為中心的文案應(yīng)該是設(shè)計的首要任務(wù)。

你應(yīng)當(dāng)……?

• 先寫好網(wǎng)站的文案，然后設(shè)計（或?qū)ふ遥┮粋€能夠與其相輔相成的主題。
• 先設(shè)計（或?qū)ふ遥┮粋€主題，然后根據(jù)主題來撰寫文案。

文案優(yōu)先還是設(shè)計優(yōu)先，是一直以來就存在的爭論。

如果你想要一個好的UX，你必須讓文案先于設(shè)計。你必須選擇第一種策略。

為什么？因?yàn)樵O(shè)計需要為文案而服務(wù)，使其更有爆發(fā)力，而不是反過來。畢竟，沒人會因?yàn)橐粋€網(wǎng)站很好看而買一件T恤或指尖陀螺，他們會購買這些東西，是因?yàn)榫W(wǎng)站的文案說服了自己。

進(jìn)一步來說：

“我覺得如果先從設(shè)計入手，而不知道要寫的內(nèi)容，是最大的錯誤之一。

注意：只有好的價值理念和內(nèi)容才能說服客戶，所以你應(yīng)該從此處下手。

不要只是購買一個主題，然后再把內(nèi)容套進(jìn)去。不要設(shè)計有”亂數(shù)文字”和占位符的內(nèi)容和圖片，如果在設(shè)計中出現(xiàn)這些內(nèi)容，那么當(dāng)你在給網(wǎng)站添加真實(shí)的內(nèi)容時，你會很抓狂的。

你首先需要找出客戶的需求是什么，然后才能開始準(zhǔn)備內(nèi)容（文案、圖片等），接著才可以著手設(shè)計。這樣你才能確保一切都符合需求，讓設(shè)計突出內(nèi)容，形式必須服從功能?！?/p>

在撰寫電商文案時，不要忘了把重點(diǎn)放在客戶身上。這也就意味著你得提前做一些調(diào)查研究來了解你的目標(biāo)客戶，例如，他們是如何瀏覽你的網(wǎng)站，對你的產(chǎn)品有何想法以及如何評價你的產(chǎn)品等。

Chubbies就是一個以客戶為中心撰寫電商文案的好案例，他們所寫的文案為客戶體驗(yàn)錦上添花。

你可以看看他們的“免費(fèi)禮品”條幅和產(chǎn)品介紹，這才是真正的客戶文案。

為什么這一點(diǎn)如此重要，而且在電商網(wǎng)站不斷發(fā)展的未來還將一樣重要？

“我知道很多人并不認(rèn)為這是UX的一部分，但它其實(shí)是UX的核心所在。

無論任何時候你都要從用戶入手，因?yàn)樗麄兪悄愕臐撛诳蛻?。他們的需求如何，為何購買你的產(chǎn)品或服務(wù)，為何要選你，他們害怕什么以及你的產(chǎn)品或服務(wù)將如何改善他們的生活的？

很多公司非常自我，他們一般從自己的想法開始，而且試圖展示他們認(rèn)為比較重要的一些特色。

注意：這跟你無關(guān)。你的訪客和顧客對你沒興趣，他們只在乎自己。

所以你不應(yīng)該吹捧自己所使用的科技有多新穎多高超，你只需要強(qiáng)調(diào)你的電池能夠持續(xù)數(shù)周，而不是數(shù)小時即可。

如果你認(rèn)為這是扯淡，那你可以回想一下好的銷售一般都是怎么說服你購買東西的。

是因?yàn)樗麄冮L得好看么？還是因?yàn)樗麄兯f的話？

對，是他們說的那些東西說服了你。當(dāng)我們談及語音界面時，它還將會是核心，沒有一個華麗的設(shè)計能夠掩飾糟糕的內(nèi)容?！?/p>

3. 設(shè)計簡便的導(dǎo)航來推廣可發(fā)現(xiàn)性

簡便的意思就是，很直白而且讓人容易看懂。當(dāng)一個訪客可以在你的網(wǎng)站上毫無障礙隨便瀏覽時，你的網(wǎng)站就是簡便的。聽起來可能很簡單，但是很少有些人能夠做到簡便這一點(diǎn)。

當(dāng)一個網(wǎng)站（或者只是網(wǎng)站上一個很細(xì)微的元素）設(shè)計得不夠簡便，UX就有問題了。這一點(diǎn)在電商業(yè)中表現(xiàn)得尤為明顯，因?yàn)槿藗冃枰獙?dǎo)航來更方便地瀏覽網(wǎng)站

導(dǎo)航對于幫助訪客尋找自己需要的產(chǎn)品或者可能要購買的內(nèi)容來說極為重要。如果電商可發(fā)現(xiàn)性的過程不夠便捷，那么訪客完全可以選擇離開，到一個更為好用的網(wǎng)站上去尋找自己想要的東西，至少他們不太可能會選擇在你的商店里“逛逛看”，也不太可能會繼續(xù)回來購買。

在設(shè)計網(wǎng)站導(dǎo)航時，你需要謹(jǐn)記：

• 分類卡能幫你更好地理解訪客將如何尋找產(chǎn)品和頁面。
• 標(biāo)簽盡可能使用熟悉的字眼，不要讓用戶浪費(fèi)時間在思考上。
• 使用經(jīng)典的電商網(wǎng)站設(shè)計模式。例如，用戶可能會希望購物車設(shè)計在網(wǎng)頁右上角，你需要設(shè)計一些讓人熟悉的元素。
• 即使在兩個類目下包含同一種子類目也沒問題。例如，有人若要尋找媒體單元，他們可能可以嘗試在“客廳”和“儲存”的類目下尋找“電視和媒體單元”類目。
• 你需要為那些很清楚自己需要什么的人設(shè)計內(nèi)部搜索選項。
• 如果使用圖標(biāo)，確保他們簡單易懂并使用標(biāo)簽。
• 確保在移動設(shè)備上點(diǎn)擊導(dǎo)航鏈接時便捷可行，這些鏈接通常被設(shè)計得太小了，不好點(diǎn)擊。
• 如果你有很多產(chǎn)品，你可能需要一個超級目錄，確保導(dǎo)航類目和子類目容易點(diǎn)擊且可行。另外，這些類目著陸頁對于SEO來講很有幫助。
• 請使用breadcrumbs（指顯示當(dāng)前頁面的路徑，快速返回之前的任意頁面）。
• 確保導(dǎo)航過程流暢無阻，使該過程和設(shè)計標(biāo)準(zhǔn)化。
• 將那些訪客已在的頁面鏈接設(shè)置成高亮。

Sivana將以上這些設(shè)計指南運(yùn)用得恰如其分……

所有的導(dǎo)航元素需能如預(yù)期運(yùn)行，子類目需可點(diǎn)擊，產(chǎn)品有序分類（另以價格分類）等。

當(dāng)你點(diǎn)擊子類目時，需要持續(xù)保持導(dǎo)航設(shè)計的便捷性。

所有的上衣類別都在左邊目錄上可見，而且該網(wǎng)站設(shè)計中還包含“按類別”或“篩選”選項，幫助訪客尋找想要的上衣，這點(diǎn)非常重要，因?yàn)樵撈放频漠a(chǎn)品類目特別多

4. 移動電商的UX與桌面版有些不同而且應(yīng)該將二者區(qū)別對待

到目前為止，我們一直都在討論電腦桌面版的電商UX，那么當(dāng)訪客在移動設(shè)備上訪問網(wǎng)站時會發(fā)生什么情況呢？

就因?yàn)槟阌幸粋€好的桌面版UX設(shè)計，并不代表你就有一個好的移動UX。移動是與桌面截然不同的情況，場景變了，目標(biāo)也變了，動機(jī)也變了。

如果你已經(jīng)意識到使用桌面版與移動版商鋪的人群有著不同的需求時，那么你就已經(jīng)事半功倍了，認(rèn)識到這一點(diǎn)的重要性可以讓你走在別人前面。

這也就是為什么隨便弄一個自適應(yīng)的主題并不能算移動UX的優(yōu)化，把桌面版的UX搬到移動上只是相當(dāng)于貼創(chuàng)可貼，而不是解決方案。

據(jù)Baymard研究顯示，移動UX是很多電商網(wǎng)站至今仍在頭疼的問題。78%的移動電商網(wǎng)站在使用綜合產(chǎn)品搜尋時還是表現(xiàn)得很不穩(wěn)定。

在設(shè)計移動電商UX時，你應(yīng)當(dāng)記住以下幾項內(nèi)容：

• 使整個瀏覽體驗(yàn)自然順暢，40%的移動電商網(wǎng)站不支持通過傳統(tǒng)的雙擊或雙指捏放放大或縮小圖片。
• 選擇正確的鍵盤。例如，當(dāng)你知道人們要輸入數(shù)字時，不要使用傳統(tǒng)的鍵盤。
• 清晰且突出重點(diǎn)特色。80%的移動結(jié)賬會給用戶提供“訪客結(jié)賬”的選項，但是88%的設(shè)計依然很容易被人忽略。
• 在結(jié)賬時關(guān)閉文字自動糾正功能。想想看，難道還有比在手機(jī)上輸入三次地址更讓人煩心的事么？
• 61%的移動用戶“偶爾”或“總是”要到電腦桌面上去完成他們的訂單，所以你應(yīng)該確保他們能夠?qū)崟r保存購物車。
• 允許訪客在當(dāng)前瀏覽的類目或子類目下進(jìn)行精確搜索。
• 可以嘗試電子支付選項來說服更多的移動用戶在移動設(shè)備上完成購物。
• 精煉，精煉，再精煉。盡量減少用戶要執(zhí)行某個動作時需要點(diǎn)擊屏幕的次數(shù)。
• 你需要特別注意在移動設(shè)備上的瀏覽質(zhì)量保證以及跨設(shè)備/跨瀏覽器嘗試，你的UX設(shè)計是否能夠滿足所有移動設(shè)備所有瀏覽器的需求？
• 速度非常重要，因?yàn)橐苿佑脩艉苋菀追中?，而且沒什么耐心，你應(yīng)該確?？蛻裟軌蜓杆偌虞d頁面。
• 允許客戶掃描信用卡，這樣他們就不需要手動輸入所有的銀行信息。
• 允許客戶保存其信息以便日后再次訪問，盡量減少他們需要在移動設(shè)備上輸入的信息量。

Epic Meal Time的店面就是成功的移動結(jié)賬UX設(shè)計。首先，你可以通過PayPal結(jié)賬：

然后在輸入手機(jī)號碼時出現(xiàn)數(shù)字鍵盤是一個比較聰明的細(xì)節(jié)，而且你還可以保留信息：

當(dāng)?shù)搅烁犊钸@一步時，又出現(xiàn)同樣的數(shù)字鍵盤（而且你還可以選擇掃描信用卡）。

記住，桌面UX與移動UX不同，蘋果手機(jī)的UX和安卓的UX也不一樣，你應(yīng)該站在訪客的角度上思考問題，時刻牢記電商UX的情境性。

03 如何在網(wǎng)站上找出UX問題

好的案例給人的感覺都很不錯，但他們能給到的也就這些。因?yàn)槊總€電商網(wǎng)站都不一樣，這也就意味著每個電商網(wǎng)站都會碰到不同的UX問題，那么我們又是如何才能找出這些問題的呢？

據(jù)介紹，這得靠調(diào)查：

“做一些用戶調(diào)查。完成這項任務(wù)可能需要費(fèi)點(diǎn)錢，你也可能需要花很多錢在這上面，但是可能有一些工具能夠幫到你，注意：是能夠幫到你。它們不會解決問題，但是會幫你找到問題?！?/p>

首先，你得定義“脫節(jié)點(diǎn)”。訪客是在哪里跳出漏斗的？他們有瀏覽過產(chǎn)品頁么？他們是在看到運(yùn)費(fèi)之后才打算放棄購買的么？還是在購物車?yán)镅b滿貨物的時候放棄的？

你需要盡可能地把注意力放在調(diào)查上。如果你帶著“改善UX”的心態(tài)進(jìn)去的，那么你所得到的的結(jié)果可能還不如你帶著“減少購物車放棄”或者”增加產(chǎn)品頁的添加購物車行為“這類更為具體的心態(tài)進(jìn)去所獲得的結(jié)果那么理想。

你可以利用一些可能不是那么費(fèi)錢的手段：

• 拖拽/點(diǎn)擊熱力圖：查看拖拽深度和點(diǎn)擊動機(jī)。你可以嘗試在那些人們想點(diǎn)擊但是又點(diǎn)不了的地方添加鏈接，如果你看到一個明顯的拖拽顏色變化，你可以看看你是否不小心在頁腳的設(shè)計出了錯。留意一下人們會在頁面上往下拖多遠(yuǎn)，并設(shè)計相應(yīng)的信息階梯，試試通過視覺暗示來鼓勵鼠標(biāo)拖拽。
• 情景再現(xiàn)：觀看那些真實(shí)的用戶是如何瀏覽網(wǎng)站的。哪些地方讓他們頭大？哪些地方不夠順暢？他們是在哪里跳出漏斗？為何？
• 用戶測試：給人一些具體的提示（例如，尋找一個價值在89美元以下的手表然后將其加入購物車），然后觀看他們執(zhí)行這些提示的過程，再現(xiàn)用戶瀏覽過程中的思維與反應(yīng)。
• 5秒測試：用很短的時間展示你的網(wǎng)站，看看網(wǎng)站上的信息和價值主張是否清晰。

除此之外，當(dāng)然還有更多。你可以采用任何一種或多種能夠幫你達(dá)到目的最高效的方式。

04 如何解決網(wǎng)站上的UX問題

有些工具只能幫你找到問題所在，但是他們不會幫你解決問題。這一點(diǎn)需要由你自己來決定，幸好，你已經(jīng)基本上掌握了如何解決電商UX問題的一些套路了。

• 將UX問題按其預(yù)期影響和難易度分優(yōu)先級。
• 利用常識。你可以怎樣改善體驗(yàn)？這里可以用到你所做的調(diào)查。

UX有一半的問題就是認(rèn)知和教育，知道要尋找哪些內(nèi)容，摘下偏見的眼鏡，不要老是太在乎表面設(shè)計看起來如何。

專攻優(yōu)化和對內(nèi)營銷的數(shù)字戰(zhàn)略師精妙地總結(jié)：

“你經(jīng)常會考慮品牌能給客戶所帶來的體驗(yàn)，無論是你所售賣的產(chǎn)品的細(xì)節(jié)，還是客戶在拆開貨物時撕掉的包裝，如果你能夠同樣認(rèn)真地站在客戶的角度想象一下他們在網(wǎng)站上購物時的體驗(yàn)，那豈不是一件更有意義的事情么？你若不做，你的對手們肯定已經(jīng)在做了?！?/p>