SEO網(wǎng)站優(yōu)化用戶體驗的設計參考點

　　有哪些適合應用在SEO網(wǎng)站設計的技巧?用戶體驗在SEO方面也是占據(jù)一部分內容的，如果用戶對你的網(wǎng)站不滿意，那么，你的網(wǎng)站也無法得到好的效果。下面看看哪些設計技巧我們可以參考。

　　一、交互設計

　　01、重復的動作或頻繁的活動讓人感到輕松

　　其重要性：相同輸出的重復動作(例如，用相同的信息填充不同的表單)是一項艱巨的任務，不能幫助用戶更快或更好地實現(xiàn)目標。用戶可能也會嘗試找到一種方法：例如，尋找可以幫助他/她更快/更好的競爭對手。

　　如何測試：

　　您應該首先分析您所有的產(chǎn)品流程并觀察用戶的行為。您需要確保，如果存在重復的操作，則有一種方法可以幫助它們：例如，可以使用以前輸入的信息。

　　02、用戶可以很容易地從錯誤中恢復

　　其重要性：

　　通常用戶會做一些意想不到的意外動作，并讓他們返回去嘗試，這意味著他們不會感到沮喪，并且能夠很容易地恢復并繼續(xù)前進。

　　如何測試：

　　首先，要確保你的導航系統(tǒng)允許返回，并且可以取消操作。然后，在進行可用性測試時，創(chuàng)建用戶最可能執(zhí)行錯誤操作的場景，并檢查是否可以輕松恢復。

　　03、用戶根據(jù)他們的專業(yè)水平得到充分的支持

　　其重要性：

　　確保你產(chǎn)品中的新手用戶有流暢的學習經(jīng)驗是很重要的。然而，一旦他們已經(jīng)熟悉了產(chǎn)品，那就應該給幫助他/她更快地通過流動的工具。兩種方案都提高了可用性和保留性。例如，專家用戶的快捷方式、對新手用戶的工具提示等。

　　如何測試：

　　首先，檢查你是否有兩個受眾的工具。然后，與新手和專家用戶進行可用性測試，看看這些工具是否被正確使用。

　　04、訪問幫助并不妨礙用戶的進步

　　其重要性：

　　當用戶被困在產(chǎn)品的某一部分時，他們會尋求幫助。在線或離線幫助是很重要的，允許用戶在他們離開的地方恢復工作。

　　如何測試：

　　創(chuàng)建測試場景，用戶將請求幫助，并查看他們的工作流程和進度是否被中斷。

　　二、視覺設計

　　05、可視化層次結構指導用戶執(zhí)行所需的操作

　　其重要性：

　　用戶依賴于產(chǎn)品的層次結構和線索來知道該做什么，該去哪里 —— 理解這一點很重要，并正確地指導他們使用這個層次結構。

　　如何測試：

　　了解你的產(chǎn)品工作流程，以及它的關鍵動作是否被視覺層次結構所激勵。

　　06、僅顏色本身不用于傳達層次、內容或功能

　　其重要性：

　　擁有一個可訪問的產(chǎn)品不是一個plus —— 這是必須的。對于視覺障礙的人，比如色盲，僅僅依靠顏色來傳達等級、內容或功能意味著他們將無法使用你的產(chǎn)品，并且將成為被排除的人群。

　　如何測試：

　　會讓你在網(wǎng)頁的頂部放一個顏色過濾器，并測試不同種類的色盲。你也可以在圖像編輯器上對你的產(chǎn)品進行屏幕截圖，然后將其轉換成灰度，看看你是否能輕松分辨出顏色。

　　07、不超過三種原色

　　其重要性：

　　這不是一個固定的規(guī)則 —— 有時，對于特定的情況，可以使用超過三種主要顏色。然而，要記住，組合三種顏色已經(jīng)很困難了，所以大多數(shù)情況下都應該避免。

　　如何測試：

　　確保你在設計產(chǎn)品時使用的調色板沒有超過三種顏色。

　　08、在視覺層次上的項目是最重要的

　　其重要性：

　　視覺層次結構允許用戶快速掃描信息，根據(jù)他們的即時需求優(yōu)先考慮內容。在視覺層次結構頂部附近的項目必須對業(yè)務最重要，對用戶最重要。

　　如何測試：

　　屏幕捕捉你的數(shù)字產(chǎn)品，然后高斯模糊的屏幕截圖半徑在 5px 左右。在查看結果時，你將立即可視化層次結構，并注意哪些元素脫穎而出。這些對企業(yè)和用戶來說是最重要的嗎?

　　09、主動作與次要動作視覺上截然不同

　　其重要性：

　　有不同的主次操作意味著用戶在與您的產(chǎn)品交互時不會感到困惑，并且不會犯錯誤。例如，“Submit”和“Cancel”必須明顯不同。

　　如何測試：

　　在進行可用性測試時，要注意常見的錯誤，這些錯誤不是來自于用戶的意圖，而是來自于不同的主要和次要的操作。此外，在審查設計時，要確保顏色、大小、位置和其他元素對動作進行區(qū)分。

　　10、表單提交以直觀的方式確認

　　其重要性：

　　必須讓用戶確認是否成功執(zhí)行了操作。例如，在提交表單之后，一個 banner 顏色的明確確認消息將意味著用戶可以轉到下一個任務。

　　如何測試：

　　檢查你的產(chǎn)品的所有區(qū)域，用戶輸入信息。在用戶輸入完成后，觸發(fā)確認該操作是否成功的確認。確保反饋對于最終狀態(tài)非常清楚。

　　11、互動元素不是抽象的

　　其重要性：

　　當使用新產(chǎn)品時，用戶會得到一套基于他/她以前使用其他數(shù)字產(chǎn)品的經(jīng)驗 —— 例如，按鈕應該是什么樣子，以及他們應該如何工作。實現(xiàn)這些期望意味著你不會制造不必要的摩擦。

　　如何測試：

　　首先，檢查你的產(chǎn)品，尋找沒有使用公共模式的區(qū)域。例如，鏈接看起來不像鏈接。

　　12、警告信息是一致的

　　它是什么：

　　警告消息具有相同的視覺樣式，并以相同的方式出現(xiàn)在相同的位置。

　　其重要性：

　　保持一致的警告信息意味著用戶總是能夠理解什么是立即值得注意的。與警報不一致意味著每當一個新的警報出現(xiàn)時，它就意味著額外的精神負荷。

　　如何測試：

　　確保警告消息具有相同的視覺風格，它們的定位相似或相同。

　　13、警告信息在視覺上是不同的

　　其重要性：

　　通過確保警報消息與其他屏幕元素明顯不同，用戶實際上可以注意 / 采取行動。

　　如何測試：

　　在檢查了視覺差異化之后，看看用戶如何對可用性測試中的警告信息做出反應。

　　三、信息架構

　　14、增長空間

　　其重要性：

　　每當出現(xiàn)新功能或內容時，你就不能重新設計產(chǎn)品的導航和信息系統(tǒng)。導航菜單和整體布局需要支持更多的類別 / 主題而不破壞。設計有增長空間意味著主要的設計和開發(fā)工作在界面上很容易擴展。

　　如何測試：

　　詢問所有的利益相關者，在產(chǎn)品中，內容如何隨著時間的推移而增長。你會支持更多的靜態(tài)內容嗎?架構需要支持視頻嗎?

　　15、導航是一致的

　　其重要性：

　　用戶在你的產(chǎn)品中定位和導航的方式直接影響他們是否能夠完成他/她的目標，不管他們的當前頁面是什么。

　　如何測試：

　　檢查你的信息架構文檔，并確保導航在每個頁面都可訪問，并且它不會改變或消失。在進入視覺設計之前，嘗試卡片分類或樹測試，以確保你的信息架構路徑盡可能直觀。

　　四、排版

　　16、使用不超過兩種不同類型的字體族

　　其重要性：

　　這不是一個固定的規(guī)則：有時可能會超過兩個。但一般來說，匹配兩個以上并不是一件容易的事。對于可用性和視覺目的，堅持兩個可以簡化你的排版層次，從而提高你的理解能力。

　　如何測試：

　　只需確保你的設計不超過兩種類型的字體族。你也應該確保你選擇的字體是正確匹配的。

　　17、用于文本內容的字體大小至少為 12px

　　其重要性：

　　同樣，這并不是一個固定的規(guī)則 —— 理論上你可以用更小的尺寸來做非常具體的用途——但一般來說，在 12 px以下的尺寸下，可讀性會大大降低。

　　如何測試：

　　檢查你所有的內容，并確保它們的字體大小至少為 12 個像素。

　　18、不同的字體樣式或組合用來分隔內容和控制

　　其重要性：

　　需要有明確的指標來說明什么是內容，什么是控制 —— 即用戶可以與之交互的內容。這些指標可以是大小、顏色、定位、字體等。

　　字體很重要：

　　使用不同的風格或字體組合，意味著用戶不會感到困惑，很容易識別出哪些是可以交互的。

　　如何測試：

　　識別產(chǎn)品中的所有控件，并確保它們從內容中脫穎而出。在運行可用性測試時，請注意用戶在與控件交互時是否存在困難。

　　19、用大寫字母表示標簽、標題或首字母縮略詞

　　其重要性：

　　限制使用大寫字母可以促進理解 —— 對用戶來說，更不容易理解。它應該專門用于強調或非常受限制的情況 —— 例如，首字母縮略詞。

　　如何測試：

　　運行一個徹底的內容檢查，并確保大寫的單詞僅限于標題、標簽或首字母縮略詞。

　　20、字體大小 / 粗細區(qū)分內容類型

　　其重要性：

　　它嚴重影響可讀性和理解能力。在標題、副標題和段落之間明確區(qū)分，減少了消化內容的精神負擔。它也有視覺上的好處 —— 它看起來和感覺更好。

　　如何測試：

　　當你在檢查你的產(chǎn)品的內容時，確保標題，副標題和段落使用不同的字體大小和重量。

　　五、用戶界面

　　21、多步工作流程的進度指示

　　其重要性：

　　特別對于多步驟的工作流程，用戶很容易感到不知所措或不知道它要多久才能完成。一個進度指標幫助他/她找到他/她的位置，但更重要的是它創(chuàng)造了成就感并降低了跳出率。

　　如何測試：

　　檢查你產(chǎn)品內的所有流量，在那里有不同的步驟來完成某件事，然后確保通過一個指示器來顯示進度。

　　22、接近和對齊

　　其重要性：

　　用戶有一種傾向于群體 —— 功能或上下文 —— 它們彼此接近。導航欄就是一個很好的例子。遵循此模式并將連接的項分組，意味著用戶立即了解你的接口。

　　如何測試：

　　查找功能上類似的項，并檢查它們(何時可能)組合在一起。

　　23、前景元素(如內容和控件)很容易與背景區(qū)分開來

　　其重要性：

　　對視覺障礙的人很重要。它還提高了用戶的學習曲線和理解能力。清晰的區(qū)分促進了導航，給按鈕帶來了更多的關注，增加了一般的可用性。

　　如何測試：

　　屏幕截圖你的產(chǎn)品和高斯模糊，屏幕截圖半徑在 3px 到 5px。當看到結果時，你能很容易地分辨出前景和背景中是什么嗎?

　　當然了，并不是說每個網(wǎng)站都需要將沒一點落實好，我們需要根據(jù)自己的網(wǎng)站來進行針對性優(yōu)化，這樣才合適。