Zi 字媒體

編者按：Nick Babich 的UI/UX系列文章是目前最實在的設計系列文章，設計規則、最佳實踐和實戰案例三者兼顧，頗為值得學習。今天的文章聊的是搜索結果頁的設計，和上一篇《設計一個完美的搜索框，你需要注意這9個要素》結合起來看，風味更佳~搜索就像用戶和系統之間的對話：用戶將他們的信息需求提交上來查詢，系統針對提交的信息進行檢索，再從界面上給用戶以反饋，呈現為一組結果。所以，搜索結果頁是搜索的最重要的組成部分之一，它滿足了用戶對於特定信息的需求。這篇文章中，我將搜索結果頁的10項最佳實踐列舉出來，它們應當能夠有效的幫你提升整個用戶體驗。1、點擊搜索按鈕之後，不要清除用戶的查詢內容對於用戶的查詢內容，在搜索結果頁當中應當忠實地、完整地呈現出來。這不僅包含目前的搜索，而且應當涵蓋之前的搜索內容。對於許多信息獲取的過程而言，歷史和當前查詢內容都是關鍵信息，如果用戶當前的搜索關鍵詞找不到想要的結果的話，他們會稍加調整，並繼續搜索。為了方便用戶進行查詢，最好在搜索框中保留初始的關鍵詞，便於查看也便於調整進行下一次查詢。2、提供準確的和相關的搜索結果搜索結果的第一頁是至關重要的。必須承認，搜索結果頁給用戶提供的信息與體驗是整個搜索體驗的關鍵環節，搜索引擎的轉化率好壞與否，與之息息相關。通常只需要通過一兩次搜索，用戶就能通過搜索結果頁，快速地對整個搜索引擎的素質進行判斷。準確地將搜索結果反饋給用戶是構建用戶信任的基礎。所以，搜索引擎需要確定結果的優先順序，並且將匹配度最高的結果呈現在結果頁上。3、使用有效的自動建議無效的自動建議讓整個搜索體驗降低，而精準的自動建議會讓整個體驗好上許多，它會根據用戶用戶的輸入內容（辭彙詞根和後台數據）為用戶提供有用和精準的輸入內容建議，這有助於幫助用戶提高搜索過程的精準度，提升整個搜索體驗。4、內容糾錯輸入錯誤絕對是最常見的錯誤，如果用戶錯誤地輸入某個關鍵詞，而你的檢測到了，並且針對錯誤提供更正之後的結果，這樣就成功的規避了因為錯誤的關鍵詞所導致的不良後果，用戶也不用再次進行搜索了。蘋果的0條目的搜索頁面並不支持搜索結果自動更正相反，Asos 在這方面就做的很好，當輸入錯誤發生的時候，他們會盡量以無侵略性的方式來幫助客戶，比如「您的初始搜索為Overcoatt，我們也為您搜索了Overcoats的相關結果」。5、顯示搜索結果的數量顯示搜索結果的數量能夠讓用戶更清楚他們需要在瀏覽結果這件事上花費的時間。而搜索結果同時還能幫助用戶針對下一次搜索，作出跟明確的調整和選擇。6、保留最近的用戶查詢即使用戶熟知搜索引擎的全部功能，也需要藉助大腦記憶來挑選關鍵詞，進行搜索。想要找出有意義的、可用的搜索關鍵詞搭配，用戶需要結合他們的搜索方向，最近的查詢，聯想相關的屬性和關鍵詞，最終促成一次成功的搜索。在設計整個搜索體驗的過程中，你應該始終記住一點：尊重用戶的努力。你的網站應當存儲所有最近的搜索，以便在用戶進行下一次搜索的時候，提供這些數據。最近的搜索幫助用戶節省了在相同內容搜索上所耗費的時間和精力。小貼士：盡量一次展示不超過10個條目，這樣不會讓用戶覺得信息過載。7、選擇合適的頁面布局不同的內容其實需要不同的頁面布局來支撐的，而我們最常見的兩種布局，列表布局和柵格布局，應該能夠滿足絕大多數的需求。對於布局，我們的經驗以一言以蔽之就是：細節用列表展現，圖片靠柵格支撐。讓我們在Cotext 的產品頁面中驗證一下這一經驗。產品的細節展現是非常重要的時刻，對於電子產品而言，需要呈現的配置信息非常的多，所以，列表視圖是非常合理的。而對於相對產品信息更少的產品而言，柵格式的布局則是更好的選擇。想服裝這樣的產品，少有需要藉助文本式的產品信息來呈現其特徵的，更多還是依靠圖片和視覺設計，所以這類產品需要柵格式的布局，而不是冗長的內容信息。小貼士：·允許用戶選擇列表視圖和柵格視圖，讓用戶選擇他們更喜歡的方式來查看內容。·在設計柵格布局的時候，確保圖片的尺寸合理，大到足以看清其中細節，而又不會太大，讓用戶一次盡量看到更多的條目。8、展示搜索過程理想狀況下，用戶點擊搜索按鍵之後，搜索結果會立刻顯現出來。但是實際情況是，它通常是需要有一個過程的。通過進度條和動效讓用戶明白他們大概需要等多久，或者讓等待的過程更加有趣。小貼士：動效可以有效的分散用戶等待過程中的無聊感，讓用戶實際等待的體驗更好。9、提供排序和過濾的選項當用戶看到的搜索結果過多，或者相關度較低的時候，會對搜索結果非常茫然。而排序和過濾的功能則能夠很好的緩解這一情況。過濾和排序能夠幫用戶調整和縮小搜索結果，大幅度降低用戶手工翻頁篩選的工作量。小貼士：·最重要的一點是不要讓用戶有太多的選擇，如果搜索本身需要大量的篩選的話，那麼默認盡量摺疊或者隱藏一些相對不那麼重要的結果。·不要隱藏排序功能。·當用戶篩選到了一個相對狹窄的搜索範圍的時候，在結果頁面的頂部對此範圍進行標註和說明。10、不要告訴用戶「沒有結果」什麼都沒搜到會讓用戶感到非常沮喪的，尤其是當用戶進行了好幾次搜索之後，依然沒有結果。你應該盡量避免用戶陷入死胡同，當用戶沒有搜到他們想要的內容之時，應當為他們提供有價值的替代品。結語搜索引擎為一個網站所提供的價值是顯而易見的，而可用性良好，體驗平滑舒適的搜索結果頁則能夠讓用戶快速地判斷出網站和搜索引擎的重要價值。一個優秀的搜索引擎應當在結果頁當中，為用戶提供有效、有用、有價值的搜索結果。【這些最佳實踐幫你在UI設計上更上一層樓】