這3個UX用戶體驗是你在外貿(mào)獨立站轉(zhuǎn)換率優(yōu)化上不能忽視的

對于一個普通人來說，用戶體驗（UX: User Experience）和轉(zhuǎn)換率優(yōu)化（CRO）似乎是同一件事，因為它們都涉及為客戶創(chuàng)造最佳的用戶體驗。

在獨立站轉(zhuǎn)化率優(yōu)化是，運營者或UX設計師到底需應該對用戶體驗UX了解些什么？可以通過哪些方式改變獨立站的UX來完成CRO目標？

01 要提高轉(zhuǎn)化率，第一印象至關重要

據(jù)研究表明，對一個人形成第一印象只需要1秒。

對于網(wǎng)站來說，這個時間更短，你的用戶會在短短的0.5秒內(nèi)形成對網(wǎng)站的印象。他們決定繼續(xù)瀏覽，很大程度上取決于他們在這半秒內(nèi)對你網(wǎng)站的看法。

這個第一印象取決于很多因素：網(wǎng)站加載速度、排版、顏色、圖片、間距、對稱性、文字數(shù)量、字體等等。

雖然你不能全部都改變和優(yōu)化，但有修改某些東西的確可以使首次訪問者的印象更強烈。

1. 改進首屏設計

根據(jù)Chartbeat的數(shù)據(jù)，66%的網(wǎng)站用戶把時間都花在了首屏以下的內(nèi)容上（首屏的意思就是：用戶在不用向下滾動鼠標的情況下，在電腦上看到的一整屏的區(qū)域）。ClickTale也有類似的結(jié)果，它發(fā)現(xiàn)人們在76%的網(wǎng)頁上使用了滾動條，也就證明了大家的確是看了非首屏的內(nèi)容。

然而有一個重要提示：只有當人們發(fā)現(xiàn)首屏的內(nèi)容足夠吸引人時，才會深入到以下的內(nèi)容中。即使如此，用戶的大部分時間還是花在了首屏，正如Jakob Nielsen的這項眼球追蹤研究所顯示的那樣。

那么，如何才能讓折頁上面的區(qū)域更吸引人呢？介紹三種簡單但效果很好的方法。

A. 使用視覺提示來鼓勵互動

讓人們在這里停留更長時間的一個有力方法是通過視覺線索鼓勵人們進行互動。

以Airbnb的主頁為例：

首屏的視頻”播放”按鈕是一個可立即識別的視覺提示，這樣可以鼓勵訪問者的互動。

另一種策略是使用視覺提示來暗示在首屏的下方還有額外的內(nèi)容。DistanceToMars.com就是一個很好的例子：

向下指向的箭頭告訴訪問者，如果他們向下滾動頁面，會有更多的內(nèi)容。

B. 使用動畫來改變頁面內(nèi)容

另一種吸引用戶停留的策略是通過動畫改變頁面內(nèi)容。

例如，眼鏡公司Ditto，展示了其眼鏡變化的模型。換款本身以圖形的方式突出顯示，直觀地表明頁面內(nèi)容在變化。

這是一種聰明的方式，不僅可以向客戶展示你的商業(yè)模式，還可以讓客戶對你的產(chǎn)品感興趣。

C. 使用一個特別的導航樣式來鼓勵向下滾動

放棄標準的頂部導航菜單，使用視覺提示來引導讀者向下瀏覽。

Urban Walks網(wǎng)站提供了一個很好的例子。該頁面沒有使用頂部導航菜單，而是在頁面右側(cè)使用了一個菜單來引導讀者。

這告訴訪問者，在頁面的更下方還有更多的內(nèi)容。這也使上下移動變得更加容易，而無需任何滾動。

2. 提高獨立站加載速度

網(wǎng)站的速度對其成功至關重要：

根據(jù)一項調(diào)查，40%的人放棄了一個加載時間超過3秒的網(wǎng)站。

亞馬遜計算出，如果他們的頁面加載速度慢一秒，每年就會讓他們損失16億美元的銷售額。

谷歌也計算出，只要將搜索結(jié)果的速度減慢十分之四秒，他們每天就會損失800萬次搜索。

簡單地說，網(wǎng)站速度很重要。盡管你可能會有不同的想法，但這是一個設計問題，也是一個工程問題。

以下是作為設計師可以做的幾件事來提高網(wǎng)站速度。

A. 在頁面上方使用文字而不是圖片/視頻。

圖片通常是影響頁面大小的最大因素。如果你想讓更多的訪問者留下來，可以嘗試去掉首屏的圖片，用文字代替。

例如，InvisionApp的主頁在首屏有很多圖片和背景視頻。根據(jù)Pingdom的數(shù)據(jù)，頁面大小高達16MB，加載時間接近3秒。

相比之下，Basecamp的主頁只有少量的圖片和大量的文字。它的加載時間僅為1.32秒，大小僅為1.2MB。

B. 使用CSS圖標字體代替圖片

如果你的獨立站上使用圖標（icon），你可以通過用圖標字體替換圖標圖像，因為：

圖標字體使用矢量，而圖像使用光柵圖形，前者大小較?。ㄒ宰止?jié)計）。

圖標字體（如FontAwesome）包含在一個文件中，這樣可以最大限度地減少HTTP請求。

根據(jù)PicTonic的數(shù)據(jù)，相比使用圖標圖片，使用圖標字體可以減少14%的頁面加載時間。

3. 在布局中使用熟悉的設計模式

根據(jù)Google的研究，用戶在不到0.5秒內(nèi)就會對一個網(wǎng)站形成初步的”直覺”，而他們是否會停留，往往取決于這種直覺。

這項研究的主要發(fā)現(xiàn)是，”視覺復雜度低、原型性高”的網(wǎng)站被認為具有很強的吸引力。

簡單來說，讓你的網(wǎng)頁設計簡單而熟悉。如果你去追求創(chuàng)新的、非常規(guī)的布局，人們可能會不太會喜歡。

例如，用戶習慣于以一種熟悉的方式瀏覽電子商務類的網(wǎng)站。所以，堅持這種模式是一個更好好主意。

看看Etsy是如何通過顯示購物車、注冊和帶有下拉菜單的類別來保持他們的主頁與其他電子商務網(wǎng)站一樣接近：

一個讓用戶感到很困惑的獨立站不太可能有很好的轉(zhuǎn)化（并導致糟糕的用戶體驗）。遵循大家已經(jīng)熟悉的設計模式是很重要的。

02 用清晰度和易用性來促進轉(zhuǎn)化率

雖然你必須在網(wǎng)站設計中力求簡潔，但不要忘記”易用”和”轉(zhuǎn)換”才是你的最終目標。

這對于用戶體驗和CRO來說同樣重要。只要有可能，就應力求清晰和易用。舉個例子，這里有兩個彈窗：

第一個選項可能更簡短，但第二個選項對用戶更友好，而且不太可能導致錯誤的點擊。讓按鈕變得不言自明，實際上簡化了整個對話。

如果你是在賣東西，第二種選擇很可能會讓你獲得更多的銷量。

那么你應該如何運用這個規(guī)則呢？這里有幾個策略：

1. 在設計中擁抱簡潔

如果你想讓更多的人在你獨立站上做一些事情，比如：點擊一個按鈕，提交一個詢盤，甚至閱讀一篇博客文章，那么做減法可能會更好。

從本質(zhì)上講，你想用更少的文字表達更多的內(nèi)容。

MailChimp的登陸頁面就是一個完美的例子。整個頁面只是一個單一的屏幕，只有不到100個字。

簡潔的信息加上展示產(chǎn)品的GIF動圖，簡明扼要地表達了價值主張。

2. 利用視覺層次感來強調(diào)你的信息

在任何頁面上（以及現(xiàn)實生活中），人們都會先被最大的元素所吸引。

這是設計中所有視覺層次結(jié)構(gòu)的基礎，你要做的就是把你最重要的信息（就是那些可以幫助你的轉(zhuǎn)換目標的信息）在尺寸上變得明顯大于其他信息。

以Moz.com主頁為例：

獨立站價值主張的字體大應該最大，這樣才能立即吸引瀏覽者的注意力。

3. 使用排版來支撐你的轉(zhuǎn)化目標

排版設計不僅僅是挑選一種漂亮的字體那么簡單，排版遠比這更復雜和深刻。

每一種字體都有自己個性，你應該選擇目標受眾喜歡或能產(chǎn)生共鳴的字體。

例如：有些字體由于其固有的設計或文化原因，被視為”權(quán)威”或”值得信賴”的字體，例如，Helvetica被視為一種”官方”字體，因為它經(jīng)常被用于政府稅收表格。

在為你的設計挑選字體時，選擇一些與你的受眾關心的事物產(chǎn)生共鳴的字體，或者能夠放大你的信息的影響力的字體。

例如，《經(jīng)濟學人》就以客觀和現(xiàn)代為榮。一個干凈的無襯線字體（sans serif）很適合它的訂閱頁面。

4. 使用顏色來吸引人們對頁面特定區(qū)域的注意

除了品牌，顏色還可以用來傳達視覺層次，建立元素之間的關系，吸引用戶的注意力。

在決定顏色時，一個很好的經(jīng)驗是：深色的顏色往往會帶來更多的視覺重量，盡量用較淺的顏色來平衡這些。

例如，這個網(wǎng)站使用大膽的黃色來強調(diào)標志和平衡深色背景。

在HubSpot定價頁面上，中間層計劃的亮橙色立刻吸引了瀏覽者的注意力。

03 創(chuàng)造“有說服力的設計”（Persuasive Designs）

我們知道，提高可用性對提高用戶去完成特定目標的很有幫助。

然而，通過故意阻礙用戶的行動，你可以讓更多的人被轉(zhuǎn)化，通常是以犧牲長期的客戶忠誠度和信任度為代價的。在設計中，這些都是屬于?；ㄕ械氖址?。它們可能會增加轉(zhuǎn)化率，但不一定能帶來更快樂的客戶或更健康的企業(yè)。

一個合乎商業(yè)道德的替代方案是使用一個“說服、情感、信任”的設計框架，將用戶推向你的轉(zhuǎn)化目標。

按照CodeComptuerlove的說法，這個框架有四個步驟。

下面來詳細了解一下：

1. 消除障礙，讓人們輕松執(zhí)行每一個動作

在“說服設計”過程中的第一步，也是最簡單的一步，就是讓它很容易執(zhí)行行動。

這意味著讓你的按鈕和CTA應該很容易被找到和被點擊。在任何時候，用戶都不應該困惑于下一步該采取什么步驟或采取步驟的最佳路徑是什么。

例如，亞馬遜通過視覺標記讓用戶很容易看到他們在結(jié)賬過程中的位置。

2. 建立信任，說服人們采取行動

一旦用戶點擊了CTA，你的下一步應該是獲得用戶的信任并鼓勵他們采取更進一步的行動。這是一個兩部分的過程。

信任建立的第一部分是改變你的頁面設計。你可以使用幾種轉(zhuǎn)換策略來實現(xiàn)這一點，例如。

添加與你合作過的品牌的logo

添加信任標記

添加值得信賴的權(quán)威機構(gòu)的推薦信

信任建立的第二部分是確保用戶確切地知道當他們執(zhí)行一個動作時會發(fā)生什么。

例如，在HipMunk主頁上，搜索框明確標識，點擊”搜索”將顯示”頂級航空公司和旅游網(wǎng)站的航班”。

一些簡單的東西，如清楚地標明你的CTA也是很有幫助的。在亞馬遜上，產(chǎn)品頁面上的兩個按鈕清楚地表明了它們將執(zhí)行什么操作，”添加到購物車”或”一鍵購買”。

3. 提供情緒化的觸發(fā)器，讓訪問者執(zhí)行一個動作

信任對于促進行動是好的，但它的效果卻不如情感觸發(fā)器。

Facebook在這方面做得特別好。它的整個用戶界面都是為了突出你的朋友和家人在網(wǎng)站上采取的行動。由于你對朋友投入了感情，你會覺得更有必要去模仿一下。

例如，在每一個頁面上，F(xiàn)acebook都會準確地顯示出你的朋友們到底有多少人也喜歡了這個頁面。

如果你的這么多朋友都在執(zhí)行一個動作（比如本例中的頁面），你有可能也會更有動力去點個贊或關注一下。

4. 用勸導性的觸發(fā)器來促使用戶采取行動

當你把上面所有的內(nèi)容結(jié)合起來，你就可以創(chuàng)建一個強大的說服觸發(fā)器，讓用戶采取行動。

回到Facebook，該網(wǎng)站上最強大的觸發(fā)器之一是它的通知圖標。這個鮮艷的紅色在全藍色的網(wǎng)站上是一個強大的視覺提示。

當你點擊通知時，你會看到你的朋友們剛剛進行的行動的確切描述。這建立了信任，并給你一個情感觸發(fā)器來采取行動。當你點擊一個通知時，它會將你帶到準確的頁面或地方，方便你開始任何的行動。

這就是對說服力設計的巧妙運用，它在不迷惑用戶的情況下完成了這一切。

04 總結(jié)

你的目標是在不影響轉(zhuǎn)化率的前提下，為用戶創(chuàng)造令人信服的體驗。如果你遵循上面的建議，你不僅能達到你的用戶體驗目標，還能在這個過程中獲得更多的轉(zhuǎn)化率。

另外，上面展示的并不是適用于所有人。你可以借用建議來做你的研究，但一定要用測試來支持你的判斷。只要你去優(yōu)化，你就會看到很多驚喜。

（來源：四兩網(wǎng)）

以上內(nèi)容屬作者個人觀點，不代表雨果網(wǎng)立場！本文經(jīng)原作者授權(quán)轉(zhuǎn)載，轉(zhuǎn)載需經(jīng)原作者授權(quán)同意。

（來源：四兩轉(zhuǎn)化率優(yōu)化CRO）