27個研究支持的技巧：如何做出一個有效的網站？

網站的結構佈局

網站是兩件事：容器和內容。容器是兩件事：結構和樣式。讓我們從第一個開始。這些提示是關於頁面的結構和佈局的。

1.利用視覺層次結構

每個頁面都有一個視覺層次結構。如果你不熟悉這個概念，這裡是我們的定義：

視覺層次是指視覺元素的排列、大小、顏色和對比度。它決定了它們的相對顯著性以及人眼看到它們的順序。

網頁設計師首先使用視覺層次來引導訪問者註意重要元素。網站佈局包括位置（頁面上的高或低）、大小（大或小）、視覺效果（視頻、圖像、圖標）和對比度（顏色和空白）。 組合方面會增加它們的效果。每個人都會在頁面上看到一個大圖片。很少有人會看到被圖像包圍的低對比度文本。
視覺層次是為什麼您的眼睛在您訪問互聯網的每個頁面上都遵循特定路徑的原因。有意使用時，它會通過一系列消息引導訪問者的注意力，從而呼籲採取行動。

2.在主頁上使用描述性的、以關鍵詞為重點的標題

主頁（以及每一頁）頂部的標題要麼是描述性的，要麼不是描述性的。如果不是，訪問者可能無法回答他們的第一個問題："我來對地方了嗎？"
這也是一個使用目標關鍵詞並表明相關性的機會。但是很多營銷人員寫了一些聰明或模糊的東西。但清晰勝於聰明。
與其寫一個花俏但模糊的標題，不如寫一些描述性的東西。確保您在頁面上方，在首頁上方解釋公司所做的事情。 等等，折疊仍然是一個東西？
是的，有一個折疊。對於每個屏幕上的每次訪問，都有一個可視區域。底部是著名的褶皺。要查看此行下方的任何內容，該訪問者必須滾動。
為什麼以及是否這在網頁設計中很重要是一個備受爭議的話題。這裡有兩個最好的論點："沒有棄牌！" vs "棄牌仍然很重要。" 當然，螢幕尺寸有數千種，從小到大不等。上個月，該網站在 958 個不同尺寸的螢幕上被瀏覽。所以一些設計師說折疊不再重要。 但這是底線（明白了嗎？）每次訪問仍然有一個折疊，所有訪問仍然是一個平均折疊。Hotjar 之類的工具在滾動熱圖中清楚地顯示了一條線，適用於筆記本電腦、移動設備和平板電腦。 所以是的，有一個折疊，重要的是你在它上面和下面放什麼。一項研究表明，訪問者 80% 的時間都花在了首頁上。 因此，將您的價值主張，即您所做工作的 8 字版本，放在頁面的高處，放在首頁。

3. 但不要將所有號召性用語放在首位

參觀者可能會在那裡花費更多時間，但這並不意味著他們已準備好採取行動。很多說服發生在頁面的後面。 當 Chartbeat 分析 2500 萬次訪問時，他們發現大多數參與都發生在首頁以下。頂部的內容可能是可見的，它不一定是呼籲採取行動的最有效的地方。 關於這項經常被引用的研究的一個警告：Chartbeat 主要由新聞網站使用，這與營銷網站非常不同。沒有人在新聞網站上做太多的事情！普通的網頁設計技巧不適用。 確保將號召性用語放在頁面更下方的任何可能引起高興趣的地方。

4.使它成為一個高頁面。回答所有訪客的問題。

更多像素意味著有更多空間來回答問題、解決異議和添加支持性證據。如果訪問者沒有找到重要問題的答案，他們可以簡單地繼續向下移動頁面。一旦他們感到滿意，他們就會停止閱讀。

最有效的銷售頁面模擬銷售對話。

您永遠不會在銷售會議期間打斷某人並停止回答他們的問題，對嗎？這就是一個短頁所做的一切；它停止回答問題。
這就是來自 Crazy Egg 的著名研究的用武之地。他們調查了他們的聽眾，發現了他們最關心的問題和疑慮，並建立了一個高大的頁面來解決所有問題。
頁面長了 20 倍。轉化率提高了 30%。

---

---

5.一次展示一件事

"我喜歡乾淨、現代的設計。"這是我們大多數客戶在我們開始網頁設計項目時告訴我們的。他們經常以蘋果的網站為例。
訪客不喜歡混亂。我們喜歡空白。換句話說，我們喜歡低視覺複雜度。
2012 年，谷歌著手探索哪些類型的網站對訪問者來說是美麗的。這是一項關於名稱非常複雜的簡單性的研究：視覺複雜性和原型對網站第一印象的作用：努力理解審美判斷。
他們了解到，更複雜的設計不太可能被認為是美麗的。 這解釋了單列佈局和高頁面的趨勢。具有多列（左側導航、內容區域、右側欄）的設計更加複雜，在訪問者的視野中具有更多的視覺元素。
所以減少混亂。使兩個元素之一成為每個滾動深度的焦點。

6.堅持標準佈局

谷歌的同一項研究發現，"高原型"也與感知美有關。換句話說，怪異通常並不漂亮。遵循網頁設計標準的網站更容易受到喜愛。
被認為最美麗的網站具有高原型性和低視覺複雜性。它們既簡單又乾淨。 這麼想，區分你的品牌固然好，但佈局不是做它的地方。在你說的內容上有所不同。但是要典型地了解您的網站的使用方式。 有些汽車看起來很棒。他們是不同的。他們很漂亮。但它們的側面仍然有門，底部有輪子，前面還有大燈。 但標準是什麼？根據我們自己的研究，這些是網站的標準元素： 具有高原型的"標準"網站包括以下內容：

• 左上角的標誌
• 標題中的水平導航
• 頂部的搜索欄
• 底部的社交圖標
• 移動響應式設計

7.提防"假底"

現代營銷網站，尤其是銷售頁面，都是用頁面塊構建的。這些是內容行，通常一側是圖像，另一側是文本，在單列中沿頁面向下流動。 這是潛在客戶生成網站上典型服務頁面的剖析。
如圖所示，頁腳的背景顏色較深。如此多的網站都這樣做，以至於訪問者現在希望切換到較暗的背景意味著頁面底部。
但是如果設計有一個深色背景的頁面塊，訪問者可能會認為他們已經到達底部並停止滾動。這是一個假底部。 注意：我和我自己的設計師就這個問題進行了辯論。我們的創意總監庫爾特克魯斯提出了一個很好的觀點。 背景顏色的變化是讓訪問者知道內容類型正在變化的好方法。我聽到了，庫爾特！
在為頁面塊選擇背景顏色時要慎重。為了安全起見，請僅選擇細微的變化或始終使用白色或淺灰色。然後在頁腳中切換為深灰色或黑色。

8.避免輪播和旋轉滑塊

它們多年來一直很受歡迎，客戶喜歡它們。但是主頁幻燈片有一個問題：訪問者可能只看到第一張幻燈片。
已經有很多研究得出了相同的結論。後續幻燈片上的消息不太可能被看到，號召性用語也不太可能被點擊。只需查看大學網站上幻燈片的點擊率即可。
它們可能很受歡迎，因為它們很容易獲得批准。來自不同部門的不同利益相關者都在首屏上獲得了一些像素。它們有利於內部政治，而不是訪客。

主頁幻燈片擅長防止人們在會議室中互相刺傷。

那麼該怎麼做呢？

• 堆疊幻燈片，以便訪問者可以通過向下滾動頁面來查看每張幻燈片。它們會突然變得更加明顯。
• 使用特色圖片，使用最有影響力的幻燈片作為主角。給它一個很好的行動號召！

9.避免製表符和手風琴

這是另一種擺脫隱藏的方法：避免使用標籤和可擴展的內容框。 知道高達 76% 的網站訪問者正在掃描，您可以通過保持所有內容都暴露在他們面前，讓他們更容易看到您的內容，而無需單擊以顯示某些內容。
如果選項卡和可擴展手風琴有效，您可能會在亞馬遜上看到它們。
請記住，滾動比單擊更快、更容易。如果訪問者必須瞄準並點擊或標籤才能查看某些內容，他們就不太可能看到它。

圖片

讓我們繼續看視覺效果。這些提示特定於網頁上的圖片

10.使用人物圖片

面孔是獨特的強大圖像。從我們出生的那一刻起，我們就更多地凝視面孔。人物圖片的吸引力在網頁設計中非常有用。 面孔不僅會引起注意，而且與轉化相關。Basecamp 著名的案例研究表明，當在銷售頁面上結合面孔和推薦時，結果會大幅提升。 確保您的網站看起來不像沒有靈魂的"廢棄宇宙飛船"。
多年來，我與成千上萬的企業討論過他們的營銷，我注意到了一種模式。大公司總是試圖看起來小，而小公司總是試圖看起來大。奇怪，對吧？
真的，每家公司都應該嘗試變得更加個性化，更加人性化。

11.但避免庫存照片的人

庫存照片有時間和地點，但我會避免像瘟疫這樣的人的庫存照片。他們只是從不感到真誠，因此他們沒有建立信任。
公司受到庫存照片的誘惑，因為生產質量很高。但是您的訪客更關心現實。他們更願意看到真正在公司工作的人。

真實性比拋光更重要。

研究支持了這一點。NN Group的一項研究發現，訪問者會忽略人物的庫存照片和"填充"圖像，但實際上會看真人的照片。 所以做你自己，展示你的團隊並使用真實人物的照片，即使他們是完美的。

12.使用面部作為視覺提示

人物圖片給你一個特殊的機會來引導訪客的注意力。著名的"你看他們看哪裡"現象。 當研究員 James Breeze向 106 人展示設計時，他展示了良好定位的面孔的力量。他們有能力將參觀者的注意力引向其他元素。
這是著名的娃娃臉研究。當嬰兒看著相機時，訪客也看著嬰兒。當嬰兒看標題時，訪客也看標題。 我的朋友 Oli Gardner 厭倦了這個嬰兒的例子（對不起，Oli！）。如果有人知道其他研究或好的例子，請在評論中告訴我！
使用面部圖像中的視線作為方向提示，引導訪問者註意利益聲明或行動號召。

13.使用箭頭作為視覺提示

面孔可以引導注意力，但它們並不是控制訪客眼睛的唯一方法。小手繪箭頭可能更有效。
在CXL 的這項眼動追踪研究中，發現一個簡單的箭頭在讓訪問者查看頁面元素方面更加強大。 如果您希望您的訪問者看到某物，請用箭頭指向它。我不確定這個提示是非常明顯還是非常有見地。

14. 使用顏色引導訪問者的注意力轉向號召性用語

顏色具有情感內涵（紅色是緊急的，藍色是平靜的），它們是品牌標準的一部分。但它們也是將訪問者的注意力吸引到按鈕和 CTA 的機會。
Eyequant 對按鈕顏色的一項研究證實了顏色和亮度對比能夠吸引註意力。 但研究表明，彩色按鈕並不總是有效的。如果您希望您的按鈕在視覺上更加突出：

• 對比按鈕顏色與背景
• 對比按鈕顏色和按鈕文本
• 將按鈕顏色與頁面上的附近元素進行對比（或在其周圍留出大量空白）

"馮·雷斯托夫效應"
1930 年代，德國科學家 Hedwig von Restorff 發現，當顯示一個包含十個項目的列表時，如果項目的顏色與其他項目不同，人們就會記住這些項目。這是因為枕葉對視覺差異或"模式中斷"很敏感。
網絡營銷人員 Paras Chopra 進行的實驗表明，出色的顏色不僅被更多人記住，而且被點擊的次數更多：增加了 60%！
專家提示！為所有鏈接、按鈕和翻轉效果選擇一種"動作顏色"。使其成為與整個設計中使用的品牌顏色不同的顏色（這些是"被動顏色"）。僅在可點擊項目中使用動作顏色。

導航和鏈接

現在我們進入網站導航的建議，包括讓訪問者四處走動的選單、按鈕和連結。

15. 具有描述性

導航總是在視覺上很突出，所以它是一個交流的機會。訪問者通常通過掃描標題開始他們的訪問。那裡的任何東西，包括你的選單，都很有可能被看到。 資料來源：用戶體驗運動
當導航標籤是通用的時，您就錯過了告訴訪問者您在做什麼的機會。比較這兩個例子： 如果您的導航標籤是通用的，那麼它們對數千甚至數百萬個網站都是通用的。您錯過了利用網站導航最佳實踐、幫助訪問者和提高搜索排名的機會。

16.把家放在左邊，但除此之外，不要太在意菜單項的順序

如果您有主頁鏈接，請將其放在左側。這是它最常見的地方，所以訪客希望在那裡找到它。
至於其餘的菜單項，研究表明順序並不是那麼重要。有兩種不同的眼動追踪研究表明，菜單項的順序與訪問者的成功（來源和來源）之間的相關性較低。 所以不要花大量時間擔心菜單中的東西的順序。

17. 小心從服務頁面鏈接到博客文章

如果訪問者在服務頁面上，目標是將他們轉化為潛在客戶。如果您添加大量機會離開並閱讀您的Blog，他們將登錄不太關注潛在客戶生成的頁面。blog文章自然有更多的干擾、退出機會和較低的轉化率。

18. 小心鏈接到其他網站上的任何內容

只要相關，鏈接到幫助訪問者實現目標的事物。在Blog文章中，這通常是對來源的引用或指向外部參考的鏈接。這篇文章鏈接到幾十篇文章和研究！
但是在服務頁面和您的主頁上，您應該小心鏈接到其他網站。對於任何優化以將訪問者轉化為潛在客戶的頁面，問問自己，你真的希望訪問者點擊那個鏈接嗎？它可以幫助您實現目標嗎？

19.避免在您的網站標題中使用社交媒體圖標

同樣，標題中的彩色社交媒體圖標也不適合您的目標。如果訪問者點擊這些糖果色按鈕中的任何一個，他們就會進入一個充滿干擾的網站。他們不太可能回來。 這通常是進行社交媒體整合的錯誤方式。如果您連結到社交網絡，請從您的頁腳進行。如果訪問者正在尋找，他們可以找到社交網絡，但您並不是建議他們離開。

寫作

讓我們談談單詞。早些時候，我們在主頁上推薦了一個以關鍵詞為中心的標題。這裡有一些關於進入網站的寫作技巧，包括標題、副標題和正文。

20. 寫出有意義的副標題

模糊的副標題無處不在。它們通常大而無用，但後面跟著小而有用的東西。奇怪，對吧？相反會更有意義。
確保重要的事情對訪客有意義且有幫助。如果你的副標題說"產品"或"服務"之類的東西，問問自己一個更具描述性的術語是否更有幫助。這裡有些例子。 這對掃描儀和可用性都有好處。這對視障人士和可訪問性都有好處。這也是很好的SEO 最佳實踐。千萬不要錯過表明相關性的機會！
專業提示：可能完全不需要副標題。如果沒有它，這個頁面會一樣好嗎？訪客還會知道他們在看什麼嗎？如果是這樣，只需將其刪除。

21.避免長段落和長行

冗長、塊狀的段落不符合數字內容的最佳實踐。簡單地分解長段落使內容更易於使用。作為一般規則，不要寫超過 3-4 行的段落。

---

---

如果行長很長，訪問者可能更難以閱讀。Web Style Guide推薦不超過 12 個單詞的行。

22. 避免行話。使用簡單的詞。

閱讀越容易，網站就越成功。使用訪問者期望的常用詞。長句和花俏的詞迫使顳葉更加努力地工作。這不好。

---

適合"低文化"用戶的副本適合所有人。這不是要讓它變得愚蠢。這是關於使用每個人都能理解的簡單語言。研究表明，降低可讀性水平可以提高所有訪問者的成功率。 即使是博士也更喜歡閱讀 8 年級的水平。
那個大詞可能會讓你聽起來很聰明，但它可能會讓你的訪客感到愚蠢。懷疑自己的訪客不太可能採取行動。所以在你寫作的時候，不斷問自己這個問題：
是否 100% 的訪問者都知道此頁面上單詞的含義？

23. 列表順序和"序列位置效應"

在您的副本中訂購任何列表時，將重要的東西放在開頭和結尾。在任何列表的中間，讀者的注意力和保留率是最低的。當訪問者瀏覽頁面時，第一個和最後一個項目最有可能留在短期記憶中。 資料來源：順序效應理論：首要性與新近性

24.回答訪客的熱門問題

他們帶著問題來了。該網站的主要工作是回答這些問題。每一個未回答的問題都是錯失建立信任的機會。未回答的問題也會增加訪問者離開的可能性。
當 Joel Klettke 應用他的過程來尋找問題和編寫答案時，他能夠將Hubspot 登陸頁面的轉化率提高一倍。他採訪了客戶，分析了他們的回答，確定了信息的優先級，最後，他在新的營銷文案中使用了觀眾自己的話。聰明的！ 以下是 Joel 用來發現訪客的熱門問題的問題：

1. 發生了什麼讓您尋找解決方案？
2. 你還嘗試了什麼，你不喜歡什麼？
3. 是什麼讓您幾乎無法從我們這裡購買？
4. 是什麼讓您有足夠的信心嘗試我們？
5. 是什麼讓 X 成為您的最佳解決方案？
6. 在評估 X 時，對您來說最重要的是什麼？
7. 你現在能做什麼（或做得更好）你以前不能做什麼？
8. 給我一個例子，說明 X 什麼時候對你產生了影響？

一言以蔽之，您的網站的目的是什麼？回答。

補充閱讀：完美的 B2B 網站服務頁面：13 點清單

25.添加證據和社會證明

"從眾偏見"是人類傾向於做別人正在做的事情。因此，提供證據表明其他人選擇了您，這使得選擇您的公司似乎是一個不錯的選擇。目標是做出任何決定，而不是使用您的公司似乎超出規範。
向您的訪問者證明您是合法的。理想情況下，您的每一項營銷主張都有證據支持。

---

---

最快、最簡單的方法是添加推薦。這是其他類型的社會證明。

• 相關影響者的認可
• 來自客戶的產品評論
• "如在……中所見"提及貴公司的媒體徽標
• 社交媒體小部件顯示您的關注者的大小
• 信任印章，包括協會會員資格、安全證書和獎勵

多少證據就夠了？您應該添加多少推薦？
很多。可能沒有太多證據。我們對亞馬遜的一個產品詳情頁面進行了快速分析，發現該頁面的 43% 是證據和評論。 專家提示！不要製作推薦頁面。它們往往是低流量頁面。相反，將推薦添加到每個服務頁面。

26、提損益，引發"損失厭惡"

人類不是有效的成本/收益計算器。我們傾向於高估損失而低估收益。換句話說，損失比收益更令人愉悅。
在線和離線都是如此，並解釋了很多人類行為。這篇文章很好地解釋了它：將行為經濟學和認知心理學應用於設計過程。 這種對損失的厭惡對網頁設計師和文案很有用。以下是一些在考慮損失厭惡的情況下編寫副本的技巧。

• 強調不使用您的產品或服務的成本。
• 將成本組合在一起，分別列出收益。
• 強調即時收益。
• 通過限時優惠創造緊迫感。如果產品稀缺，請說出來。

輕輕提醒您的訪問者，如果不立即採取行動，他們會錯過什麼、冒險或失去什麼。

27.優化訂閱者的電子郵件註冊表單

這篇文章的底部有一個。這是訂閱的號召性用語。如果仔細觀察，您會發現它包含三個獨立的元素。這些是電子郵件註冊表單的 3P。

• 突出它在視覺層次中脫穎而出
• 承諾它告訴讀者他們會得到什麼以及多久
• 證明它使用社會證明：訂閱者的數量或微小的推薦

當我們第一次嘗試這些更改時，舊表單的轉化率非常低，因此改進非常顯著。我們看到電子郵件註冊量增加了 4,863%。 在設計您的電子郵件註冊表單時，使其可見，使用社交證明並告訴讀者他們將獲得什麼。

不僅僅是一個漂亮的網站

人人都愛美。每個人都喜歡酷炫的新設計功能。每個人都是批評家。但作為訪客，我們需要的不僅僅是美麗。我們需要信息。作為網站所有者，我們需要結果。
以下是兩項具有相同發現的研究。第一個是Hubspot 的一項調查，顯示訪問者更看重易於查找的信息，而不是精美的設計或精美的用戶體驗。 第二項研究是NN Group 的一組用戶測試的結論。它表明，當訪問者失敗時，是因為他們找不到信息，而不是因為網站不夠漂亮。 我和任何人一樣喜歡美麗的設計。這就是我開始從事這項業務的原因！我經常想到這句話：

---

---

但在網頁設計中，我們為內容創建容器。來訪者是為了內容，而不是容器。
網站應該很漂亮。他們應該對訪客產生視覺或情感上的影響。但是您網站的成功遠遠超出了美觀。這是為了幫助訪客找到他們需要的東西。這是本文中每個技巧的核心。這是網頁設計的真正目的。
幫助您的訪客找到他們的目的，然後給他們您希望他們擁有的東西。

資料來源：https://www.orbitmedia.com/blog/web-design-tips/