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

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

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

據(jù)研究表明，對(duì)一個(gè)人形成第一印象只需要1秒。對(duì)于網(wǎng)站來(lái)說(shuō)，這個(gè)時(shí)間更短，你的用戶(hù)會(huì)在短短的0.5秒內(nèi)形成對(duì)網(wǎng)站的印象。他們決定繼續(xù)瀏覽，很大程度上取決于他們?cè)谶@半秒內(nèi)對(duì)你網(wǎng)站的看法。

這個(gè)第一印象取決于很多因素：網(wǎng)站加載速度、排版、顏色、圖片、間距、對(duì)稱(chēng)性、文字?jǐn)?shù)量、字體等等。雖然你不能全部都改變和優(yōu)化，但有修改某些東西的確可以使首次訪(fǎng)問(wèn)者的印象更強(qiáng)烈。

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

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

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

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

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

讓人們?cè)谶@里停留更長(zhǎng)時(shí)間的一個(gè)有力方法是通過(guò)視覺(jué)線(xiàn)索鼓勵(lì)人們進(jìn)行互動(dòng)。以Airbnb的主頁(yè)為例：首屏的視頻”播放”按鈕是一個(gè)可立即識(shí)別的視覺(jué)提示，這樣可以鼓勵(lì)訪(fǎng)問(wèn)者的互動(dòng)。

另一種策略是使用視覺(jué)提示來(lái)暗示在首屏的下方還有額外的內(nèi)容。就是一個(gè)很好的例子：向下指向的箭頭告訴訪(fǎng)問(wèn)者，如果他們向下滾動(dòng)頁(yè)面，會(huì)有更多的內(nèi)容。

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

另一種吸引用戶(hù)停留的策略是通過(guò)動(dòng)畫(huà)改變頁(yè)面內(nèi)容。例如，眼鏡公司Ditto，展示了其眼鏡變化的模型。換款本身以圖形的方式突出顯示，直觀地表明頁(yè)面內(nèi)容在變化。

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

放棄標(biāo)準(zhǔn)的頂部導(dǎo)航菜單，使用視覺(jué)提示來(lái)引導(dǎo)讀者向下瀏覽。Urban Walks網(wǎng)站提供了一個(gè)很好的例子。該頁(yè)面沒(méi)有使用頂部導(dǎo)航菜單，而是在頁(yè)面右側(cè)使用了一個(gè)菜單來(lái)引導(dǎo)讀者。這告訴訪(fǎng)問(wèn)者，在頁(yè)面的更下方還有更多的內(nèi)容。這也使上下移動(dòng)變得更加容易，而無(wú)需任何滾動(dòng)。

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

網(wǎng)站的速度對(duì)其成功至關(guān)重要：根據(jù)一項(xiàng)調(diào)查，40%的人放棄了一個(gè)加載時(shí)間超過(guò)3秒的網(wǎng)站。亞馬遜計(jì)算出，如果他們的頁(yè)面加載速度慢一秒，每年就會(huì)讓他們損失16億美元的銷(xiāo)售額。谷歌也計(jì)算出，只要將搜索結(jié)果的速度減慢十分之四秒，他們每天就會(huì)損失800萬(wàn)次搜索。簡(jiǎn)單地說(shuō)，網(wǎng)站速度很重要。盡管你可能會(huì)有不同的想法，但這是一個(gè)設(shè)計(jì)問(wèn)題，也是一個(gè)工程問(wèn)題。

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

A. 在頁(yè)面上方使用文字而不是圖片/視頻

圖片通常是影響頁(yè)面大小的最大因素。如果你想讓更多的訪(fǎng)問(wèn)者留下來(lái)，可以嘗試去掉首屏的圖片，用文字代替。例如，InvisionApp的主頁(yè)在首屏有很多圖片和背景視頻。根據(jù)Pingdom的數(shù)據(jù)，頁(yè)面大小高達(dá)16MB，加載時(shí)間接近3秒。相比之下，Basecamp的主頁(yè)只有少量的圖片和大量的文字。它的加載時(shí)間僅為1.32秒，大小僅為1.2MB。

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

如果你的獨(dú)立站上使用圖標(biāo)（icon），你可以通過(guò)用圖標(biāo)字體替換圖標(biāo)圖像，因?yàn)椋簣D標(biāo)字體使用矢量，而圖像使用光柵圖形，前者大小較?。ㄒ宰止?jié)計(jì)）。圖標(biāo)字體（如FontAwesome）包含在一個(gè)文件中，這樣可以最大限度地減少HTTP請(qǐng)求。根據(jù)PicTonic的數(shù)據(jù)，相比使用圖標(biāo)圖片，使用圖標(biāo)字體可以減少14%的頁(yè)面加載時(shí)間。

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

根據(jù)Google的研究，用戶(hù)在不到0.5秒內(nèi)就會(huì)對(duì)一個(gè)網(wǎng)站形成初步的”直覺(jué)”，而他們是否會(huì)停留，往往取決于這種直覺(jué)。這項(xiàng)研究的主要發(fā)現(xiàn)是，”視覺(jué)復(fù)雜度低、原型性高”的網(wǎng)站被認(rèn)為具有很強(qiáng)的吸引力。簡(jiǎn)單來(lái)說(shuō)，讓你的網(wǎng)頁(yè)設(shè)計(jì)簡(jiǎn)單而熟悉。如果你去追求創(chuàng)新的、非常規(guī)的布局，人們可能會(huì)不太會(huì)喜歡。例如，用戶(hù)習(xí)慣于以一種熟悉的方式瀏覽電子商務(wù)類(lèi)的網(wǎng)站。堅(jiān)持這種模式是一個(gè)更好好主意?？纯碋tsy是如何通過(guò)顯示購(gòu)物車(chē)、注冊(cè)和帶有下拉菜單的類(lèi)別來(lái)保持他們的主頁(yè)與其他電子商務(wù)網(wǎng)站一樣接近：一個(gè)讓用戶(hù)感到很困惑的獨(dú)立站不太可能有很好的轉(zhuǎn)化（并導(dǎo)致糟糕的用戶(hù)體驗(yàn)）。遵循大家已經(jīng)熟悉的設(shè)計(jì)模式是很重要的。

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

眾所周知，提高用戶(hù)完成特定目標(biāo)的能力是提高可用性的關(guān)鍵。有些設(shè)計(jì)策略可能會(huì)故意設(shè)置障礙來(lái)促使用戶(hù)采取行動(dòng)，雖然短期內(nèi)可能提高了轉(zhuǎn)化率，但長(zhǎng)期來(lái)看可能會(huì)對(duì)客戶(hù)忠誠(chéng)度和信任度造成損害。這些策略往往被視為一種短期的“?；ㄕ小笔侄危m然可能帶來(lái)一時(shí)的轉(zhuǎn)化率提升，但不一定能帶來(lái)更滿(mǎn)意的客戶(hù)和更健康的企業(yè)發(fā)展。

一個(gè)更道德、更長(zhǎng)期有益的方法是利用一個(gè)以“說(shuō)服、情感、信任”為核心的設(shè)計(jì)框架來(lái)引導(dǎo)用戶(hù)達(dá)到你的轉(zhuǎn)化目標(biāo)。這個(gè)框架由CodeComptuerlove提出，并分為四個(gè)關(guān)鍵步驟。

要消除障礙，讓用戶(hù)能夠輕松執(zhí)行每一個(gè)動(dòng)作。在說(shuō)服設(shè)計(jì)的過(guò)程中，第一步也是最重要的一步就是讓用戶(hù)能夠輕松地執(zhí)行行動(dòng)。這意味著你的按鈕和呼叫行動(dòng)（CTA）應(yīng)該易于找到和點(diǎn)擊。任何時(shí)候，都不應(yīng)該讓用戶(hù)困惑于下一步該做什么或如何采取最佳路徑。例如，亞馬遜通過(guò)視覺(jué)標(biāo)記讓用戶(hù)很容易看到他們?cè)诮Y(jié)賬過(guò)程中的位置。

建立信任是說(shuō)服用戶(hù)采取行動(dòng)的下一步。一旦用戶(hù)點(diǎn)擊了CTA，你應(yīng)該努力獲得他們的信任并鼓勵(lì)他們采取進(jìn)一步的行動(dòng)。這是一個(gè)包括兩個(gè)部分的流程。建立信任的第一步是調(diào)整頁(yè)面設(shè)計(jì)，可以通過(guò)添加合作品牌的logo、信任標(biāo)記或權(quán)威機(jī)構(gòu)的推薦信等方式來(lái)實(shí)現(xiàn)。第二部分是確保用戶(hù)清楚知道他們執(zhí)行一個(gè)動(dòng)作后的結(jié)果。例如，在HipMunk的主頁(yè)上，搜索框明確標(biāo)識(shí)了點(diǎn)擊“搜索”后的結(jié)果。一些簡(jiǎn)單的設(shè)計(jì)元素，如清晰地標(biāo)明CTA也能起到很大幫助。在亞馬遜的產(chǎn)品頁(yè)面上，“添加到購(gòu)物車(chē)”和“一鍵購(gòu)買(mǎi)”這兩個(gè)按鈕清楚地表明了它們的功能。

第三，通過(guò)提供情緒化的觸發(fā)器來(lái)激發(fā)用戶(hù)采取行動(dòng)。情感觸發(fā)對(duì)于促使行動(dòng)比單純的信任更為有效。例如，F(xiàn)acebook利用用戶(hù)在網(wǎng)站上看到的其它用戶(hù)的行動(dòng)來(lái)激發(fā)他們自己的行動(dòng)意愿。由于你對(duì)朋友投入了感情，你會(huì)覺(jué)得模仿他們的行為更有動(dòng)力。每一個(gè)頁(yè)面上，F(xiàn)acebook都會(huì)顯示出你的朋友們喜歡某個(gè)頁(yè)面的數(shù)量，這會(huì)促使你也去點(diǎn)贊或關(guān)注。

使用勸導(dǎo)性的觸發(fā)器來(lái)促使用戶(hù)采取行動(dòng)。當(dāng)你將上述所有元素結(jié)合起來(lái)時(shí)，就可以創(chuàng)建一個(gè)強(qiáng)大的說(shuō)服觸發(fā)器來(lái)引導(dǎo)用戶(hù)采取行動(dòng)。例如，F(xiàn)acebook的通知圖標(biāo)是一個(gè)強(qiáng)大的視覺(jué)提示，它激發(fā)你去查看朋友們剛剛進(jìn)行的行動(dòng)并建立信任。當(dāng)你點(diǎn)擊通知時(shí)，你會(huì)看到詳細(xì)的描述并得到一個(gè)情感觸發(fā)器來(lái)促使你采取行動(dòng)。這就是說(shuō)服設(shè)計(jì)的巧妙之處——在不迷惑用戶(hù)的情況下引導(dǎo)他們行動(dòng)。你的目標(biāo)是創(chuàng)造令人信服的體驗(yàn)而不損害轉(zhuǎn)化率。遵循這些建議不僅可以達(dá)到用戶(hù)體驗(yàn)?zāi)繕?biāo)，還能帶來(lái)更多的轉(zhuǎn)化率。這些策略并不是萬(wàn)能的，建議根據(jù)實(shí)際情況進(jìn)行調(diào)整和優(yōu)化來(lái)提升效果。此外也要根據(jù)實(shí)際情況對(duì)用戶(hù)行為進(jìn)行研究并根據(jù)測(cè)試效果來(lái)判斷優(yōu)化方向以期獲得最佳結(jié)果。這篇文章來(lái)源經(jīng)作者授權(quán)轉(zhuǎn)載。個(gè)人看法不代表官方立場(chǎng)！