四條“行動召喚”的基本設計原則,抓住用戶注意力

0 評論 3997 瀏覽 14 收藏 11 分鐘

通過簡單的案例和分析,說明了“行動召喚”對轉化率的重要價值,以及如何將其價值最大化。

數字產品都在努力爭取用戶們有限的注意力,現代經濟越來越多地圍繞人類的注意力范圍而展開,一個單一要素就能發揮完全不同的作用。

因此,行動召喚按鈕在每個用戶界面中都起著至關重要的作用。

對于不熟悉市場營銷術語的任何人,以下是來自Investopedia的簡要介紹:

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

簡而言之,行動召喚是您希望網站訪問者采取的下一步行動。

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

一、引人注目的文本

Brian Clark在他的Blog中充分地說明了文字的力量,社會心理學家艾倫·蘭格(Ellen Langer)要求在復印機前插隊,她嘗試了三種不同的詢問方式:

  1. 對不起,我有五頁要復印。我可以先使用復印機嗎?——60%的人同意了請求。
  2. 對不起,我有五頁要復印。因為我很著急,可以先使用復印機嗎?——94%的人同意了請求。
  3. 對不起,因為我有五頁不得不復印??梢韵仁褂脧陀C嗎?——93%的人同意了請求。

觸發詞“因為”是如此強大,以至于您提供的“原因”似乎并不重要,即便是從一個四歲孩子的口中說出來。

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

“行動召喚”(Call to Action)的基本設計原則是什么?

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

許多網站在他們的行動召喚用語中使用的另一種策略,是其消息的語氣。關于操作的動詞引入了一種直接的、面向操作的方法,它會觸發用戶采取特定的操作,因為它們回答了一個基本問題“為什么我應該點擊這個按鈕?”。

大多數成功的公司都使用了“免費試用”、“了解更多”、“搶先體驗”、“入門”等階段,并通過在行動召喚的文案中增加價值來提升轉化率。

“行動召喚”(Call to Action)的基本設計原則是什么?

二、最容易被識別的對比色

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

馮·雷斯托夫效應也稱為“隔離效應”,它指出了當存在多個相似物體時,與其他物體都不同的那個最可能被記住。

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

“行動召喚”(Call to Action)的基本設計原則是什么?

由VisualEyes生成的眼動熱力圖

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

首先,應該確保按鈕的顏色、視覺效果和排版能夠和諧的構成一個控件元素??勺x性,易讀性和對比度非常重要,您應該事先對其進行測試。

Stark插件是一個在設計時幫助您進行對比度檢查的好工具。

“行動召喚”(Call to Action)的基本設計原則是什么?

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

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

Sketch的首頁是一個完美的示例,它說明了行動召喚與頁面內容對比度的重要性。它不僅遵循產品的品牌色,而且創建了一個醒目的“行動召喚”按鈕,吸引了絕大多數訪問者的注意力。

一句話概括,就是讓人覺得“我不能不點這個按鈕!”

“行動召喚”(Call to Action)的基本設計原則是什么?

由VisualEyes生成的眼動熱力圖

三、合適的尺寸很重要

尺寸和位置在行動召喚中的可視性和可達性中起著至關重要的作用,相當多的變量定義了按鈕的適當大小。

在對按鈕大小和間距的研究中,發現了一種適用于大多數用戶(包括老年人)的標準。

“行動召喚”(Call to Action)的基本設計原則是什么?

研究表明,使用42-72像素之間的按鈕可以達到最高的準確性;也就是說,最適合用戶的最小按鈕尺寸是42像素,最大按鈕尺寸是72像素。

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

移動端界面有著另一個常見問題:“為拇指設計”這個術語是由Scott Hurff提出的,應得到高度的重視。這意味著在我們應當在拇指自然的弧形范圍內,構建最舒適使用的界面。

“行動召喚”(Call to Action)的基本設計原則是什么?

部分iPhone型號對比,綠色區域代表了移動設備上最舒適的自然觸碰區域

顯然,行動召喚按鈕應該很容易觸及。

因此,考慮到“拇指區”的熱圖,設計人員可以輕松地為行動召喚按鈕選擇最合適的位置。在應用程序的自然舒適區域內,用戶按下按鈕的幾率可以成倍增加。

四、遵循用戶的視線路徑

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

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

“行動召喚”(Call to Action)的基本設計原則是什么?

“行動召喚”(Call to Action)的基本設計原則是什么?

由VisualEyes生成的眼動熱力圖

通過觀察注意力熱度圖,您會發現最常見的眼睛掃描模式是F形。最近的眼動研究表明,無論是在臺式機還是在移動設備上,F形掃描模式在當今世界都是最為常見的。

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

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

“行動召喚”(Call to Action)的基本設計原則是什么?

  1. 主要視覺區域;
  2. 強非活躍區域;
  3. 弱非活躍區域;
  4. 末端區域:箭頭代表用戶閱讀視線的慣性引力。

當用戶視線到底表單右下角時,閱讀或“視線掃描”過程被中斷,此時用戶需要進行下一步行動,因此是插入行動召喚元素的最佳位置。

小結

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

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

重新發明輪子并沒有必要,有時候,真正擅長某些事情的最佳方法是向行業領袖學習。

仔細研究最成功的互聯網公司以及它們如何圍繞行動召喚來組織內容,這將幫助您找出最有效的基本模式。

 

本文譯自Raptis Dimitris的Call to Action: The Ultimate Survival guide

原文地址:https://medium.muz.li/call-to-action-an-extensive-guide-140fef523b08

本文由 @海外設計參考 翻譯發布于人人都是產品經理。未經許可,禁止轉載

題圖來自 Unsplash,基于 CC0 協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!