建立或改版網站時應避免的 8 個設計錯誤

你知道嗎？ 75% 的網站可信度來自其設計。

如果網站有許多設計錯誤，訪客可能會認為你的公司不值得信任。無論你是從頭開始建立網站還是更新現有網站，避免這些錯誤將使你的企業在網路上以正確的理由脫穎而出。

在這篇文章中，你將聽到五位來自 HubSpot 的員工分享關於最常見的網站設計錯誤見解。你還將學到可以實行的方法來修復或完全避免這些錯誤。

1.沒有優先考慮無障礙性

將無障礙性當作事後才考慮的問題，是你可能犯的第一個網站設計錯誤。根據 HubSpot 市場網站團隊的網頁開發經理 Maria Kelly 的說法，以下是關於無障礙性的四個主要錯誤：

• 色彩對比不足
• 缺少或不恰當的圖片替代文字
• 不足或缺失的視覺焦點指示器
• 忽視可訪問的名稱或標籤

接下來讓我們深入探討每一項

色彩對比不足

色彩對比常常是一個被忽視的無障礙性錯誤。這個錯誤通常發生是因為公司在設計網站時使用了他們的品牌色彩，但這些色彩通常並沒有考慮到無障礙設計。

Kelly 分享說：「當網站上使用的色彩組合缺乏背景色和前景色之間的充分對比時，文字和圖標會變得難以辨識，尤其對於那些有視覺障礙如色盲的人來說更是如此。」根據 2022 年 WebAIM Million 年度報告，超過 80% 的首頁存在色彩對比問題！

缺少或不恰當的圖片替代文字

使用螢幕閱讀器的網站訪客依賴圖片替代文字來描述圖片或圖形的內容。如果替代文字缺失或未能充分描述圖片，你就會讓需要這些訊息的讀者無法瀏覽你的網站。

Kelly 說：「圖片是你網站內容的一部分，所以重要的是要像考慮傳統網站文案一樣來考慮它們：在你的頁面上包含圖片所傳達的訊息是什麼？確保你使用的替代文字能夠傳達相同的含義。」

不足或缺失的視覺焦點指示器

沒有視覺焦點指示器，訪客將無法充分體驗你的網站。

Kelly 分享說：「焦點指示器通常出現在連結和按鈕等互動組件的外圍。重要的是要有一個明確的視覺指示，顯示目前頁面上哪個元素具有焦點，這樣使用鍵盤導航並能看到螢幕的用戶就能準確知道他們在頁面的哪裡，並且在與活躍元素互動時會有什麼預期。」

忽視可訪問的名稱或標籤

如果你的網站透過視覺傳達訊息，要考慮使用輔助技術的用戶。Kelly 說：「在設計頁面和組件時，如果訊息是透過視覺傳達的，那麼同樣的訊息應該透過可訪問的標籤來傳達給輔助技術。」

例如，網頁設計中的一個常見趨勢是卡片組件，每張卡片底部都有一個「閱讀更多」的按鈕或連結。這些按鈕與每個項目相關的訊息是透過設計來傳達視覺的，但是對於螢幕閱讀器來說，如果這些按鈕缺少帶有相關細節的可訪問標籤，例如「閱讀更多關於我們」，這些按鈕將難以區分。

2.忘記響應式設計的重要性

2022 年第二季度，行動裝置佔全球網站流量的 58% 以上，這還不包括平板電腦。如果你的網站在行動裝置上的導航不如桌面設備那樣簡便，你可能會讓訪客感到沮喪，並增加跳出率。

HubSpot 的設計副主管 Juan Manuel Devia Pinzon 分享：「現在的用戶相比以往，有更多訪客會從各種設備訪問網站，手機、平板電腦、筆記本電腦，甚至是電視。如果我們的內容在任何一種設備上顯示的狀況不佳，訪客將失去信任並點擊離開網站。現今可說是響應式設計的時代！」

根據 HubSpot 的首席產品設計師 Sean Landry 的說法，這種情況發生是有原因的。「網站通常使用桌面網頁瀏覽器中的工具構建。一個常見的錯誤是你假設你的客戶將以桌面設備查看你的網站，而忽視了使用行動裝置設備的用戶。」

3.為美觀妥協用戶體驗

過去幾年中，網站設計的一個常見錯誤是優先考慮美觀而忽略了功能。隨著互聯網充斥著大量的新媒體和設計，脫穎而出幾乎成為成功的必要條件。不幸的是，這導致了過度使用設計和圖形元素，雖然提升了用戶的感官體驗，但缺乏或與網站的真正目的脫節。

HubSpot 的設計體驗經理 Sergio Martinez 分享道：「多年來新媒體和設計的大爆發，讓優秀表現成為成功的必備條件。不幸的是，這導致了設計和圖形元素的過度使用，雖然提升了用戶的感官體驗，但缺乏或與網站的真正目的脫節。」

根據 Martinez 的說法，這表現在幾個方面：「從稀釋品牌價值主張的設計趨勢，到過度使用動畫、內容和重型圖形，這些元素雖然增強了美觀性，但變得無用。這並不意味著應該採用極簡主義或新殘酷主義風格；而是關於平衡以及形式如何支持功能。」

4.不投資客製化

走在市中心，你經過一家服裝店，它有一個創意十足、視覺吸引力強的櫥窗展示。展示了各種打折服裝，並通過背景和引人注目的文案講述了一個故事。然後，你走過另一家店，櫥窗上只有幾件衣服擺放在模特身上，沒有任何引人注目的地方。

把你的網站想像成你企業線上商店的前端。它應該反映你的品牌形象，並且感覺獨特而且符合你的公司。其中一個最大的網站設計錯誤是選擇標準化的模板，而不進行客製化。

例如，使用預設的標準主頁橫幅可能會事與願違。HubSpot SAPG 團隊的高級產品設計師 Lindsay Derby 說：「我們都見過它們，就在導航下方的全幅寬度圖片，通常有白色或黑色的文字和一個擺在上面的按鈕。」

Lindsay Derby 繼續說道：「這張圖片要麼非常亮，要麼非常暗，或者以巧妙的方式裁剪，使文字可閱讀。我認為這樣做為何如此錯誤有幾個原因。首先，它非常普遍，已經變得公式化和乏味。曾經是引人注目的設計決策，現在則變得單調無味。」

5.使用無法轉換的功能

另一個常見的錯誤是使用效果不佳的功能。無論一個元素在視覺上有多吸引人，記住主要的重點是你的網站效果如何。「另一個常見的錯誤是依賴於旋轉式輪播來展示多個同等級別的內容。」，Derby 分享道。

「已經有無數研究表明，用戶通常不會與輪播互動，尤其是在行動裝置上，互動成本很高的情況下。」

6.缺乏層次感

你有沒有過訪問一個網站時，發現不確定自己該專注在哪裡？如果是這樣，你可能訪問了一個缺乏層次感的網站。「就像報紙使用標題和副標題來標示重要性一樣，你的網站排版也應該如此。」，Landry 說道。

在你的網站上有秩序不僅具有美學吸引力，而且功能性強。「對網站元素的組織，給你的網站一個有條理的結構，推動用戶完成明確的行動，實現主要目標，從而創造無縫的體驗。」， Martinez 說道。

修復這個問題並不簡單，特別是當你的公司面對有不同目標的廣泛群眾時。然而，根據 Martinez 的說法，你最好還是應該做這件事，因為這個問題會顯著影響用戶體驗你的網站。「缺乏層次感會誤導用戶，阻礙他們達成目標。」，他分享道。

7.導航不清晰

清晰的導航可以減少訪客在訪問你的網站時遇到的困難，這也是導航不清晰如此棘手的原因。

「隨著越來越多的企業進入數位世界，網站上的內容變得越來越擁擠和複雜，擁有清晰的導航和在多個接觸點和用戶旅程中保持一致性，將確保用戶從初次訪客到網站支持者的平穩成長。」，Devia Pinzon 分享道。

8.無法有效傳達企業目的

當訪客訪問你的網站時，他們應該能夠清楚地了解你公司的業務範圍。如果這個畫面稍微模糊？你猜對了，訪客可能會放棄你的網站。

「訪客加載你的網站後，首先要做的事情是確定他們是否抵達了正確的目的地。」，Landry 說道。

「你的網站是否清楚地在首頁上方明確指出提供的產品或服務？」你的網站應該增強你公司的信譽。如果它未能有效地傳達你的企業目的，並讓訪客確信他們來到了正確的地方，那麼可能需要進行網站重新設計。

如何修正常見的網站設計錯誤

既然我們已經談過最常見的網站設計錯誤，現在讓我們討論如何解決這些問題。

別擔心：意識到問題是成功的一半。現在你知道應該避免什麼，就可以開始建立一個採用最佳網站設計實踐的網站。

1.將無障礙設計作為首要任務

「網頁無障礙設計意味著使網站及其上的訊息對所有人來說都能夠訪問，因此在設計網站時，確保網站的無障礙性非常重要。」，Kelly 表示。

當我們在網站設計中犯這些常見的無障礙性錯誤時，我們就會為數百萬生活中有某種形式殘疾的人造成使用障礙。即使你的網站看起來很棒，如果某些內容或操作對某些訪客來說難以訪問，那麼它就無法充分發揮達到你的目標和業務需求的潛力。

以下是一些可行的方法來解決設計無障礙性問題。

建立用戶角色以滿足各種用戶需求

確保你的用戶角色是包容的，並將無障礙性納入網站設計的基礎。

「早期和頻繁地考慮網站的無障礙性。在設計網站時，通常的第一步是建立幫助確保網站滿足各種用戶需求的用戶『角色』。」， Kelly 說道。確保你的用戶角色包含各種能力的人，是確保在項目的所有階段考慮無障礙性的一種方法。

學習無障礙最佳實踐

學習更多關於無障礙最佳實踐，以便在進行項目時能夠時刻牢記這些實踐。「有大量資源、檢查清單和指導可以教你如何設計、建構和測試無障礙性網站。」，Kelly 分享道。

2.確保你的網站具備響應式設計

透過響應式網頁設計，你可以放心，無論訪客如何訪問你的網站，他們都能享受流暢的體驗。幸運的是，製作一個響應式網站並沒有看起來那麼困難。如果你正在使用類似 Content Hub 的內容管理系統，甚至可以使用已經適合行動裝置的模板。

「考慮一下你希望訪客從頁面上獲得的最重要訊息，然後考慮它在最大和最小的螢幕上會呈現什麼樣子。」， Devia Pinzon 說道。你的目標是確保無論使用何種設備，訪客都能對你的內容有相同的理解。

一旦你建立了網站的行動版本，你的工作還沒有結束。「一定要在手機上測試你的網站。」，Landry 提醒道。測試網站可能會發現你之前沒有注意到的故障。

3.平衡美觀與流暢的使用者體驗

我們知道，當一個網站把美學放在第一位，功能放在第二位時會發生什麼。在一個成功的網站上，可以平衡視覺吸引力與流暢的使用者體驗，讓訪客能夠輕鬆地瀏覽頁面並找到他們所需的訊息。

根據 Martinez 的說法，實現這一點主要取決於團隊之間的有效溝通和協調。「設計團隊應該忠於戰略，確保設計支持用戶的主要目標，並與開發、內容和 SEO 團隊良好地協調。」，Martinez 分享道。

4.在網站設計上刻意創意

僅僅因為你看到很多網站採用特定的設計或佈局，並不意味著你的網站也需要如此。「對於位於導航下方的這個高價值位置，要有意識地考慮應該放置什麼。」，Derby 分享了她的看法。

自問關於這個空間用途的問題是另一個理解如何最好適應它的有效方式。這些圖像是否具有意義，還是僅僅裝飾性的？佈局是否設計得鼓勵用戶閱讀或採取行動？是否有一些有趣的內容可以吸引他們的注意力幾秒鐘？

類似於廣告中的橫幅失效效應，用戶開始直接跳過這些大的首頁部分，而是希望直接深入到下面真正有意義的內容。對於經常將最有價值的呼籲行動放在首頁橫幅中的網頁設計師和銷售人員來說，這是一個錯失的機會。

或者，你可以完全改變網站的佈局，不再在導航下方放置圖像。超過70%的企業投資於設計，以幫助區別自己與競爭對手，因此不要害怕做一些在你的行業中其他人未曾嘗試過的事情。

5.不要將不轉換的功能訊息埋藏起來

如果你知道某個功能不會轉換或訪客會忽略它，一定不要把關鍵訊息埋藏起來。（或者最好是完全放棄它。）如果你的公司網站使用了輪播功能，確保你考慮到最佳實踐。

「可以改進輪播體驗的幾點是使用高可見度的控制，限制幻燈片的數量，並將最重要的訊息放在首位。」，Derby 說道。如果用戶沒有與組件互動，則不應該將任何關鍵訊息隱藏在第一張幻燈片之外，這樣可以確保用戶得到完整的體驗。

6.確保你的網站有層次結構

如果沒有層次結構，你的網站會讓人感到壓倒性、混亂且難以消化。然而，有了層次結構，訪客可以清楚地理解到該看什麼和該閱讀什麼。幸運的是，你可以做一些快速的修正來在你的網站上實施層次結構。要獲得一些想法，你可以研究一些專門從事現代網頁設計層次架構的網站設計服務。

「一定要使用 HTML 標題標籤及其大小來告訴用戶每行文本的相對重要性是什麼。」，Landry 說道。

Martinez 補充說：「為了避免這些錯誤，非常重要的是要注意這三個主要的屬性：規模（使用大小差異），平衡（分佈視覺元素）和構圖（組織元素）。應用格式塔原則，特別是接近原則，生成一個統一的結構。」

7.確保你的網站導航直觀易用

如果你的網站導航存在問題，可能會反映在網站的跳出率上。將高效的導航視為實現流暢使用者體驗的必備條件。

「直觀的導航確保了流暢的使用者體驗，支持用戶的旅程，提供便捷的信息發現或返回特定點的途徑。」，Martinez 說道。為了保證這一點，團隊應該定義導航的層級（理想情況下不超過三個層級），以及不同層級的頁面如何返回其原層級。

同時，驗證正確的標籤，使任何用戶都能夠理解，並確保導航在不同螢幕尺寸上的運作正常，因為它們可能有不同的表現。

8.確保透過設計和文案傳達你的業務目的

你將使用引人入勝的文案和視覺元素來達到這一目的。在開始之前，問問自己你的網站的目的是什麼。你是在建立一個電子商務網站，讓訪客可以從你的公司購買商品嗎？還是你的網站主要目標是介紹你的團隊提供的服務？

明確了解你的網站使命是什麼。每個添加到網站上的功能和文案都應貢獻於該目的。你可能需要聘請 IT 服務來最大化你的觀眾參與度。

避免常見的網站設計錯誤，提升網站的可信度，並為訪客提供一個他們願意再次回來的體驗。

「網頁設計是一項團隊運動，需要一種循環的方法，確保團隊、利益相關者和用戶知識之間良好的協調。」，Martinez 說道。測試和反覆迭代，包括用戶研究和可用性測試，是確保你的網站朝著正確方向發展的最佳方式。