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

對(duì)于一個(gè)普通人來說，用戶體驗(yàn)（UX: User Experience）和轉(zhuǎn)換率優(yōu)化（CRO）似乎是同一件事，因?yàn)樗鼈兌忌婕盀榭蛻魟?chuàng)造最佳的用戶體驗(yàn)。

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

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

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

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

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

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

1. 改進(jìn)首屏設(shè)計(jì)

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

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

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

A. 使用視覺提示來鼓勵(lì)互動(dòng)

讓人們?cè)谶@里停留更長(zhǎng)時(shí)間的一個(gè)有力方法是通過視覺線索鼓勵(lì)人們進(jìn)行互動(dòng)。

以Airbnb的主頁為例：

首屏的視頻”播放”按鈕是一個(gè)可立即識(shí)別的視覺提示，這樣可以鼓勵(lì)訪問者的互動(dòng)。

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

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

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

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

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

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

C. 使用一個(gè)特別的導(dǎo)航樣式來鼓勵(lì)向下滾動(dòng)

放棄標(biāo)準(zhǔn)的頂部導(dǎo)航菜單，使用視覺提示來引導(dǎo)讀者向下瀏覽。

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

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

2. 提高獨(dú)立站加載速度

網(wǎng)站的速度對(duì)其成功至關(guān)重要：

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

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

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

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

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

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

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

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

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

B. 使用CSS圖標(biāo)字體代替圖片

如果你的獨(dú)立站上使用圖標(biāo)（icon），你可以通過用圖標(biāo)字體替換圖標(biāo)圖像，因?yàn)椋?

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

圖標(biāo)字體（如FontAwesome）包含在一個(gè)文件中，這樣可以最大限度地減少HTTP請(qǐng)求。

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

3. 在布局中使用熟悉的設(shè)計(jì)模式

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

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

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

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

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

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

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

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

這對(duì)于用戶體驗(yàn)和CRO來說同樣重要。只要有可能，就應(yīng)力求清晰和易用。舉個(gè)例子，這里有兩個(gè)彈窗：

第一個(gè)選項(xiàng)可能更簡(jiǎn)短，但第二個(gè)選項(xiàng)對(duì)用戶更友好，而且不太可能導(dǎo)致錯(cuò)誤的點(diǎn)擊。讓按鈕變得不言自明，實(shí)際上簡(jiǎn)化了整個(gè)對(duì)話。

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

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

1. 在設(shè)計(jì)中擁抱簡(jiǎn)潔

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

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

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

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

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

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

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

以Moz.com主頁為例：

獨(dú)立站價(jià)值主張的字體大應(yīng)該最大，這樣才能立即吸引瀏覽者的注意力。

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

排版設(shè)計(jì)不僅僅是挑選一種漂亮的字體那么簡(jiǎn)單，排版遠(yuǎn)比這更復(fù)雜和深刻。

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

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

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

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

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

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

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

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

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

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

我們知道，提高可用性對(duì)提高用戶去完成特定目標(biāo)的很有幫助。

然而，通過故意阻礙用戶的行動(dòng)，你可以讓更多的人被轉(zhuǎn)化，通常是以犧牲長(zhǎng)期的客戶忠誠度和信任度為代價(jià)的。在設(shè)計(jì)中，這些都是屬于耍花招的手法。它們可能會(huì)增加轉(zhuǎn)化率，但不一定能帶來更快樂的客戶或更健康的企業(yè)。

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

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

下面來詳細(xì)了解一下：

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

在“說服設(shè)計(jì)”過程中的第一步，也是最簡(jiǎn)單的一步，就是讓它很容易執(zhí)行行動(dòng)。

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

例如，亞馬遜通過視覺標(biāo)記讓用戶很容易看到他們?cè)诮Y(jié)賬過程中的位置。

2. 建立信任，說服人們采取行動(dòng)

一旦用戶點(diǎn)擊了CTA，你的下一步應(yīng)該是獲得用戶的信任并鼓勵(lì)他們采取更進(jìn)一步的行動(dòng)。這是一個(gè)兩部分的過程。

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

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

添加信任標(biāo)記

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

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

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

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

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

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

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

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

如果你的這么多朋友都在執(zhí)行一個(gè)動(dòng)作（比如本例中的頁面），你有可能也會(huì)更有動(dòng)力去點(diǎn)個(gè)贊或關(guān)注一下。

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

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

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

當(dāng)你點(diǎn)擊通知時(shí)，你會(huì)看到你的朋友們剛剛進(jìn)行的行動(dòng)的確切描述。這建立了信任，并給你一個(gè)情感觸發(fā)器來采取行動(dòng)。當(dāng)你點(diǎn)擊一個(gè)通知時(shí)，它會(huì)將你帶到準(zhǔn)確的頁面或地方，方便你開始任何的行動(dòng)。

這就是對(duì)說服力設(shè)計(jì)的巧妙運(yùn)用，它在不迷惑用戶的情況下完成了這一切。

04 總結(jié)

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

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

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

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

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