即使對于營銷人員來說,設(shè)計標(biāo)準(zhǔn)也不是您想得太多的事情。但是對于網(wǎng)頁設(shè)計師而言,它們至關(guān)重要。
“標(biāo)準(zhǔn)Web約定”是Web設(shè)計標(biāo)準(zhǔn)和最佳實踐。它們是網(wǎng)站設(shè)計師遵循的一組規(guī)則,知道它們符合訪問者的期望。它們是清晰度和可用性的指南。
但實際上是什么標(biāo)準(zhǔn)?
為了回答這個問題,我們創(chuàng)建了一個包含10個Web設(shè)計標(biāo)準(zhǔn)的清單,然后查看了排名前50位的營銷網(wǎng)站,以了解這些標(biāo)準(zhǔn)的真正標(biāo)準(zhǔn)。使用指南從早期NN組文章中,我們使用以下閾值:
標(biāo)準(zhǔn):80%或更多的網(wǎng)站使用相同的設(shè)計方法
慣例:50 – 79%的網(wǎng)站使用相同的設(shè)計方法
困惑:49%或更少的網(wǎng)站符合標(biāo)準(zhǔn),沒有任何一種設(shè)計方法能成為主流
注意:本研究中包含的網(wǎng)站是Alexa上“業(yè)務(wù)>營銷與廣告”類別中的頂級營銷網(wǎng)站。在排除不具有常規(guī)潛在客戶生成或電子商務(wù)目標(biāo)的新聞,媒體和出版物網(wǎng)站之后,我們最終排名前50位的營銷網(wǎng)站。
1.左上方的徽標(biāo)
在所研究的網(wǎng)站中,有100%的網(wǎng)站每個頁面的左上角都有一個可點擊的徽標(biāo)。這是一個標(biāo)準(zhǔn)!
2.右上角的聯(lián)系方式
44%的聯(lián)系人按鈕或鏈接位于每個頁面的右上角。盡管此放置非常普遍并且被認(rèn)為是最佳實踐,但不能認(rèn)為它是標(biāo)準(zhǔn)的。
設(shè)計標(biāo)準(zhǔn)博客發(fā)布-聯(lián)系方式-小
3.頂部的主要導(dǎo)航
88%的網(wǎng)站的主導(dǎo)航位于每個頁面頂部的標(biāo)題中,從而使水平的頂級導(dǎo)航成為Web設(shè)計的標(biāo)準(zhǔn)。
設(shè)計標(biāo)準(zhǔn)博客-小
4.主頁幻燈片
32%的網(wǎng)站都有主頁幻燈片放映(也稱為輪播),其中包含一系列旋轉(zhuǎn)的圖像和消息。
設(shè)計標(biāo)準(zhǔn)博客帖子小
這是Orbit設(shè)計師正在仔細(xì)觀察的一個,因為越來越多的網(wǎng)站似乎更喜歡靜態(tài)的特色圖片,而不是旋轉(zhuǎn)的圖片系列。
關(guān)于每種選擇的有效性的研究混雜在一起。結(jié)果各不相同!為您的網(wǎng)站,消息和訪問者選擇最佳選項。
5.首頁上的價值主張
80%的營銷網(wǎng)站在首頁上都有明確的價值主張。因此,大多數(shù)網(wǎng)站都“向折疊上方”說明了其價值。其余的根本沒有明確的價值主張。
designstandardsblogpost-value-small
任何網(wǎng)頁設(shè)計師都會告訴您,瀏覽器沒有標(biāo)準(zhǔn)的像素高度。因此,沒有折痕。但是,當(dāng)然,某些設(shè)計元素會出現(xiàn)在頁面的上方,并且大多數(shù)訪問者通常無需滾動即可看到它們。
6.在首頁上方的號召性用語
78%的網(wǎng)站在視覺上吸引了號召性用語。該百分比低于我們的標(biāo)準(zhǔn)閾值,這當(dāng)然是慣例。
設(shè)計標(biāo)準(zhǔn)博客-cta-small
7.標(biāo)頭中的搜索功能
54%的網(wǎng)站的標(biāo)題中都有搜索功能。大約一半的營銷站點沒有一個搜索功能,該功能以鏈接,圖標(biāo)或搜索框的形式在每個頁面上“全局”顯示。
designstandardsblogpost-search-small
這對我們來說并不奇怪。除非網(wǎng)站包含大量內(nèi)容,否則不需要搜索工具。搜索工具通常是組織不良的網(wǎng)站的“拐杖”。
8.頁腳中的注冊框
24%的網(wǎng)站允許訪問者在頁腳中注冊和訂閱電子郵件更新。因此,這是收集電子郵件地址的常見位置,而不是約定或標(biāo)準(zhǔn)。
designstandardsblogpost注冊小
頁腳最常見的內(nèi)容是版權(quán),隱私,法律,站點地圖和聯(lián)系鏈接。訪客希望在網(wǎng)站的右下角或底部中心找到聯(lián)系信息。
想要一個更好的頁腳嗎?這是我們的頁腳設(shè)計最佳實踐,您可以在頁面底部添加27項內(nèi)容。
9.頁腳中的社交媒體圖標(biāo)
72%的網(wǎng)站的頁腳中都包含社交媒體網(wǎng)站的圖標(biāo)。這幾乎使這些成為標(biāo)準(zhǔn)設(shè)計元素。
設(shè)計標(biāo)準(zhǔn)博客博客-socialfooter-footer
26%的網(wǎng)站在標(biāo)題中突出顯示了社交媒體圖標(biāo)。
設(shè)計標(biāo)準(zhǔn)博客帖子-社會標(biāo)頭-小
就像在頁腳中一樣,單擊任何這些圖標(biāo)會將訪問者帶到社交媒體網(wǎng)站。因此,這是一個設(shè)計元素,可能會浪費您的流量,增加跳出率并損害結(jié)果。
我們建議在頁腳中添加社交媒體圖標(biāo)。為了進(jìn)一步減少視覺沖擊,只有在訪問者將鼠標(biāo)光標(biāo)移到圖標(biāo)上之后,才可以顯示全色版本。
10.響應(yīng)式設(shè)計
68%的網(wǎng)站使用響應(yīng)式網(wǎng)頁設(shè)計對移動設(shè)備友好。無論使用哪種設(shè)備(手機(jī),平板電腦或臺式機(jī)),這都為游客帶來了絕佳的體驗。
designstandardsblogpost響應(yīng)式-小
它是設(shè)計和編程的結(jié)合,在站點構(gòu)建后很難添加。通常,它是重新設(shè)計的一部分,這可以解釋為什么它是慣例而不是標(biāo)準(zhǔn)。
響應(yīng)式設(shè)計多年來一直是最佳實踐。我們很高興看到這種情況變得越來越普遍,并且希望該功能最終成為標(biāo)準(zhǔn)。
關(guān)于數(shù)據(jù)的注釋:本研究中包含的站點是知名的大品牌。他們有很多頁面,并且業(yè)務(wù)多種多樣。大型網(wǎng)站的某些設(shè)計方面(搜索工具,通用導(dǎo)航標(biāo)簽)可能與較小的營銷網(wǎng)站無關(guān)。
我們來復(fù)習(xí)…
designstandardsblogpost-bar-small
定制設(shè)計占主導(dǎo)地位
顯然,并不是所有的設(shè)計標(biāo)準(zhǔn)都是標(biāo)準(zhǔn)的。除了徽標(biāo)的位置,主要導(dǎo)航和價值主張之外,沒有用于網(wǎng)頁設(shè)計的標(biāo)準(zhǔn)。
關(guān)于標(biāo)準(zhǔn)的好處是您有很多選擇。–計算機(jī)科學(xué)家Andy S. Tanenbaum
Web設(shè)計約定包括醒目的號召性用語,頁眉中的搜索工具,頁腳中的社交媒體圖標(biāo)和響應(yīng)式Web設(shè)計。
其他常見的設(shè)計功能仍然可以視為最佳做法,但大多數(shù)網(wǎng)站可能不會使用。專門針對企業(yè)及其受眾的自定義Web設(shè)計是一天的工作。
Web設(shè)計師的實用見解
符合標(biāo)準(zhǔn)是滿足觀眾期望的簡便方法。您的訪客不是空白。您的網(wǎng)站是他們訪問過的第百萬個網(wǎng)站,因此,他們對所能找到的內(nèi)容以及在何處可以找到深刻的想法。該網(wǎng)站是您數(shù)字營銷基礎(chǔ)知識的關(guān)鍵。
為什么要使您的網(wǎng)站與眾不同?
如果在某個特定位置需要設(shè)計元素,則應(yīng)該在該位置。
除了設(shè)計元素之外,所有優(yōu)秀設(shè)計師還可以理解以下幾種Web設(shè)計標(biāo)準(zhǔn):
品牌標(biāo)準(zhǔn)
顏色,類型和色調(diào)特定于每項業(yè)務(wù)。您應(yīng)該為自己的網(wǎng)站準(zhǔn)備一份樣式指南,并堅持使用。
編碼標(biāo)準(zhǔn)
網(wǎng)站應(yīng)使用W3C同意的編程標(biāo)準(zhǔn)來構(gòu)建。這使它們更有可能在瀏覽器中顯示和正常運行。
無障礙標(biāo)準(zhǔn)
獲取信息是一項基本人權(quán)。聯(lián)合國《殘疾人權(quán)利公約》已經(jīng)承認(rèn)了這一點。遵循這些標(biāo)準(zhǔn),使每個人都可以訪問您的網(wǎng)站。
標(biāo)準(zhǔn)Web約定是良好設(shè)計的簡寫。如果您違反任何這些規(guī)則,則應(yīng)有充分的理由有意地這樣做。而且,您應(yīng)該計劃測量出乎意料的影響。