網站開發指南, 網頁設計指南

網頁設計:提高用戶體驗的155種策略,加強SEO優化-2024

本指南包含您需要了解的有關網頁設計:如何提高用戶體驗,它的可用性,以及如何在搜尋引擎上加強SEO優化的所有信息。

如果您想提高網站的可用性,您將看到我行之有效的策略。

如果您不熟悉網站可用性,我將向您展示如何解決每個問題。

事實上:

您會發現我的155個網站可用性獲勝公式。

您可以在閱讀後立即應用它們並進行SEO優化和改善轉化。

讓我們開始吧!

第一章:網站可用性基礎

可用性通常被忽略,但是它使您的網站對用戶來說很直觀。

如果您的網站不友好,那麼您的網站將無法高效運行,特別是會使訪問者在您的網站上停留的時間更短(跳出率高),並導致他們無法達到轉化目標。

在本章中,我將介紹網站可用性的基礎知識。

您將了解可用性的含義以及它如何使您的業務成功。

什麼是可用性?

可用性在用戶體驗(UX)中扮演著至關重要的角色。它衡量產品或用戶界面的使用容易程度,自然程度和滿意度。要評估產品或服務的可用性,您必須考慮幾個因素:

  • 用戶上下文
  • 產品本身的環境
  • 特徵
  • 有效性和效率
  • 用戶滿意
  • 學習曲線

在評估可用性時,您還必須檢查產品的實用性。開發的產品易於使用但不能實現用戶期望的目標並不重要。

什麼是網站可用性?

當我們談論網站的可用性或網站的可用性時,我們指的是訪問者對網站的使用效率。它包括他們如何與每個元素進行交互以及如何瀏覽所有頁面。

我們的網站需要高效,並在用戶瀏覽網站時提供滿意的服務,而不會忽略其主要目標。

網站的可用性是您在線業務中最關鍵的要素之一。它使您的受眾可以清楚地在他們的網站上找到他們想要的東西。

如果您的網站易於使用,人們就可以完成任務而無需離開它,例如轉化,購買或註冊。

如果您不轉換網站訪問者,則您的網絡可用性有問題。一旦發現問題,就應該開始監視網站中的所有關鍵元素,並著重於修復網站的可用性。在以下各章中,我將指導您完成網站的可用性,並分享一些最有效的策略來提高網站的可用性。

什麼使網站可用?

大多數優質網站都要求用戶直觀地使用它們。即使新用戶很容易在自己喜歡和消費內容的地方導航。

為此,您需要了解用戶如何使用您的網站。提供用戶將在您的主頁上顯示的可能選項,可以幫助他們快速完成任務。

資料來源:任天堂–出色的導航菜單
資料來源:任天堂–出色的導航菜單

最重要的是,好的網站必須遵循網站可用性指南。它也可以提高用戶滿意度。

要製作一個好的網站,有許多可用性原則。這包括確保用戶可以從任何設備訪問您的網站,並且網頁顯示出一致性。

為什麼網站可用性很重要?

網站的可用性起著客戶服務的作用。

在您的網站上完成無錯誤的任務可以促進互動。通過使用粗體文本,用戶可以快速掃描並使用您的內容。

因此,網站的可用性就是提供更好的用戶體驗(UX)。從您的角度來看,這與客戶服務有關。改善網站的可用性可以創造雙贏的局面。

網站可用性的好處

  • 提供在線客戶服務
  • 提高用戶滿意度
  • 更好地參與
  • 提高轉化率
  • 增加SEO排名
  • 升級用戶體驗
  • 減少客戶支持費用

因此,對於在線業務而言,使網站易於使用至關重要。

第二章:網站可用性原則

許多因素構成網站的可用性,這將改善您的用戶驅動設計。

了解每個原理可以使您更好地構建功能性網站。

在本章中,我將展示您不能忽略的八個最關鍵的原則。

為了具有良好的網站可用性,您需要設計以用戶為中心的網站。這意味著了解用戶意圖並相應地構建頁面。

讓我們深入探討哪些原則可以提高可用性。

以下是八個最重要的因素。

輔助功能

網站可訪問性意味著用戶使用您的網站內容的平等程度。這些“用戶”包括殘疾人。它有助於在任何環境中傳遞消息。

WordPress Media Manager中的圖像詳細信息
WordPress Media Manager中的圖像詳細信息

如何改善:

  • 對於視力不好的老年人和老年人,請使用適當的字體大小。
  • 提供選項供用戶更改字體大小。
  • 不加載時在視覺內容上添加替代文本。
  • 盡可能避免打開新窗口。

可用性

它描述了用戶使用您的網站有多方便。特別是從移動設備瀏覽時。

資料來源:亞馬遜
資料來源:亞馬遜

如何改善:

  • 加快加載時間,以防止用戶等待幾秒鐘。
  • 開發響應式設計以從任何設備進行訪問。
  • 修復斷開的鏈接和重定向問題。

清晰

清晰性是指用戶在您的網站上完成任務的過程如此簡單明了。它還會引起對其他網站的熟悉。

資料來源:Zillow –清晰易懂
資料來源:Zillow –清晰易懂

如何改善:

  • 構建簡單的導航,以減少實現用戶目標的步驟
  • 設計信息架​​構,以避免用戶混淆。
  • 避免不必要的動畫,彈出窗口和廣告
  • 鏈接和號召性文字使用不同的顏色

易學性

可學習性是指新用戶在首次訪問您的網站時完成任務的難易程度。

來源:Airbnb –直觀設計的典範
來源:Airbnb –直觀設計的典範

如何改善:

  • 應用直觀的設計和用戶界面。
  • 使用全局導航
  • 向用戶顯示購物車頁面的下一步
  • 將搜索功能放在右上角

信譽度

它表明用戶使用您的網站的舒適程度。網站信譽可建立對用戶思想的信任。

資料來源:Zapier –推薦頁
資料來源:Zapier –推薦頁

如何改善:

  • 在每一頁上顯示您的詳細聯繫方式
  • 插入證明書和社會證明以建立良好的聲譽
  • 從本地企業目錄網站添加5星級評論
  • 顯示您商家的真實照片

效用

網站有效性意味著用戶在您的網站上完成任務的速度。

來源:Twitter幫助中心
來源:Twitter幫助中心

如何改善:

  • 創建常見問題解答部分,以消除用戶的顧慮。
  • 當用戶犯錯時,顯示錯誤消息和修復建議。
  • 使按鈕和復選框易於點擊
  • 管理搜索框的顯示方法

關聯

它顯示了用戶使用您網站上的內容的適當程度。

資料來源:阿迪達斯–推薦產品
資料來源:阿迪達斯–推薦產品

如何改善:

  • 標記您的內容類別和用戶狀態。
  • 個性化給每個客戶的消息

可讀性

可讀性表示用戶閱讀和理解您的內容有多麼容易。

資料來源:Backlinko –他們博客上可讀性很好的例子
資料來源:Backlinko –他們博客上可讀性很好的例子

如何改善:

  • 添加子標題和項目符號列表以提高可掃描性。
  • 在文本,行和段落之間插入適當的空白。
  • 避免通過拆分和縮短句子來寫長句子。
  • 使鏈接易於識別和保持一致。

既然您了解了哪些因素會影響您的網站可用性,那麼現在該開始了解我的網站可用性準則了。

第三章:主頁可用性準則

網站的可用性有助於您提高參與度。

首先,您需要將它們應用到您的業務首頁上。大多數人會決定是否與您互動,並從首頁獲得第一印象。

在本章中,我將介紹您可以為主頁可用性做些什麼。

主頁是您網站上最重要的頁面。

您必須幫助用戶完成他們為什麼進入您的頁面。它要求您掌握用戶行為並提供更好的路徑。

來源:Duolingo –主頁可用性
來源:Duolingo –主頁可用性

同時,您應該告訴自己獨特的銷售主張,並為他們的目標提供指導。

主頁無法涵蓋您的所有信息,但應提供鏈接/導航來獲取它。

領先的UX公司Nielsen Norman Group分享了以下十種首頁可用性策略:

  • 在每個網頁上啟動單句標語。
  • 您的網頁標籤標題在搜索引擎中具有出色的可見性
  • 將所有公司信息放在一個地方(關於我們)
  • 為用戶強調網站的起點
  • 放置搜索功能
  • 顯示您的最佳或最新內容
  • 用最重要的關鍵字開始鏈接
  • 顯示如何查找首頁的特色內容
  • 不要過度格式化導航欄等標準元素
  • 使用有意義的圖形,不會引起注意

主頁可用性策略

  1. 主頁上有一個明確的價值主張。
  2. 您的主頁提供了所有主要選項(帶有鏈接)供您使用。
  3. 主頁的設計鼓勵用戶瀏覽您的更多頁面。
  4. 您的主頁具有專業的設計。
  5. 選項卡上有一個網站圖標。
  6. 主頁的標題在搜索引擎中具有很好的可見性。
  7. 您的網站有一個SEO友好的URL。
  8. 您的徽標始終位於左上角。
  9. 您的徽標可以點擊,使用戶無論身在何處都可以進入您的主頁。
  10. 主頁上的導航區域沒有乾擾。
  11. 導航選擇順序是面向任務的方式。
  12. 如果您銷售產品,則應在首頁上提供產品類別。
  13. 第一視圖設計包含有意義的圖形和清晰的號召性用語
  14. 您的主頁創造了良好的第一印象。
  15. 您可以從主頁訪問公司信息的區域或鏈接。
  16. 右上角有一個搜索框。

改善主頁的一種實用方法是使用具有熱圖或記錄功能的Web分析工具,例如HotjarLucky Orange

這些功能告訴您您需要在主頁上執行的操作。

第四章:設計和頁面佈局可用性準則

考慮用戶意圖來設計網站是成功的關鍵。

如果您希望人們花費時間並消耗您的內容,則需要優化頁面佈局。

在本章中,我將分享一些可行的可用性設計策略。

讓我們看看一些網頁設計統計數據。

有一些有趣的Web設計見解,您不應忽略。

  • 加載超過2.5秒的網頁可提高跳出率
  • 無響應的站點是後退按鈕吸引。
  • 如果網站無法提供有吸引力的內容/佈局,則將有38%的人離開網站。
  • 94%的訪問者關閉了網站,並停止信任該網站(如果其網頁設計已降級)。
  • 95%的訪問者同意,重要的是要擁有良好的用戶體驗

如您所見,網頁設計會影響業務成功。您必須改善您的網頁設計和佈局以創造良好的印象。

這是網頁設計可用性的最重要領域。

佈局

您網站上的每個頁面都應具有相同的佈局設計。這種一致性增加了您的網站可用性,並幫助用戶更好地理解內容。

資料來源:Nest –網格設計
資料來源:Nest –網格設計

另外,您可以使用基於網格的佈局來確保您擁有整潔有序的設計。

導航

在您的網站上瀏覽用戶可以幫助用戶瀏覽更多內容。

資料來源:Etsy –麵包屑
資料來源:Etsy –麵包屑

例如,您可以為用戶提供一條簡單的麵包屑路徑。它為用戶提供了他們所在的位置以及返回上一頁的選項的信息。

用戶界面(UI)

用戶界面是用戶與您的網站進行交流的任何方式。像輪播,滾動,按鈕,手風琴等等。

資料來源:Lyft
資料來源:Lyft

請記住,過度格式化的設計使其難以執行。

視覺設計

視覺設計和選擇的配色方案會對用戶對您和您的網站的感覺產生重大影響。例如,持續使用品牌色彩可以幫助用戶更好地參與。

來源:Slack –自定義圖形
來源:Slack –自定義圖形

確保使用高對比度的背景色和適當的文字。

內容

HTML幫助用戶以您的設計方式使用內容。使用正確的標題和圖像標籤可以使您的內容易於閱讀和理解。

資料來源:皮克斯– 404頁
資料來源:皮克斯– 404頁

另外,為斷開的鏈接和404頁面提供適當的支持也很有幫助。確保為頁面加載速度優化視覺內容。

鏈接

網站上的鏈接使您可以將用戶引導到特定頁面。您可以使用不同的顏色或下劃線來站立它們。

資料來源:24小時健身–鏈接對比
資料來源:24小時健身–鏈接對比

鏈接到其他頁面或網站時,錨文本非常有用。

網頁設計和頁面佈局可用性策略

  • 您的網頁設計將創建一致且可識別的外觀。
  • 該佈局鼓勵用戶將注意力集中在下一步該做什麼。
  • 每個頁面共享一致的佈局。
  • 導航和隱私策略等標準元素很容易找到。
  • 在每個頁面上,您的徽標都可以在左上角單擊。
  • 您的徽標指向您的主頁。
  • 背景顏色將項目分組。
  • 如果您使用多種顏色,請確保它們可以很好地協同工作。
  • 您的網站避免了複雜的背景。
  • 最關鍵的信息在第一個視圖中。
  • 您的網站盡可能避免長時間向下滾動。
  • 用戶無需水平滾動即可使用該站點。
  • 可點擊的項目看起來可按下。
  • 超文本鏈接易於識別。
  • 您的網站避免使用藍色文本或在網站中未鏈接的元素下劃線。
  • 下劃線僅適用於超文本鏈接。
  • 從按鈕的標籤和設計可以明顯看出其功能。
  • 可點擊的圖像包括替代文本。
  • 用戶單擊按鈕和鏈接後,它們將顯示不同的內容。
  • 用戶單擊的鏈接將變為不同的顏色。
  • 您的網站使用頁邊距,尤其是按鈕附近。
  • GUI組件使用正確。
  • 字體一致且可讀。
  • 您的網站盡可能避免使用大寫字母和斜體文本。
  • 粗體字用於強調重要的主題類別。
  • 所有圖形都是標準且直觀的。
  • 圖形不會使用戶與橫幅廣告混淆。
  • 在信息密度和空白空間的使用之間找到適當的平衡。
  • 標籤,背景色,邊框和間距使識別分組項變得容易。
  • 每個圖標都有獨特的外觀,但可以保持良好的和諧感。

第五章:導航可用性準則

現在,您已經為頁面進行了粗略的設計。現在是時候確定如何導航用戶到他們想要做什麼。

為確保用戶完成其任務,遵循此網站導航指南至關重要。

在本章中,我將向您展示如何設計有效的導航。

對於良好的Web設計,了解用戶對您的網頁的期望至關重要。直觀,設計合理的網站可幫助您的聽眾專注於完成任務。

同樣,出色的信息架構可幫助用戶更快地找到信息並瀏覽更多內容。

資料來源:Pinterest
資料來源:Pinterest

例如,如果禁用“後退”按鈕,則將導航選項限制為用戶。

此外,可單擊的列表減少了用戶的操作,並且他們可以快速查看長頁面所需的內容。

此外,您還可以從許多人犯的錯誤中提高導航的可用性。

這些是典型的六個導航設計錯誤:

  • 您的導航菜單中有太多選項
  • 導航菜單上有足夠的選項
  • 用戶找不到導航菜單
  • 您正在嘗試重塑導航輪
  • 有不熟悉的圖標
  • 您不會告訴用戶他們在哪裡

這些常見的錯誤使用戶無法完成他們想要的任務。

了解用戶的目標和需求以提高可用性非常重要。然後,您應該設計一個用戶可以無縫瀏覽的網站。

請記住,較短的網頁比較長的網頁更具吸引力。

導航可用性策略

  • 大多數用戶使用的信息很容易從大多數頁面導航。
  • 網站結構很簡單。
  • 用戶使用適當的信息和頁面很方便。
  • 您的徽標始終位於左上角。
  • 全局導航選擇是以面向任務的方式進行的。
  • 導航系統廣泛。
  • 菜單下拉菜單應為垂直。
  • 您的網站在必要時使用本地導航來輔助全局導航。
  • 您的網站的標準元素可從每個頁面訪問。
  • 您的網站在需要時使用便利菜單。
  • 沒有死胡同頁面可以防止用戶做額外的工作。
  • 您的網站在頁面頂部找到導航選項卡。
  • 導航項和超文本鏈接是無術語的。
  • 圖標使用戶可以直觀地了解功能。
  • 該站點地圖提供了您的網站的概述。
  • 從頁腳的每個頁面都可以訪問您的站點地圖。
  • 用戶始終可以看到他們在網站上的位置。
  • 您的網站避免打開新窗口。
  • 說明和消息出現在同一位置。
  • 該站點不會禁用瀏覽器的“後退”按鈕,而是顯示在瀏覽器工具欄上。
  • 單擊後退按鈕會將用戶帶回到用戶所在的頁面。
  • 分頁對於組織很有用。
  • 鏈接和導航標籤包含用戶使用的單詞。
  • 鏈接是一致的,並且可以從常規文本中識別出來。
  • 鏈接在不同部分中看起來相同。
  • 打開新窗口的超文本鏈接與加載另一個頁面的超文本鏈接不同。
  • 到購物籃和結帳的鏈接均可見。
  • 產品頁麵包含用於交叉銷售的相關產品的鏈接。
  • 用戶可以對頁面進行排序和過濾。
  • 當鼠標懸停在可點擊位置時,會有明顯的變化。
  • 用戶可以通過箭頭按鈕和Enter鍵進行導航。

有關導航的更多詳細信息,請查看此界面設計技巧

第六章:搜索可用性準則-SEO優化

通過SEO優化搜索,用戶可以更快,更舒適地找到所需內容。

如果頁面很多,則必須具有搜索功能。

在本章中,我將向您展示如何申請搜索框。

搜索功能是另一種導航方式。

儘管不需要網頁少於100個的網站,但它仍然很有用。而且有些人更喜歡搜索而不是導航。

因此,搜索在您的網站上起著至關重要的作用,並提高了可用性。

資料來源:Yelp

搜索功能可以幫助用戶更快地找到特定內容(比導航)。此外,他們可以一次比較多個帖子,並消費自己喜歡的內容。

此外,您擁有搜索功能的一大優勢。

您將確切知道用戶在您的網站上正在尋找什麼。它可以幫助您改善內容營銷策略。

這是搜索可用性的三個最關鍵的領域。

搜索外觀

搜索框的外觀應直觀識別。如果用戶不知道在哪裡搜索,那麼您將失去轉換機會。像大多數網站一樣,您應該將其放置在每個頁面的左上角。

Bing搜尋引擎
Bing搜尋引擎

此外,包裝盒中附帶的圖標僅是放大鏡的簡單設計。

搜索行為

搜索中應在搜索查詢中選擇同義詞並使用自動建議。

資料來源:谷歌

您還可以在結果頁面中顯示摘要和圖像預覽。它將為用戶提供更多選擇,以瀏覽並找到他們最相關的內容。

搜索結果

搜索結果應該簡潔明了。

您應該顯示一些詳細信息,例如簡短說明和特色圖片。如果關鍵字沒有任何結果,您可以提出建議。

資料來源:宜家
資料來源:宜家

確保測試您的結果隨時間推移是否準確且相關。

精心設計的搜索使用戶友好地完成網站上的任務。

Google是最佳搜索可用性設計的典範。處理拼寫錯誤和同義詞並向用戶顯示最佳結果至關重要。

搜索可用性策略

  • 編輯和重新提交搜索很容易。
  • 搜索結果清晰,有用,並按相關性排名。
  • 搜索界麵包含一個搜索框和一個可單擊的按鈕。
  • 您的網站在所有頁面的左上角放置了一個搜索框。
  • 搜索覆蓋整個網站,而不是整個網站。
  • 搜索結果頁面上清楚顯示了結果數量。
  • 用戶可以配置每頁的結果數。
  • 如果沒有搜索結果,系統將提供改進查詢的建議。
  • 搜索結果頁面沒有顯示重複的結果。
  • 您的搜索框足夠長,可以看到整個搜索查詢。
  • 移動設備上的搜索字段應為屏幕的整個寬度。
  • 顯示搜索結果頁面,其中包含有用的信息。
  • 搜索功能提供自動拼寫檢查並提供同義詞建議。
  • 搜索結果頁在結果頁上突出顯示完全匹配的關鍵字或同義詞。
  • 如果要使用圖標,它應該是一個簡單的放大鏡圖標。

有關搜索可用性的更多詳細信息,請查看此有用的設計技巧

第七章:內容可用性準則

內容為王。吸引觀眾的內容在網絡上很重要。

本指南說明瞭如何在線提供“無障礙”內容。

您將看到有關內容可用性準則的技術。

可讀的Web文本會影響用戶使用內容和吸收內容的方式。如果您希望用戶在閱讀文本時沒有任何問題,請考慮使用Web排版元素。

資料來源:Inc.
資料來源:Inc.

這是三個重要的Web排版原則。

層次結構

文本的層次結構使用戶可以查看哪個部分更重要。它將幫助用戶參與閱讀到底。您可以使用標題來區分重要文本和正文。

對比

您可以使用顏色來強調文本中的目標消息。顏色可幫助您從其他文本中脫穎而出。

特別地,對比度至關重要。高對比度使文本易於掃描和閱讀。設計您的背景顏色和文本顏色,以便它們對用戶具有良好的對比度。

文字間距

文字間距會影響可讀性。如果您沒有適當的文字間距,用戶將很難閱讀您的文字。這是使文本突出的另一種方法。

如您所見,這些Web排版因素對於設計Web內容至關重要。它提高了可讀性,使您可以輕鬆地指導用戶瀏​​覽內容。

同樣,當涉及到Web上的內容時,大多數人都會針對SEO進行優化。它使您可以在搜索引擎中排名更高,並吸引更多自然搜索流量。

現在,RankBrain和許多其他算法都更加關注用戶。SEO策略具有通用性作為可用性。

例如,當您有重複的頁面標題時。搜索引擎只會在搜索引擎中排名頁面的其中之一,因此您將錯過SEO的巨大機會。同樣,它使用戶在搜索時出現困惑,並且在結果頁面上顯示重複的內容。

因此,可用性和SEO的正確結合可以改善UX和您在SERP中的排名。

內容可用性策略

  • 您的網站提供了獨特而引人注目的內容。
  • 您網站上的文字清晰明了。
  • 文本左對齊,而不是右對齊。
  • 最小文字大小為14像素。
  • 您的字體反映了您的品牌個性。
  • 內容具有清晰的信息層次結構。
  • 文字是倒金字塔形。
  • 寫作應該是八年級。
  • 文本應盡可能避免使用大寫字母的單詞。
  • 您的網站使用主動語音。
  • 文本避免使用困難的術語,縮寫和首字母縮寫詞。
  • 頁面使用項目符號和編號列表以提高可讀性。
  • 內容快速掃描,標題充足,段落簡短。
  • 您的網站使用地圖,圖表,圖形,流程圖和其他可視內容。
  • 每個頁面都有一個描述性且有用的標題。
  • 鏈接和鏈接標題具有描述性和預測性。
  • 標題和副標題簡短,直接且具有描述性。
  • 編號列表從“ 1”開始而不是“ 0”。
  • 您的網站在背景上使用易於閱讀的文字顏色。
  • 文本,行,標題和段落之間應留有適當的空白。
  • 您網站上的Web內容易於打印。

如果您需要更多有關SEO內容的詳細信息,請查看本指南以創建SEO內容

第八章:Web表單可用性準則

Web表單是您進行轉換的地方。

許多人無法充分優化表單,以致用戶無法填寫。

在本章中,您將學習如何使用Web表單可用性。

Web表單優化對於將用戶轉換為客戶,潛在客戶和訂戶至關重要。

大多數網站都利用它來獲取客戶信息,參與並增加銷售。

例如,聯繫表,註冊表,調查,測驗等等。這些表格可幫助您跟踪在線線索並提供更好的用戶體驗。

資料來源:Leadformly
資料來源:Leadformly

但是,很難鼓勵人們填寫在線表格並提交。沒有人喜歡在網絡上提供個人信息。

若要進行此工作,您需要提高Web表單的可用性。這將使更多的人提交您的表格並增加轉化。

根據您的業務目的,格式,長度和內容類型將有所不同。

Web表單沒有“一刀切”的解決方案。因此,學習並應用Web表單可用性準則至關重要。

WEB表單可用性策略

  • 當表格不完整時,您的網站可以輕鬆糾正錯誤。
  • 數據輸入和數據顯示之間存在一致性。
  • 用戶可以通過輸入基本要求來提交表單。
  • 在“必填”和“可選”字段之間有明顯的區別。
  • 您的網站說明了表格所需的信息。
  • 文本輸入字段說明用戶需要輸入的數據量和格式。
  • 字段標籤應在文本字段之外。
  • 表單上的字段包含提示或示例。
  • 表單使用戶可以使用單一的交互方法。
  • 您的網站顯示了完成步驟。
  • 用戶提交表單之前,您的網站將驗證表單條目。
  • 用戶填寫表格後,您的網站不再要求其他信息。
  • 該站點會自動輸入格式數據,例如$和%。
  • 表單上的字段標籤文本解釋了輸入內容。
  • 表單上的表單框足夠長,可以看到用戶回答什麼。
  • 表單將問題按邏輯分組。
  • 表單上的每個組都有一個標題。
  • 表單標籤和字段在一條垂直線上對齊以進行快速掃描
  • 問題用清晰,簡單的語言表達。
  • 您的網站通過使用單選按鈕和復選框避免僅輸入文本字段。
  • 如果用戶單擊“返回”按鈕,則您的網站將還原該信息,並且不要求他們重新輸入。
  • 用戶犯錯誤時,將顯示一條錯誤消息。

有關Web表單可用性的更多詳細信息,請查看此表單設計最佳實踐

第九章:容錯可用性指南

它很可怕:

您網站上的一個錯誤可能會破壞您的信譽和業務。

該錯誤可能是使您感到難以理解的技術術語。或者,它可以幫助您提高頁面加載速度,使人們等待3秒鐘以上。

在本章中,您將學習如何防止錯誤並準備解決問題。

容錯可用性可檢測並處理網絡上的人為錯誤。

精心設計的容錯能力使用戶可以輕鬆收集錯誤。

即使很難減少這些錯誤,也可以將它們減少到最小。

資料來源:Mailchimp
資料來源:Mailchimp

您可以採用以下三種主要的容錯方法:

1.驗證

網頁驗證對於為用戶提供高質量的網頁至關重要。

它可確保您的代碼正確無誤,並防止不良的格式和可讀性。

此外,這還可以幫助用戶從多個設備訪問和瀏覽您的網站。

2.警告

用戶提交輸入或操作時,您的網站應顯示錯誤消息。它將使用戶了解該站點上發生的事情和原因。

您還應該在發生錯誤的時間和位置顯示明確的警告。

3.輸入校正

它包括自動建議和處理同義詞。它可以防止錯誤並收集輸入。廣泛的輸入理解可提高可用性和用戶體驗。

種容錯可用性策略

  • 用戶可以直觀地使用您的網站。
  • 您的自定義404頁面顯示瞭如何查找缺失的頁面以及指向搜索的鏈接。
  • 用戶完成任務後,您的網站將提供清晰的反饋。
  • 對於用戶的輸入或操作,有有用且即時的反饋。
  • FAQ或幫助提供了分步說明,以幫助用戶完成任務。
  • 在正確的時間和正確的時間輕鬆獲得幫助。
  • 確認頁面清晰。
  • 在使用新格式更改頁面之前,需要用戶確認。
  • 很明顯,何時何地發生錯誤。
  • 錯誤消息包含有關下一步操作的明確說明。
  • 您的網站會在響應需要時間時通知用戶。
  • 頁面加載盡快。
  • 當您給出指示時,頁面會告訴用戶該做什麼而不是避免該做什麼。
  • 幫助是明確而直接的,沒有專業術語和流行語。
  • 沒有快速超時要求用戶寫下信息。
  • 可以使用適當的選擇方法來代替鍵入。
  • 在可點擊的項目之間有一個空格,以避免多次或不正確的點擊。
  • 您的網站使用自動建議功能,並防止用戶出錯。
  • 如果需要,該站點提供有關錯誤消息的更多詳細信息。
  • 撤消和重做操作很容易。

請記住,對網站速度的感知是基於加載時間,等待時間和加載行為的。

使用Google PageSpeed Insights之類的工具來確保獲得最佳的加載速度。

現在,我希望收到您的來信!

在這裡,您有155種可行的網站可用性策略。

希望本指南對您有所幫助。

現在,我希望收到您的來信!

您將應用這篇文章中的哪些Web可用性指南?

您要開始檢查內容的可讀性嗎?

發表評論,讓我知道您的想法!

Google 評論

Related Posts

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

− 3 = 1