學(xué)會這4個設(shè)計心理學(xué)方法，快速提高轉(zhuǎn)化率！

通過簡單的案例和分析，說明了「行動召喚」對轉(zhuǎn)化率的重要價值，以及如何將其價值最大化。

數(shù)字產(chǎn)品都在努力爭取用戶們有限的注意力，現(xiàn)代經(jīng)濟(jì)越來越多地圍繞人類的注意力范圍而展開，一個單一要素就能發(fā)揮完全不同的作用。

因此，行動召喚按鈕在每個用戶界面中都起著至關(guān)重要的作用。

對于不熟悉市場營銷術(shù)語的任何人，以下是來自 Investopedia 的簡要介紹：

行動召喚（CTA）是一種營銷術(shù)語，是指營銷人員希望其受眾或讀者采取的下一行動。行動召喚可以直接將用戶引導(dǎo)至購買。

簡而言之，行動召喚是您希望網(wǎng)站訪問者采取的下一步行動。

讓我們通過一些技巧來克服最常見的陷阱，以及一些描述性的示例來分析注意力是如何工作的。

引人注目的文本

Brian Clark 在他的 Blog 中充分地說明了文字的力量，社會心理學(xué)家艾倫·蘭格（Ellen Langer）要求在復(fù)印機(jī)前插隊(duì)，她嘗試了三種不同的詢問方式：

• 對不起，我有五頁要復(fù)印。我可以先使用復(fù)印機(jī)嗎？——60％ 的人同意了請求。
• 對不起，我有五頁要復(fù)印。因?yàn)槲液苤保梢韵仁褂脧?fù)印機(jī)嗎？——94％ 的人同意了請求。
• 對不起，因?yàn)槲矣形屙摬坏貌粡?fù)印。可以先使用復(fù)印機(jī)嗎？——93％ 的人同意了請求。

觸發(fā)詞「因?yàn)椤故侨绱藦?qiáng)大，以至于您提供的「原因」似乎并不重要，即便是從一個四歲孩子的口中說出來。

突出的結(jié)果是，某些詞語比其他詞語更能有效地說服人們。專家們表示，通過在簡歷中加入一些涉及情感的特定詞匯，可以增強(qiáng)簡歷的說服力。

如圖所示，Slack 利用了 free 這個詞的雙重含義，不僅代表了免費(fèi)，而且行動自由和選擇自由都會影響潛意識的用戶行為。

許多網(wǎng)站在他們的行動召喚用語中使用的另一種策略，是其消息的語氣。關(guān)于操作的動詞引入了一種直接的、面向操作的方法，它會觸發(fā)用戶采取特定的操作，因?yàn)樗鼈兓卮鹆艘粋€基本問題「為什么我應(yīng)該點(diǎn)擊這個按鈕？」。

大多數(shù)成功的公司都使用了「免費(fèi)試用」、「了解更多」、「搶先體驗(yàn)」、「入門」等階段，并通過在行動召喚的文案中增加價值來提升轉(zhuǎn)化率。

最容易被識別的對比色

行為召喚按鈕是馮·雷斯托夫效應(yīng)（Von Restorff effect）的最佳范例。

馮·雷斯托夫效應(yīng)也稱為「隔離效應(yīng)」，它指出了當(dāng)存在多個相似物體時，與其他物體都不同的那個最可能被記住。

這是為什么必須要讓「行為召喚」按鈕彈出，并在其他按鈕中脫穎而出的最重要原因。

△ 由VisualEyes生成的眼動熱力圖

顏色是影響按鈕隔離效果的首要因素，應(yīng)該始終嘗試通過使用對比色來吸引用戶注意，使主要操作按鈕更加突出。

首先，應(yīng)該確保按鈕的顏色、視覺效果和排版能夠和諧地構(gòu)成一個控件元素。可讀性，易讀性和對比度非常重要，您應(yīng)該事先對其進(jìn)行測試。

Stark 插件是一個在設(shè)計時幫助您進(jìn)行對比度檢查的好工具。

△ 通過Stark插件，可以看出黑色按鈕的對比度最佳

此外，關(guān)于對比度的方法不僅適用于按鈕元素本身。一個行動召喚按鈕應(yīng)具有足夠的對比度，并且與整個界面相比要格外突出。

Sketch 的首頁是一個完美的示例，它說明了行動召喚與頁面內(nèi)容對比度的重要性。它不僅遵循產(chǎn)品的品牌色，而且創(chuàng)建了一個醒目的「行動召喚」按鈕，吸引了絕大多數(shù)訪問者的注意力。

一句話概括，就是讓人覺得「我不能不點(diǎn)這個按鈕！」

△ 由VisualEyes生成的眼動熱力圖

合適的尺寸很重要

尺寸和位置在行動召喚中的可視性和可達(dá)性中起著至關(guān)重要的作用，相當(dāng)多的變量定義了按鈕的適當(dāng)大小。

在對按鈕大小和間距的研究中，發(fā)現(xiàn)了一種適用于大多數(shù)用戶（包括老年人）的標(biāo)準(zhǔn)。

研究表明，使用 42-72 像素之間的按鈕可以達(dá)到最高的準(zhǔn)確性；也就是說，最適合用戶的最小按鈕尺寸是 42 像素，最大按鈕尺寸是 72 像素。

太大的按鈕會吸引絕大多數(shù)用戶的注意力，使用戶無法了解該服務(wù)所提供的其他內(nèi)容，這對頁面內(nèi)容的理解有重要影響。而將按鈕設(shè)置得太小會嚴(yán)重影響其可訪問性，沒有什么比按鈕太小到無法點(diǎn)擊而令人沮喪的了。

移動端界面有著另一個常見問題：「為拇指設(shè)計」這個術(shù)語是由 Scott Hurff 提出的，應(yīng)得到高度的重視。這意味著在我們應(yīng)當(dāng)在拇指自然的弧形范圍內(nèi)，構(gòu)建最舒適使用的界面。

部分 iPhone 型號對比，綠色區(qū)域代表了移動設(shè)備上最舒適的自然觸碰區(qū)域

顯然，行動召喚按鈕應(yīng)該很容易觸及。

因此，考慮到「拇指區(qū)」的熱圖，設(shè)計人員可以輕松地為行動召喚按鈕選擇最合適的位置。在應(yīng)用程序的自然舒適區(qū)域內(nèi)，用戶按下按鈕的幾率可以成倍增加。

遵循用戶的視線路徑

用戶在使用頁面內(nèi)容時遵循的直接路徑非常重要，通過自然閱讀的方式來排列文案和按鈕，您可以直接將訪問者召喚至下一步行動。

上述內(nèi)容符合菲特定律（Fitt‘s Law），獲取目標(biāo)的時間取決于目標(biāo)的距離和大小。因此，通過將行動召喚放置在用戶流程的末尾，您可以減少轉(zhuǎn)化所需的用戶認(rèn)知和物理操作。

△ 由VisualEyes生成的眼動熱力圖

通過觀察注意力熱度圖，您會發(fā)現(xiàn)最常見的眼睛掃描模式是 F 形。最近的眼動研究表明，無論是在臺式機(jī)還是在移動設(shè)備上，F(xiàn) 形掃描模式在當(dāng)今世界都是最為常見的。

這種引人入勝的閱讀模式，更多地取決于人類的行為而不是技術(shù)，它說明了「搜索」的行動召喚按鈕可以被放在左下角。

Airbnb 的設(shè)計師采用了一種不同的方法，他們利用了 Z 型布局和 Gutenberg 圖，將行動召喚按鈕放置在末端位置，以便消除視覺干擾并鼓勵用戶行動。

• 主要視覺區(qū)域；
• 強(qiáng)非活躍區(qū)域；
• 弱非活躍區(qū)域；
• 末端區(qū)域：箭頭代表用戶閱讀視線的慣性引力。

當(dāng)用戶視線到底表單右下角時，閱讀或「視線掃描」過程被中斷，此時用戶需要進(jìn)行下一步行動，因此是插入行動召喚元素的最佳位置。

小結(jié)

通常，行動召喚元素會對轉(zhuǎn)化率產(chǎn)生巨大影響，并且被視為界面中最重要的元素。

通過牢記一些基本的設(shè)計原則，您可以使行動召喚按鈕脫穎而出，并抓住它所需的關(guān)鍵注意力。

重新發(fā)明輪子并沒有必要，有時候，真正擅長某些事情的最佳方法是向行業(yè)領(lǐng)袖學(xué)習(xí)。

仔細(xì)研究最成功的互聯(lián)網(wǎng)公司以及它們?nèi)绾螄@行動召喚來組織內(nèi)容，這將幫助您找出最有效的基本模式。

歡迎關(guān)注譯者的微信公眾號：「海外設(shè)計參考」