他山之石 | 7個視覺技巧,讓訪客愛上你的頁面

3 評論 6256 瀏覽 5 收藏 11 分鐘

編輯導讀:為登錄頁面創建視覺效果就好比為面試搭配著裝,視覺效果提供了微妙的和潛意識的指標,幫助訪問者選擇行動。本文作者分享了7個視覺技巧,一起來看一下吧。

用一個通俗的例子讓你明白,登錄頁面視覺效果的重要性:

為登錄頁面創建視覺效果就好比為面試搭配著裝。

應聘者希望面試官認為他們已經做好充足準備,并且非常適合公司的職位。你希望你的登陸頁面上的視覺效果可以反映出自己的品牌風格,并告訴你的訪問者,你所提供的正是他們所需要的。

為求職面試搭配著裝和為登陸頁面尋找最佳視覺效果的另一個相似之處是什么? 那就是不要迅速選擇第一個選項,多嘗試幾種,再考慮哪一個效果最好。

視覺效果提供了微妙的和潛意識的指標,幫助訪問者選擇行動。

它們可以豐富文字所傳達的內容,使其更有說服力,也可以代替文字內容,直接產生更快捷的影響力。

如果你的網站還是純純的靠文字妄圖吸引流量……

以下是7種久經考驗的視覺效果,通常用于以產品為重點的營銷,幫助你用內容為重點的登錄頁面進行轉換??!

一、滿足訪問者的眼睛——抽象內容具象化

能夠打開一個包裹,手里拿著一個東西,這會產生一種滿足感。但內容所提供的通常是數字化產品。為了制造一個讓你的訪客可以接觸到的感覺,你可以把你的數字內容顯示在實體設備里(比如智能手機或其他設備)。

這一策略與我們在Venngage進行的關于Facebook廣告轉換的研究相一致。表現第二好的變異以物理表征為特征(令我們驚訝的是,表現最好的變異以模因為特征)。

看看這個電子書登陸頁面:

這個登錄頁面提供了在平板電腦上顯示的內容產品的圖像,允許訪問者把他們將要獲得的產品可視化。

二、贏得訪問者的信任——提供可視化的互動演示

贏得訪問者信任的一個方法是讓他們與你的站點進行互動。以Monotype的登錄頁面為例:

它的登陸頁面巧妙地向訪問者展示了Monotype的全部功能。訪問者可以實時更改字體以查看它們的外觀。讓他們對自己的期望有一個概念。

畢竟,就算是買件襯衣你也得先試穿不是?

三、給訪問者講個故事——多使用插圖

現在許多企業變聰明起來了,他們開始使用自定義插圖,而不是庫存插圖。

我喜歡這種方法,因為好的插圖可以讓訪問者置身于你的登陸頁面。他們為有創意的講故事制造了機會。而且,消費者愿意為故事買單,所以網站很適合用故事來展現。

以Intercom的娛樂登陸頁面為例:

插圖加強了文本中所暗示的“包袱”。同時它們也講述了一個故事。

在第一幅圖中,一群“人”試圖進行有效的溝通,但失敗了,表現在令人困惑、交錯的箭頭和沮喪的面部表情上。

但第二個例子更簡單——只有在你和你的客戶之間有一條清晰的溝通渠道。

四、強調強調再強調——多使用圖標

圖標也很有用,因為它們可以在一個圖形中表達一個想法。觀眾在不需要文本的情況下很快就能理解諸如Twitter標志之類的圖像所傳達的含義。而且,在某些情況下,圖標的意義補充或加強了文本內容。

看看WordStream是如何為它的電子書登陸頁面使用圖標的。

獎杯圖標強化了這一理念,即本指南將幫助訪客贏得AdWords。它也誘使訪問者閱讀文本,以找出他們可以贏得或實現什么與此提供。

五、使用流行的CTA按鈕顏色

關于CTA按鈕的性能更好的顏色,有很多爭論。但有一種觀點似乎有一些證據:

如果CTA按鈕的顏色與頁面上的其他顏色形成對比,那么它們的效果會更好。

Unbounce的登陸頁面提供了一個很好的例子:橙色的CTA按鈕與背景顏色形成對比:

當你為你的CTA按鈕選擇顏色時,務必看一下色輪,然后選擇與你的登錄頁面主色相對的顏色??!

六、使用提供方向線索的圖像

為訪問者指出正確的方向從而推動他們行動。

視覺上的暗示,不管是含蓄的還是明確的,都能引導訪問者應該把目光投向哪里。

一個隱晦的方向提示可以是一個人看著你的CTA按鈕的方向的圖片。一個明確的方向提示可以是一個直接指向CTA的箭頭。讓我們更詳細地討論每種類型。

1)使用隱式的暗示

視覺暗示背后的原理是Malcolm Gladwell所說的“微表情”。我們在別人身上識別出的細微的面部表情或“轉瞬即逝的表情”,這些都會影響我們對情緒的理解。

眼球追蹤研究發現,當人們看到陌生人時,他們首先會看對方的面部特征。當訪問者看到某人對某個產品或形式表示贊賞的照片時,他們更有可能做出積極的反應。

面部暗示可能很微妙??纯催@個登陸頁面上的復制黑客:

圖片的位置讓文案專家Joanna Wiebe面對文字,雙手靠近CTA。沒有直接指向按鈕,圖像引導訪問者的眼睛指向他們需要點擊的地方。

一個有效的隱式視覺提示將使點擊看起來像自然的下一步。

2)使用明確的方向提示

含蓄的視覺暗示是微妙的,而明確的暗示則不然。箭頭和插圖毫不掩飾地指向CTA。

以Bear CSS的可愛登陸頁面為例:

小熊手直接為訪問者指向CTA按鈕。

如果一些古怪的東西對你的品牌不起作用,一個簡單的箭頭也是有效的。IMPACT的電子書登陸頁面就是一個很好的例子:

箭頭是頁面加載后動畫彈出的另一個視覺觸發器,以吸引游客的注意力,呼吁行動。

七、利用真實的人

真人的照片(不是模型)在著陸頁上效果不錯。營銷實驗進行了一項研究,將登陸頁面上的“微笑女士”素材照片與登陸頁面上的公司創始人照片進行對比。

素材照片頁面效果:

公司創始人照片頁面效果:

結果呢?與訪問過“微笑女士”頁面的人相比,訪問過創始人登錄頁面的人填寫CTA表格的可能性要高出35%。

注意:網站不僅使用了創始人的圖片,還加入了文字,讓訪問者知道這是創始人。

在你的形象中加入真人,有助于建立信任,有助于提高你的品牌認知度。

讓視覺發揮其能!

登陸頁是你留下好印象的一次機會。選擇視覺效果的目的是吸引訪客并促使他們采取行動。要找到合適的視覺效果,可能需要一些精心設計的測試。

雖然使用視覺效果僅僅因為它好看有吸引力就已經很誘人了,但仍要有策略。視覺是激發人們反應的強大工具。注意使用視覺效果,讓你的公司呈現出最好的面貌。

 

翻譯:傳聲營銷

本文由@傳聲營銷 翻譯發布于人人都是產品經理。未經許可,禁止轉載。

題圖來自 Unsplash,基于CC0協議。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 實用!已收藏

    回復
  2. 太詳細了,從顏色到圖案,收藏了,很有用。

    來自河南 回復
    1. 感謝您的支持!本觀察員會持續輸出更多干貨噠~

      來自上海 回復