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

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

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

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

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

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

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

我可以就這么一直列下去，因為影響用戶體驗的因素實在是太多了，而設(shè)計僅僅是其中一個因素而已。

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

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

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

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

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

這些內(nèi)容為何那么重要？因為消費者們有太多的選擇了。

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

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

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

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

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

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

02 4條電商UX指南

1. 功能至上

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

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

這些熱門趨勢一般很容易就能實現(xiàn)，因為他們看起來很不錯，問題就在于他們有時候不太穩(wěn)定，需要取決于其執(zhí)行的質(zhì)量。

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

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

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

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

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

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

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

這是你首先需要注意的一點，人們通常是帶著某種目的進入你的網(wǎng)站，不論是著陸頁或產(chǎn)品頁，還是博客文章，并不是因為他們無所事事。

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

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

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

你應當……?

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

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

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

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

進一步來說：

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

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

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

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

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

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

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

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

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

無論任何時候你都要從用戶入手，因為他們是你的潛在客戶。他們的需求如何，為何購買你的產(chǎn)品或服務，為何要選你，他們害怕什么以及你的產(chǎn)品或服務將如何改善他們的生活的？

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

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

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

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

是因為他們長得好看么？還是因為他們所說的話？

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

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

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

當一個網(wǎng)站（或者只是網(wǎng)站上一個很細微的元素）設(shè)計得不夠簡便，UX就有問題了。這一點在電商業(yè)中表現(xiàn)得尤為明顯，因為人們需要導航來更方便地瀏覽網(wǎng)站

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

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

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

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

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

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

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

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

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

就因為你有一個好的桌面版UX設(shè)計，并不代表你就有一個好的移動UX。移動是與桌面截然不同的情況，場景變了，目標也變了，動機也變了。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

你可以利用一些可能不是那么費錢的手段：

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

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

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

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

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

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

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

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