網站導航欄設計(引人註目的網站設計八大必備技巧)

從潛在客戶登陸您的網站的那一刻起,您認為您需要多長時間才能吸引他們的註意力並讓他們相信您的業務是真實且值得信賴的?研究表明,網站和登錄頁面的第一印象僅在幾毫秒內形成。訪問者對您的品牌形成的意見直接影響他們是否會繼續與您的網站互動,是否將您的品牌視為行業權威,並最終轉化。但是究竟是什麼影響瞭人們對品牌網站的看法呢?他們登陸頁面時首先註意到什麼?它是頂部的內容——你的標題。研究表明,任何網站最有價值的部分是放在首屏的內容尼爾森諾曼集團 2018 年的一項研究發現,網絡用戶將多達 57% 的瀏覽時間用於與第一屏中的元素進行交互知道情況就是這樣,您應該尋找增強網站標題的方法是合乎邏輯的。本文將教您如何構建您的網站最顯眼的部分,並設計一個保證給您留下深刻印象和轉化的標題。1.首頁大圖幻燈片你最重要的標題設計任務是選擇一個能吸引你的受眾的大圖幻燈片效果(並以積極的方式展示你的品牌)。而且,說實話,這將是更困難的任務之一。你看,沒有公式可以幫助你選擇完美的形象。有這麼多的可能性,您將不得不根據兩個因素來選擇網站視覺效果:您希望設計的美學方向。請記住,盡管設計精美的網站具有吸引力,但研究表明,用戶通常更喜歡簡單而熟悉的網站。一定要確保你的網站看起來不錯——隻是不要試圖重新發明輪子,因為這可能會導致糟糕的用戶體驗、用戶沮喪和(最壞的情況)高跳出率以及糟糕的品牌認知度。您想給客戶留下的印象。您在英雄部分中包含的視覺效果將自動告知您的受眾對您品牌的看法。因此,在您開始選擇圖像之前,請定義您的品牌標識並瞭解您希望觀眾如何看待您。例如,帶有最少圖像或沒有圖像的精簡網頁設計是 2022 年的流行選擇,並且有充分的理由 – 看看Grown Alchemist在其大圖部分中實現它的精美程度。該品牌使用單個 GIF 來傳達其產品的質量和精致度。這一選擇表明該品牌致力於時尚簡約美學,但這還不是全部。它還展示瞭其將卓越的用戶體驗優先於視覺效果的承諾(不犧牲美學吸引力)。或者,您可以以完全不同的方式使用您的網站標題。您可以使用包含人物的英雄形象。2009 年的一項研究表明,包含人臉圖像的網站會導致訪問者認為該品牌具有吸引力、熱情和以用戶為導向。這就是為什麼許多 SaaS 公司(例如Chanty)選擇此類圖像作為其標題部分的原因。為瞭提供卓越的用戶體驗,您實際上根本不需要使用英雄形象。您可以通過使用排版或使用更高級的內容格式(如視頻)來獲得同樣積極的結果,就像在Le Labo主頁上所做的那樣。2. 價值主張一旦你完善瞭你的英雄形象——傳達品牌專業知識和可信度的視覺基礎——你就可以開始關註推動轉化的第二個最重要的網站標題元素:價值主張。也稱為電梯推銷,這是簡潔地傳達您為目標受眾提供的價值的承諾,並且需要達到適當的平衡。一方面,它需要足夠令人印象深刻、獨特和有吸引力。但另一方面,它也必須真實可信。我們不要忘記,您還應該確保始終兌現您的承諾。如果您想確保您獨特的銷售主張能夠轉化,以下是提升它以推動結果的方法。保持簡單和相關標題中的價值主張要引人註目且有效,不一定要可愛或聰明。相反,它需要直接且易於理解地傳達您為客戶提供的價值,確保每個登陸您網站的人都知道您在主頁上花費的最初幾秒鐘內所做的事情。有關如何通過直接激發轉化的靈感,請查看Ultimate Meal Plans 的價值主張,它承諾“膳食計劃變得簡單。每周提供定制的膳食計劃、雜貨清單和食譜。”專註於客戶獎勵,而不是您的產品如果您研究消費者的決策過程,您會發現人們並不關心高級功能和技術細節。作為一項規則,他們總是選擇投資於對他們最有利的解決方案(無論是提供最物有所值、方便還是尊重他們的隱私)。因此,在撰寫您的獨特價值主張時,請以關註您的客戶的方式進行,正如Curology所做的那樣,該品牌承諾“由專傢個性化的全方位服務護膚 […] 以取得臨床證明的結果。”將自己與競爭對手區分開來最後,當您嘗試撰寫保證推動轉化的價值主張時,請不要忘記您的網站標題提供瞭突出產品獨特性和優勢的絕佳機會。嘗試使用此部分立即將您的品牌與競爭對手區分開來。例如,谷歌在Chrome登陸頁面上通過指出該應用程序是“谷歌構建的瀏覽器”來做到這一點。簡單的?確實。但它有效。3.導航當考慮網站標題設計如何為良好的用戶體驗和用戶界面做出貢獻時,您會意識到最頂層區域的一個特定部分——導航菜單——決定瞭你的網站在觀眾眼中的表現。事實上,如果您希望您的網站取得成功,那麼設計良好且面向用戶的導航菜單是絕對必要的。但是,雖然您可能已經閱讀過導航最佳實踐(例如 3-click rule),但您可能仍然想知道:UX研究對導航有什麼看法?就用戶友好性而言,對於構建網站的最佳方式沒有明確的規則。但是,在優化網站標題時,您應該嘗試並堅持一些技巧。不要將形式優先於功能用戶體驗研究表明,網頁設計中最重要的是可發現性和易用性。瞭解移動優先和響應式網頁設計之間的區別,並盡最大努力使可見性和可用性優於趨勢或慣例。有關響應式標題設計的絕佳示例,請查看Persol。該品牌的標題會根據用戶的屏幕尺寸而變化,寬度低於 1,025 像素的任何內容都會觸發傳統的水平導航欄切換到更適合移動設備的漢堡菜單。根據需要而非規則確定菜單項一些最佳實踐建議會告訴您導航菜單不應包含超過七個項目。但是,您需要知道這並不完全正確。隻要菜單結構正確,您的導航菜單就可以包含所有關鍵內容的路徑。您可以將頁面分成一個主菜單和一個堆疊在其上方的較小的實用程序菜單,或者戰略性地使用下拉菜單。為瞭避免導致混亂和決策癱瘓的菜單混亂,保持菜單清潔和可用仍然是理想的。如果您的組織專註於一件事,請不要嘗試在水平菜單中塞入太多元素。相反,像Evolve Skateboards所做的那樣,優先考慮指向有利於潛在買傢的頁面的鏈接。設計實驗雖然在您的網站標題上設計導航菜單似乎是一項非常簡單的任務,但不要讓自己受到慣例的限制。是的,您應該滿足網絡訪問者的用戶體驗期望。但是,隻要這些得到尊重,您就可以為您的品牌做任何最適合您的事情——即使這意味著將菜單放置在一個稍微不同尋常的位置,就像在Carnival Sounds網站上所做的那樣。4. 網站搜索盡管是一個經常被忽視的網站標題元素(或至少是事後的想法),但放置得當且經過優化的網站搜索功能對於確保網站的高性能至關重要。根據Econsultancy 的研究,並非所有網站訪問者都使用搜索功能。盡管如此,當他們這樣做時,他們的轉化率提高瞭 1.8 倍,平均貢獻瞭總收入的 13.8%。考慮到這些信息,在您的網站標題中獲得恰到好處的搜索功能至關重要。為確保可見性,請將搜索按鈕放在預期位置。Loewe網站上使用的導航欄右上角是傳統選擇。您還可以更突出地顯示搜索欄,尤其是在您的業務依賴大量內容營銷的情況下。例如,Above House網站有一個搜索觸發按鈕,用於啟動覆蓋。這表明該品牌致力於為讀者提供關於他們消費的內容的代理權,而不是強迫他們處理不必要的幹擾。5. 重要的行動呼籲您可能已經知道,完全優化的號召性用語按鈕對於確保您的網站轉換至關重要。但是您是否考慮過展示 CTA(尤其是高價值 CTA)的最佳方式是將其放置在您網站的多個主要位置?這是正確的。使用您的網站標題來顯示號召性用語可以幫助您吸引用戶的註意力並確保您的網絡訪問者轉化為客戶。在您的網站標題中放置重要的號召性用語的規則是什麼?好吧,在設計您的網站時,您需要註意一些事項。通過引人註目的設計選擇吸引註意力使用網站標題 CTA 實現高轉化率的先決條件是做出正確的設計選擇。您最好的選擇是選擇一個符合您網站整體外觀的美學方向,同時仍然脫穎而出。快速瀏覽一下Flora網站,就可以看出黑色和深綠色的 CTA 按鈕在不破壞網站整體外觀或感覺格格不入的情況下非常突出。在主要位置顯示 CTA您可以在標題設計中實施的另一種經過驗證的 CTA 按鈕放置策略是將這些元素放置在 Web 訪問者最有可能註意到的位置。傳統的選擇自然就在您的價值主張之下。但是,您也可以在網站的導航菜單中為高價值 CTA 保留一個位置,就像Otto所做的那樣。傳達您是誰以及訪客可以做什麼最後,當您努力優化網站標題 CTA 以提高轉化率時,不要低估 UX 副本在吸引訪問者采取行動方面的作用。確保您的號召性用語清楚(且引人入勝)傳達有關單擊按鈕時會發生什麼的說明,就像在Preset Love標題 CTA 上所做的那樣,它邀請訪問者獲取預設捆綁包。6. 關鍵站點功能雖然某些網頁的目標是將網絡訪問者轉化為潛在客戶或客戶,但其他網頁的目標是提示用戶采取特定行動。在這些情況下,使用網站標題來顯示關鍵的 UX 元素是一個很好的選擇。這允許這些功能通過視覺層次結構確定其重要性來脫穎而出。設計選擇還可以帶來更高的轉化率,因為關鍵的站點功能不會隱藏在 CTA 後面的某個地方。它們顯示在訪問者最有可能首先註意到的網站部分。UnscrambleX等品牌通過使用顏色、佈局和視覺提示使用戶輸入成為網站標題的重要組成部分,在這方面做得特別好。通過使用相同的藍色背景來容納公司徽標、導航菜單和交互元素,該品牌可確保首次訪問網絡的訪問者立即看到他們通過使用該工具獲得的價值,從而最大限度地提高他們的轉化機會。7. 購物車截至 2021 年 11 月,平均購物車放棄率為 69.82%,這意味著企業由於糟糕的用戶體驗設計而失去瞭大約三分之二的潛在買傢。事實上,根據 Baymard 研究所的說法:17% 的購物車放棄是由於復雜的結賬流程造成的。16%,因為用戶無法預先計算總訂單成本。13% 是由於網站錯誤和崩潰而發生的。現在,您可能在想:這與我的網站標題有什麼關系?答案很簡單。像在網站頂部添加購物車導航按鈕這樣簡單的操作可以幫助您重新獲得部分損失的收入,讓網絡訪問者更輕松、更方便地完成購買。而且,要獲得更高級的方法來充分利用此 UX 元素,您可以執行類似於Kopi Luwak Direct的操作。在此站點上,單擊購物車圖標不會使用戶離開該頁面。相反,它向他們展示瞭一個彈出窗口,讓他們可以方便地概覽他們的購物車,同時允許他們繼續將物品添加到他們的包中。8. 聯系方式最後,當您尋找充分利用網站標題設計的方法時,請不要忘記,您可以通過包含您的聯系方式等簡單的操作來使用此網頁元素作為即時可信度助推器。如果您知道轉化受眾的最大機會是讓您的銷售團隊與他們溝通,請確保您的網站標題包含您的電話號碼、社交鏈接、地址和營業時間等信息,就像在Fire Pit Surplus上所做的那樣主頁。這不僅會向首次訪問的網絡訪問者表明您的品牌是一傢真正可靠的企業,而且還會使他們更有可能接觸到您的銷售團隊,為您提供寶貴的機會,讓他們成為您品牌的忠實支持者.總結盡管它們已經一次又一次地被證明是任何網站上的主要房地產,但標題仍然通常被視為事後的想法。通過實施本文中的簡單提示,您可以確保網站標題區域的每一英寸都在推動轉化方面發揮作用。不要猶豫,做出改變。嘗試替代設計解決方案,並優化功能以優先考慮 UX 和 UI。畢竟,如果您隻有 50 毫秒的時間來給觀眾留下良好的第一印象,那麼讓它發揮作用就不是一種選擇——這對您的業務成功至關重要。

本文出自快速备案,转载时请注明出处及相应链接。

本文永久链接: https://www.175ku.com/42302.html