創建視覺層次：吸引註意力的藝術
已發表: 2017-03-15“我應該把它扔掉還是閱讀它？” 研究對像在檢查一封直郵郵件時感到疑惑。 他們從上到下評估這封信，並在 11 秒後做出決定。
在那段時間裡，慕尼黑直銷協會的實驗者註意到受試者眼睛的一些特殊之處。 他們不遵循線性路徑，連續閱讀每個單詞，而是跳轉到字母正文中的不同點。 那麼他們在看什麼？
答案是在所謂的“視覺層次結構”的幫助下創建可轉換的點擊後登錄頁面的關鍵。 要完全理解它，我們必須回到 1912 年的德國，在那里三位心理學家開始形成格式塔心理學的基礎。
格式塔心理學和視覺層次結構的基礎
一個多世紀以前，德國思想家沃爾夫岡·科勒、馬克斯·韋特海默和庫爾特·科夫卡開始研究人們如何看待世界。 他們的名字和“格式塔心理學”理論可能看起來並不熟悉，但包含他們研究的信息將：
“整體不是其部分的總和” ——這意味著整體“在感知系統中獨立存在，”拉斯·杜威博士說。
換句話說，這三個人提出，人類不會單獨和平等地感知周圍環境。 相反，我們以特定的方式組織它們，以便將它們作為一個整體來理解。
點擊推文
以下圖為例。 你看到了什麼？
您可能會注意到三個部分繪製的圓圈，但也會注意到中間沒有的倒三角形。 不完整的圓圈形成三角形的角，你的思想填滿邊緣。 這被稱為“虛幻的輪廓”，它正是 Koffka 所說的“整體不是其部分之和”的例證。 這張圖片中不僅僅是三個部分繪製的圓圈。 這些圓圈放在一起，按原樣放置，形成一個白色三角形。
從他們的研究中，這三個人創造了八項知覺組織法則——人類將一個群體的組成部分視為一個整體的方式。 最重要的是人們在您的點擊後登錄頁面上找到重要信息的方式。
相似法則
相似定律指出，相似的事物看起來好像是組合在一起的。 在下圖中，你看到了什麼？
如果您說“36 個圓圈”或“6 行圓圈”或“6 列圓圈”，那麼您屬於少數。 大多數人看到三排黑圈和三排白圈。 由於其他每一行的顏色和形狀都相似，因此它被視為整體中自己組的一部分。
同時，由於這種將相似事物歸為一組的傾向，我們也會注意到與群體不同的事物。 格式塔心理學家將這些差異稱為“異常”。
在上圖中，我們將所有相似的青蘋果歸為一組，其中紅色的蘋果異常突出。 無論該異常在大小、顏色還是形狀上不同，它都會引起我們的注意，因為它與該組的其他人不同。
這種對元素進行感知分組的過程可以解釋慕尼黑直銷協會的實驗者在研究對象眼中註意到了什麼。
什麼是視覺層次？
來自 Tuts+ 的 Brandon Jones 說人們不是“機會均等的觀察者”。 我們不僅傾向於注意到群體之間的差異，而且還傾向於從這些差異中推斷出重要性。 例如，對這張圖片中的圓圈進行排名：
在對它們一無所知的情況下，您可能對它們進行瞭如下排序：
那是因為最大的圓圈吸引了最多的注意力，然後是第二大圓圈，依此類推。 現在讓我們將類似的原則應用於頁面上的單詞。
這是最重要的一句話。 這是最重要的一句話。 這是最重要的一句話。 這是最重要的一句話。 這是最重要的一句話。 這是最重要的一句話。
在那段摘錄中，你的眼睛很可能被異常所吸引。 您將未格式化的句子組合在一起，粗體字脫穎而出。 當您引入大小差異時，會在其他地方引起注意。
這是最重要的一句話。
這是最重要的一句話。 這是最重要的一句話。 這是最重要的一句話。 這是最重要的一句話。 這是最重要的一句話。 這是最重要的一句話。
這一次，在您注意到段落中的粗體字之前，您可能已經看到了它上方更大的粗體字。 我們可以不斷地用顏色和位置改變單詞，使它們更加突出，但你明白了。 “不同”會吸引註意力，而注意力是您希望對點擊後登錄頁面上最重要信息的關注。
通過設計上的差異，您可以戰略性地將訪問者的注意力吸引到對推動轉化至關重要的營銷信息上，例如您的價值主張、產品優勢和號召性用語。 這些吸引註意力的策略形成了“視覺層次結構”。
在該層次結構中，最重要的信息是訪問者的目光首先落在頁面上的位置，其次是第二重要的信息是他們的目光接下來會落在何處，依此類推。 他們甚至沒有意識到，他們根據差異在心理上將這些元素從重要到不需要。
網絡上和網絡下的閱讀風格
現在讓我們重溫慕尼黑直銷協會的實驗，在該實驗中，受試者在短短 11 秒內選擇是扔垃圾還是閱讀銷售信函。 由於設計差異，他們能夠如此迅速地做出決定。
首先，他們的目光跳到了他們認為頁面上最重要的信息上：標題和照片。 接下來，標題、項目符號列表和短段落引起了人們的注意。 如果有的話，長的、未格式化的副本最後被消化。
從那時起，許多研究證實了這些發現，最著名的是尼爾森諾曼集團的研究，該研究催生了“F 形模式”。 在跟踪了數千個網頁上 232 名受試者的注視後，該小組發現：
- 首先用戶閱讀頁面頂部，創建“F”形的上方水平條。
- 然後，人們進一步向下閱讀頁面，閱讀副標題以形成“F”的下方水平條。
- 最後，用戶向下掃描左側，形成“F”的垂直詞幹。
它看起來像這樣：
不過，“F 形”這個名字有點誤導。 正如研究人員所解釋的那樣，互聯網用戶的閱讀模式並不總是那麼整潔：
顯然，用戶的掃描模式並不總是恰好由三部分組成。 有時用戶會閱讀內容的第三部分，使模式看起來更像 E 而不是 F。有時他們只會閱讀一次，使模式看起來像一個倒 L（橫桿在頂部） . 然而，通常，閱讀模式大致類似於 F，儘管頂部和底部欄之間的距離有所不同。
無論是“F”、“L”、“E”還是“Z 形”模式（用於較少文本的頁面），含義都是相同的：說英語的人從左到右閱讀從上到下掃描內容的差異。 標題、副標題、圖像、粗體字、標題、列表——這些元素與標準的無格式文本不同。
看看下面的模擬頁面：
它們不包含實際的單詞，但您可能能夠比左側更好地組織正確的單詞。 右邊的適合 F 型閱讀風格，而左邊的則沒有將其內容組織成任何視覺層次結構。
我們從研究中已經知道，像左頁那樣的文本塊很少被閱讀。 那麼你如何確保你的呢？
設計時考慮到差異
CXL 的 Peep Laja 說，在開始創建視覺層次結構之前，您需要一個目標：
您應該根據您的業務目標對網站上的元素進行排名。 如果你沒有一個具體的目標，你就無法知道該優先考慮什麼。
他使用 Williams Sonoma 主頁的屏幕截圖來演示：
最引人注目的是一大塊肉（讓我想要它），其次是標題（說出它是什麼）和號召性用語按鈕（得到它！）。 第四位是標題下的一段文字，第五位是免運費橫幅，最後是頂部導航。 這是視覺層次結構做得很好。
但是，在您的點擊後登錄頁面上，不應該有導航菜單。 因此，注意力會有所不同。 讓我們看一下來自 Simple Measured 的點擊後登錄頁面：
你的目光首先落在哪裡？ 下一個？ 最後的？ 如果我們不得不猜測，我們會說……
- 標題：“如何更快地做出社交營銷決策。”
- 副標題：“學習如何節省時間並看起來像個專業人士。”
- 粗體文字：“在本指南中，您將學習如何……”
- 粗體文本下方的項目符號副本。
- 號召性用語：“提交”。
這是一個很好的視覺層次結構的例子，因為它按照與訪問者最相關的順序傳達信息。 首先，標題和副標題以面向利益的方式傳達要約的 USP。 潛在客戶立即明白，他們將學習如何通過此頁面上的優惠更快地做出社會決策。
之後，以典型的 F 模式向下掃描頁面的左側，訪問者會注意到粗體文本將他們引導到項目符號列表，其中詳細說明了通過聲明要約可以獲得什麼。
最後，潛在客戶再往下掃一點，然後掃過整個頁面，在那裡他們會看到號召性用語按鈕，該按鈕的顏色與頁面上的其他元素不同，以引起注意。 它讓他們知道如何申請他們的報價。
在關注這三個元素之後，正文副本可能會被完整閱讀，但可能不會——這就是為什麼讓你最重要的信息脫穎而出很重要的原因。 按照這個順序，你的視覺層次至少應該：
- 用標題吸引註意力，讓訪問者知道為什麼他們應該閱讀頁面的其餘部分。
- 用粗體字、帶項目符號的文本和小段落簡要說明您的報價的好處。
- 向他們展示如何通過號召性用語領取優惠。
那麼你究竟是如何使用設計元素做到這一點的呢？ 您知道“不同”會吸引註意力，這反過來又傳達了重要性——但是在創建視覺層次結構時應該使用哪些設計元素？
影響視覺層次的特徵
根據自由設計師和作家史蒂文布拉德利的說法，可以操縱五個特徵來在您的頁面上形成視覺層次結構：
- 尺寸——正如你所期望的，更大的元素承載更多的重量
- 顏色 — 原因尚不完全清楚，但有些顏色被認為比其他顏色更重。 紅色似乎最重，而黃色似乎最輕。
- 密度——在一個給定的空間中裝入更多的元素，賦予該空間更多的權重
- 值 - 較暗的對象將比較亮的對象具有更大的權重
- 空白 - 正空間比負空間或空白更重要
您在點擊後登錄頁面上使用這些元素的程度將影響訪問者的視線。 以下是如何使用它們來創建您的視覺層次結構：
- 大小：您的標題應該是頁面上最大的文字。 如果你有一個，副標題應該是第二大的。 如果您的頁面很長，那麼您用來分隔內容的副標題應該比這小，最小的應該是未格式化的正文副本。
- 顏色：此元素對您的號召性用語最重要。 配色方案在引導訪問者使用按鈕方面起著重要作用。 這裡的關鍵是對比。 請注意，在 Simple Measured 點擊後登錄頁面上，橙色僅在主要為藍色和白色的頁面上出現一次。 這使得 CTA 按鈕對訪問者來說非常明顯。
- 密度：再次查看 Williams-Sonoma 頁面。 標題和號召性用語都覆蓋在特色圖片上。 通過將所有這些元素打包到如此小的空間中，設計師比上面的菜單或橫幅更加關注它。
- 價值：粗體字比無格式字更受關注。 介紹產品優勢的標題、副標題和正文應該比頁面上的其余文本更有價值。
- 留白：回想一下慕尼黑直銷協會的研究結果——最吸引眼球的地方之一是小段落。 將您的文本“分塊”成最多由三個句子組成的部分不僅可以使其更引人注目，而且更易於閱讀和保留。
閱讀您最重要的信息
視覺層次結構可幫助訪問者優先考慮您的點擊後登錄頁面上的信息。 通過創建以下內容來讓您的訪問者進行轉換：
- 在標題中強調您的 USP
- 在正文中傳達您的報價的好處
- 讓潛在客戶知道如何使用您的 CTA 按鈕申領您的報價
快速輕鬆地開始設計您的視覺層次結構，立即註冊 Instapage Enterprise 演示。