【網頁設計師們注意】想緊抓訪客眼球不放,這幾項網站設計元素請牢記在心
台南網頁設計 > 網頁設計作品 > 網路資訊
12.26
【網頁設計師們注意】想緊抓訪客眼球不放,這幾項網站設計元素請牢記在心

橫幅、圖片滾動、滑塊、特色內容模塊,或其它你能想得出的類似叫法——它們在網頁上隨處可見。橫幅常被用於電商網站特別是其主頁上。大多數電商網站的桌面網站主頁都有橫幅。但主頁橫幅真的對用戶有用嗎?或者說它們能算作一種簡便的內容呈現方式嗎?

就上述問題,隨便問一個人,他們都會告訴你橫幅是一種實證效果不好的模式(anti-pattern)。Erik Runyon 的一項研究顯示,只有 1%的網站訪客會點擊並瀏覽橫幅相關內容——而其中有 84%的人僅僅是點擊第一張滾動圖片

Jared Smith 特地做了一個網站叫「我該不該使用橫幅?」,來說服大家「即使能用,也不應該用橫幅」。但也許,在 Jared 的網站上最好的說明,是 Lee Duddell 說的:

事實上,若能堅守一些重要的操作細則,主頁橫幅可以得到很好的宣傳效果,還會對用戶很有幫助。本文將探討這些操作細則,並簡單介紹如何設計好的橫幅。

什麼是橫幅?

橫幅是在主頁上顯示市場營銷訊息的一種推廣形式。設計師通過橫幅,不用讓用戶滾動瀏覽剩餘頁面也可實現訊息密度(指一份訊息所能提供的相關訊息量的相對指標)最大化。橫幅呈現形式和大小非常多樣,但通常情況下,橫幅(正如本文所述)都有如下特徵:

  • 它出現在主頁靠上部分,佔據了「折疊以上部分」(顯眼位置)絕大部分區域。
  • 在同一個位置展示一條以上的推廣,即便實際上一次只能展示一條;每條推廣都包含了圖像和少許文字。

 

  • 在同一橫幅中,能看出有不止一條主題內容。
  • 橫幅的優點
    • 通過橫幅,可以在主頁同一塊黃金區域顯示多條內容。
    • 越靠近頁面頂端的訊息更越可能獲得更多的關注。

    橫幅的弊端

    • 人們經常忽略橫幅,同時忽略掉的還包括全部或部分橫幅裡的內容(即使橫幅可以自動滾動)——訪客基本上不會在頁面頂端逗留過久。因此,不要指望人們消化掉橫幅的所有訊息。
    • 設計師通常將橫幅視為一系列圖片的集合體,但眾多用戶通常只看了其中的一張圖片。看完橫幅中的一系列圖片能給人留下精準的印象,使人了解相關服務或產品,但如果一個人只看到其中的一張圖的話,他可能就無法明白你想傳達的業務訊息。

    優質橫幅設計指南

    1. 內容第一

    有句我們聽過無數遍的話:內容為王橫幅形式的精美不如其內容與用戶的關聯度重要。

    如果橫幅的內容不相關,無論其與用戶的交互多麼簡單,其用戶體驗仍將非常糟糕。這裡需要提一些重要的規則:

    • 如果內容對訪客不夠有吸引力、或沒有幫助的話,比如是人們不想關注的推廣訊息,那就不要用橫幅。這些橫幅大多數情況下只會分散用戶的注意力,而不能指引用戶至一個簡單明瞭的行為號召。
    • 橫幅內容不能像廣告(或者與廣告格式內容一樣)。如果內容看起來像廣告,大多數用戶會選擇直接忽視。原因就在於旗幟盲點(網頁使用中的一種現象,指網站訪問者自覺或不自覺地忽略橫幅樣的訊息,又可稱為廣告的盲目性)。

    所以,選擇合適的字體和圖像使得橫幅和頁面其他內容相匹配就顯得非常重要。這樣的話,橫幅才會像整個網站的一部分,而不是網頁上被強加的廣告。

    • 滾動圖片的順序需要仔細斟酌。要記住,越是靠前的圖片,越能獲得更多曝光機會。所以,第一張圖片永遠是最重要的,它還能吸引訪客去看下一張圖。後續圖片都應該按重要性排序。
    • 絕對不能把橫幅圖片當作了解網站特色和內容的唯一途徑。建議將出現在橫幅的重要訊息另放在頁面的其他部分,這樣就更容易被網站訪客看見。
    • 如果你想讓訪客看到所有內容,那就不要使用橫幅。哪怕橫幅是有效的,但要記住,大多數訪客不會瀏覽每一張橫幅圖片。

    2. 限制滾動圖片的數量

    橫幅最多放五張圖片。再多的話,用戶可能就不會去看了。限制滾動圖片的數量,還有一個好處就是幫助訪客更好地了解網站內容,回過頭來能在橫幅裡再次發現相關內容。

    3. 提供進度提醒

    讓用戶知道一共有多少張滾動圖片,還需要讓其看到目前「進度」是第幾張。這可以使人們感到一切都在掌控中。

    圓點或類似符號能顯示滾動圖片總數,使用戶知道其目前看的是第幾張圖

    4. 確保滾動圖片的內容在手機上清晰易讀

    由於手機越來越強調注意力,優化橫幅內容以方便手機客戶端查看則是首要任務。文字和圖片顯示得越清晰,用戶越有可能有興趣去了解相關內容。

     

    所以,確保滾動圖片的文字在各種螢幕上清晰易讀就非常重要,即便螢幕內容縮小到非常小的界面,也要能在螢幕上清晰顯示。此外,如果你將桌面網站的插圖重複利用到手機頁面中,一定要檢查文字是否清晰易讀。

    5. 設計恰當的導航按鈕

    導航按鈕要幫助用戶識別各項選擇,使用戶在核心滾動圖片中看到相關內容時能回想到這些選擇。

    確保導航按鈕存在並出現在橫幅內,而不是橫幅下方或者其他區域。這樣就可以避免顯示不當的問題。下面以兩例桌面網站為例:

     

    Dell 主頁上基本看不到下一項/上一項橫幅按鈕。導航選擇以非常小的框出現在橫幅下方。

    連結和按鈕的辨識度要高,並且足夠大,以方便辨識和點擊。如果按鈕(下一項/上一項以及滾動圖片選擇器)小而緊湊,亦或在雜亂背景的表面,則其辨識度不高,也不方便點擊。

     

    在 Tissot 主頁,橫幅左右兩端的箭頭在淺色背景圖映襯下辨識度很高,也方便點擊,但在圖示暗色背景圖上,箭頭辨識度就非常低。手機設備支持滑動手勢。這不是否定傳統的橫幅操控方式(比如下一項/上一項按鈕),而是在支持滑動手勢的基礎上添加這些操控方式。

    自動滾動(或自動輪換)小技巧

    橫幅中不同圖片的自動滾動可以讓訪客瀏覽相關訊息。但要使得自動滾動運行流暢,還需注意以下四點細節:

    1. 手機設備不要加載自動滾動功能。用戶在點擊螢幕時,可能會因為橫幅圖片自動滾動不小心點到不想點開的圖片。

    2. 確保自動滾動切換速度不要太快。有時橫幅滾動切換過快,用戶無法讀取訊息,這會讓他們失望。當然,自動滾動切換過慢也有相應的問題——用戶會厭煩這些滾動圖片。

    建議測試最佳停留時間,或至少預估普通用戶平均花多長時間去瀏覽和消化相關文字內容和圖像訊息。

    如果理解不同滾動圖片的訊息需要不同的時間量,則還要考慮針對單個滾動圖片需要單設的停留時間。如果你沒法準確把握停留時間,則不建議使用橫幅。

    3. 讓用戶保持可控狀態(控制給人信任)。鼠標放置在橫幅上方暫停自動滾動,可以避免自動切換到用戶即將看到或點擊的滾動圖片。在任一主動的用戶交互(比如點擊橫幅按鈕)完成後,終止自動滾動功能,因為一次點擊即代表一次主動的用戶請求,這說明用戶對此很有興趣和意向。

    4. 滾動到最後一張圖片後不要停止。繼續循環播放所有圖片,顯示用戶正瀏覽的滾動圖片。

    除橫幅之外的最佳選擇

    主頁橫幅最常見的問題在於缺乏背景鋪墊:通常,用戶對下一張滾動圖片的內容只能略知一二,也基本沒有說服他們關注下一張圖片的理由。所以,他們不太願意去查看這些內容。要解決這個問題,除了橫幅外,你也可以考慮主圖(大的促銷圖片)。

    相比橫幅,主圖有以下優點:

    • 用戶可以專注於這一張圖,而不再將其注意力分散到其他的滾動圖片。相比滾動,靜態主圖能更少地分散用戶的注意力。
    • 若設計師明白其只能選擇僅此一張圖片,圖片還要表達其感情,他們更可能會選擇呈現更能代表相關服務或產品的內容。

     

    你可以有效地確定內容的優先次序,放棄橫幅,使用有用又有效的主圖,再加入橫幅中行為號召相關的元素。

    •  

      你可以有效地確定內容的優先次序,放棄橫幅,使用有用又有效的主圖,再加入橫幅中行為號召相關的元素。


 

台南網頁設計案例
台南網頁設計專案-赫勇五金有限公司
台南網頁設計專案-璟程實業有限公司
台南網頁設計專案-獨領瘋燒
台南網頁設計專案-升富營造有限公司
台南網頁設計專案-Oleat葛利特烘培屋
台南網頁設計專案-竹德穗機械有限公司
台南網頁設計專案-傑克森光電有限公司
台南網頁設計專案-頂鈦3C電腦設備購物網
台南網頁設計專案-快樂熊貓股份有限公司
台南網頁設計專案-Me2攝影工作室
台南網頁設計專案-東城國際娛樂事業
台南網頁設計專案-121婦嬰用品館
台南網頁設計專案-需求網
台南網頁設計專案-尊龍電子有限公司
台南網頁設計專案-Perfect Vacuum Solution
台南網頁設計專案-溫莎堡汽車旅館
台南網頁設計專案-依戀畫廊
台南網頁設計專案-徜洋潛旅
台南網頁設計專案-怡康(中國)有限公司
台南網頁設計專案-灃倢設計工業有限公司
台南網頁設計專案-美拍網
台南網頁設計專案-宇誠科技股份有限公司
台南網頁設計專案-凱模經紀公司
台南網頁設計專案-吉祥搬家公司
台南網頁設計專案-風妍麗緻旅店
台南網頁設計專案-迪艾絲酒店經紀公司
台南網頁設計專案-貓頭鷹婚禮樂團企劃
台南網頁設計專案-易行遊
台南網頁設計專案-心情故事花房
台南網頁設計專案-伍政小客車租賃有限公司
台南網頁設計專案-翔昱珠寶
台南網頁設計專案-米堤精緻婚紗
台南網頁設計專案-穎震企業股份有限公司
台南網頁設計專案-亞尼士國際股份有限公司
台南網頁設計專案-泉興疊具
台南網頁設計專案-台霖生物科技股份有限公司
台南網頁設計專案-康德隆生醫股份有限公司
台南網頁設計專案-菲菲新娘秘書
台南網頁設計專案-昇展室內設計
台南網頁設計專案-美商京統生技事業股份有限公司
台南網頁設計專案-唯光眼鏡
台南網頁設計專案-桐核麥生物科技有限公司
台南網頁設計專案-夢漣娜
台南網頁設計專案-寶島市集
 
台南網頁設計,台南網站設計