好吧,它并不完全適用于萬維網(wǎng)。事實上,這里的情況恰恰相反。
一項研究表明,網(wǎng)絡(luò)用戶只需 50 毫秒(或 0.05 秒)即可形成對網(wǎng)站的印象!
人們通過封面來判斷網(wǎng)站。
網(wǎng)站給用戶的第一印象在很大程度上取決于其“首屏”內(nèi)容。
然而,隨著用戶行為隨著時間的推移而演變,折疊的傳統(tǒng)用法可能不再相關(guān)。
這篇文章深入探討了這個主題,并為您提供了相關(guān)的可操作提示以增加轉(zhuǎn)化率。
您可以在帖子中找到以下主題:
“首屏”是什么意思?
為什么網(wǎng)站的首屏對 CRO 很重要
傳統(tǒng)的首屏實踐
為什么傳統(tǒng)做法現(xiàn)在已無關(guān)緊要?
當前用戶行為和首屏實踐
可操作的提示
折疊上方是無需滾動即可看到的網(wǎng)頁部分。
這是訪問者在網(wǎng)頁上遇到的第一眼。因此,網(wǎng)站設(shè)計人員和開發(fā)人員對首屏的內(nèi)容進行了很多思考。
例如,這是 Mailchimp 在其主頁首屏顯示的內(nèi)容:
小知識: “首屏”一詞起源于報業(yè)。
報紙在出售前通常被對折。由于讀者只能看到報紙的上半部分,因此報紙首屏的內(nèi)容必須具有吸引力——影響讀者購買。因此,在首屏顯示報紙最引人入勝的故事和圖片已成為一種常見做法。
在網(wǎng)絡(luò)的早期,折疊概念從報紙轉(zhuǎn)移到了網(wǎng)站。
每當訪問者登陸網(wǎng)頁時,他們都希望立即找到所需的信息。如果網(wǎng)頁沒有立即提供信息/價值,訪問者就會離開。
通過在首屏包含相關(guān)信息和用戶操作,您的網(wǎng)站將從一開始就保持訪問者的參與度。這樣,您的訪問者探索您的產(chǎn)品的機會就會更高。
而且,訪問者對您的產(chǎn)品了解得越多,他們就越有能力進行轉(zhuǎn)化。
上世紀 90 年代和 2000 年代初期的遺留最佳實踐建議將網(wǎng)頁的所有重要元素置于首屏之上。
這是基于這樣一種理論,即任何放在首屏以下的內(nèi)容都很少會被網(wǎng)絡(luò)訪問者看到。
這是 90 年代的 Apple 網(wǎng)站:
許多網(wǎng)站將自己的高度限制在600 像素左右。網(wǎng)站上的文章跨越多個頁面,需要用戶點擊而不是滾動來閱讀更多內(nèi)容。
為什么會有這些做法?
此時,滾動對于用戶來說并不是那么直觀。瀏覽過去需要一些努力的網(wǎng)站(由于笨拙的滾動條)。
來自Nielson Norman Group的 Jacob Nielson進一步解釋了這一點:“當時不愿意滾動是有道理的,因為人們習慣于讓電腦顯示他們所有的選擇。對話框、CD-ROM 多媒體顯示和 HyperCard 堆棧都是這樣工作的,不需要滾動?!?/span>
這些因素提高了折疊空間上方的重要性。
因此,首屏成為網(wǎng)頁中最有價值的部分。
因為現(xiàn)在,用戶滾動!
在 PC 上向下滾動網(wǎng)站變得毫不費力——使用鼠標的滾輪或觸摸板上的雙指滑動。
盡管如此,用戶行為的變化在很大程度上仍可歸因于移動設(shè)備使用的增加。
在使用智能手機或平板電腦時,用戶幾乎不自覺地向下滾動。由于設(shè)備的屏幕尺寸較小,用戶希望網(wǎng)頁在首屏下方提供更多信息。
由于限制(用戶很少會查看非首屏內(nèi)容)不再存在,網(wǎng)站不必將自己限制在非首屏。
此外,當涉及多個屏幕尺寸時,折疊的整個概念變得模棱兩可。
目前,世界上有許多具有不同屏幕尺寸的設(shè)備。這使得無法定義折疊所在的單個點。
此外,越來越多的響應式設(shè)計網(wǎng)站正在推出。
響應式設(shè)計允許網(wǎng)站根據(jù)正在查看的設(shè)備的屏幕分辨率更改其布局。
這些設(shè)計實踐也使得無法定義通用折疊。
此外,有多項研究表明,與放在首屏上的元素相比,首屏下的元素如何吸引相似(或在某些情況下更高)的用戶注意力。
“600 到 1000 像素之間略低于首屏的位置通常具有高收視率和高參與度”——Chartbeat。
“普通媒體頁面上 66% 的注意力都花在了首屏之下”——Chartbeat。
“對于連續(xù)而冗長的內(nèi)容,如文章或教程,滾動比將文本分割成幾個單獨的屏幕或頁面提供更好的可用性” ——UXMyths。
“主頁上點擊次數(shù)最多的鏈接位于最底部”——Milissa Tarquini。
上面的部分非常清楚地表明折疊不會推動用戶在網(wǎng)頁上的參與。
然而,首屏對于網(wǎng)頁來說非常重要。
讓我們看看如何。
隨著 Internet 上信息的鋪天蓋地的可用性,用戶被寵壞了選擇。他們變得不耐煩了,他們離開了一個不立即向他們提供信息的網(wǎng)站。
出于這個原因,用戶將大部分時間花在查看首屏信息上——判斷網(wǎng)站。
首屏是用戶決定是否留在網(wǎng)站上的地方。
但是,首屏的目標現(xiàn)在已經(jīng)從通過 800×600 像素提供所有信息發(fā)生了變化。
它現(xiàn)在用于吸引用戶并提供有關(guān)網(wǎng)頁必須提供的內(nèi)容的提示。
今天,首屏空間專注于建立用戶進行轉(zhuǎn)換的意圖。
進一步鉆研。
是的,用戶滾動。但他們不只是為了好玩而滾動。
要向下滾動網(wǎng)頁,用戶需要一個令人信服的理由。這個令人信服的理由不能放在網(wǎng)頁的下方。大多數(shù)用戶甚至在達到那個點之前就會反彈。必須從一開始就保持用戶的興趣——首屏。
網(wǎng)頁的首屏應該是有前途的。它應該讓用戶向下滾動并瀏覽其他內(nèi)容。隨著用戶參與的時間更長,轉(zhuǎn)化率將會上升。
您還可以使用上方的折疊空間來突出您的品牌形象。
通過將某些品牌元素置于首屏之上,您可以清楚地將自己打造成行業(yè)中的差異化品牌。
以下是一些可操作的提示,可讓用戶滾動瀏覽并更多地參與您的網(wǎng)站。
將您的網(wǎng)頁視為一個故事。對于每個內(nèi)容行和元素,您的用戶都應該被促使查看網(wǎng)頁的下一部分。
網(wǎng)頁故事的高潮應該伴隨著 CTA。
以下是一些讓您的用戶向下滾動的技巧:
包括位于折疊兩側(cè)的網(wǎng)絡(luò)元素。?
這是來自 VWO 主頁的示例。
該網(wǎng)頁在折疊處向用戶展示了一個局部矩形圖形。
圖片上的文字說:“看看對您的網(wǎng)站進行 A/B 測試是多么容易?!?nbsp;這使得圖形是視頻這一點幾乎顯而易見。由于用戶目前還不能觀看視頻,他們將滾動到下方進行觀看。
您可以使用任何網(wǎng)絡(luò)元素代替視頻來實現(xiàn)您的最終目標——甚至是純文本!
在下方提供網(wǎng)頁包含的內(nèi)容的預覽。
例如,我在一開始就預覽了這篇文章的內(nèi)容。
預覽使用戶了解網(wǎng)頁必須提供的一切。如果用戶想要瀏覽預覽中提供的信息,他們將滾動。
提供明確的滾動提示。
您可以直接告訴訪問者該頁面包含更多信息,而不是提供微妙的提示。
您可以顯示向下箭頭、滾動圖標、“向下滾動”文本或任何類似內(nèi)容。
這是一個例子:
圖片來源:DesignWoop
在多個案例中,將網(wǎng)站的憑據(jù)(信任徽章、社會證明等)放在首屏會導致轉(zhuǎn)化次數(shù)增加。
下面是一個例子——變化優(yōu)于控制。
更高的轉(zhuǎn)化率意味著當網(wǎng)站清楚地顯示其差異化因素時,用戶參與度更高。
話雖如此,您不應該在未測試其有效性的情況下將這些 Web 元素置于首屏之上。您可以創(chuàng)建 A/B 測試來查看哪個版本的網(wǎng)站表現(xiàn)更好。
相關(guān)文章: 了解 Betfair 如何使用說服原則將轉(zhuǎn)化率提高 7%
“內(nèi)容為王”
遵循所有最佳實踐,或在首屏設(shè)計上具有視覺吸引力并不能保證您與用戶的高度互動。在很大程度上,您的內(nèi)容質(zhì)量決定了用戶瀏覽您網(wǎng)頁的距離。
因此,經(jīng)過深思熟慮的首屏設(shè)計應該始終與精彩的內(nèi)容相結(jié)合。