這10個關(guān)鍵點 讓你的搜索結(jié)果頁看起來足夠?qū)I(yè)

編者按:Nick Babich 的UI/UX系列文章是目前最實在的設(shè)計系列文章,設(shè)計規(guī)則、最佳實踐和實戰(zhàn)案例三者兼顧,頗為值得學(xué)習(xí)。今天的文章聊的是搜索結(jié)果頁的設(shè)計,和上一篇《設(shè)計一個完美的搜索框,你需要注意這9個要素》結(jié)合起來看,風味更佳~
搜索就像用戶和系統(tǒng)之間的對話:用戶將他們的信息需求提交上來查詢,系統(tǒng)針對提交的信息進行檢索,再從界面上給用戶以反饋,呈現(xiàn)為一組結(jié)果。所以,搜索結(jié)果頁是搜索的最重要的組成部分之一,它滿足了用戶對于特定信息的需求。
這篇文章中,我將搜索結(jié)果頁的10項最佳實踐列舉出來,它們應(yīng)當能夠有效的幫你提升整個用戶體驗。
1、點擊搜索按鈕之后,不要清除用戶的查詢內(nèi)容
對于用戶的查詢內(nèi)容,在搜索結(jié)果頁當中應(yīng)當忠實地、完整地呈現(xiàn)出來。這不僅包含目前的搜索,而且應(yīng)當涵蓋之前的搜索內(nèi)容。對于許多信息獲取的過程而言,歷史和當前查詢內(nèi)容都是關(guān)鍵信息,如果用戶當前的搜索關(guān)鍵詞找不到想要的結(jié)果的話,他們會稍加調(diào)整,并繼續(xù)搜索。為了方便用戶進行查詢,最好在搜索框中保留初始的關(guān)鍵詞,便于查看也便于調(diào)整進行下一次查詢。
2、提供準確的和相關(guān)的搜索結(jié)果
搜索結(jié)果的第一頁是至關(guān)重要的。必須承認,搜索結(jié)果頁給用戶提供的信息與體驗是整個搜索體驗的關(guān)鍵環(huán)節(jié),搜索引擎的轉(zhuǎn)化率好壞與否,與之息息相關(guān)。通常只需要通過一兩次搜索,用戶就能通過搜索結(jié)果頁,快速地對整個搜索引擎的素質(zhì)進行判斷。
準確地將搜索結(jié)果反饋給用戶是構(gòu)建用戶信任的基礎(chǔ)。所以,搜索引擎需要確定結(jié)果的優(yōu)先級,并且將匹配度最高的結(jié)果呈現(xiàn)在結(jié)果頁上。
3、使用有效的自動建議
無效的自動建議讓整個搜索體驗降低,而精準的自動建議會讓整個體驗好上許多,它會根據(jù)用戶用戶的輸入內(nèi)容(詞匯詞根和后臺數(shù)據(jù))為用戶提供有用和精準的輸入內(nèi)容建議,這有助于幫助用戶提高搜索過程的精準度,提升整個搜索體驗。
4、內(nèi)容糾錯
輸入錯誤絕對是最常見的錯誤,如果用戶錯誤地輸入某個關(guān)鍵詞,而你的檢測到了,并且針對錯誤提供更正之后的結(jié)果,這樣就成功的規(guī)避了因為錯誤的關(guān)鍵詞所導(dǎo)致的不良后果,用戶也不用再次進行搜索了。
蘋果的0條目的搜索頁面并不支持搜索結(jié)果自動更正
相反,Asos 在這方面就做的很好,當輸入錯誤發(fā)生的時候,他們會盡量以無侵略性的方式來幫助客戶,比如“您的初始搜索為Overcoatt,我們也為您搜索了Overcoats的相關(guān)結(jié)果”。
5、顯示搜索結(jié)果的數(shù)量
顯示搜索結(jié)果的數(shù)量能夠讓用戶更清楚他們需要在瀏覽結(jié)果這件事上花費的時間。
而搜索結(jié)果同時還能幫助用戶針對下一次搜索,作出跟明確的調(diào)整和選擇。
6、保留最近的用戶查詢
即使用戶熟知搜索引擎的全部功能,也需要借助大腦記憶來挑選關(guān)鍵詞,進行搜索。想要找出有意義的、可用的搜索關(guān)鍵詞搭配,用戶需要結(jié)合他們的搜索方向,最近的查詢,聯(lián)想相關(guān)的屬性和關(guān)鍵詞,最終促成一次成功的搜索。在設(shè)計整個搜索體驗的過程中,你應(yīng)該始終記住一點:
尊重用戶的努力。
你的網(wǎng)站應(yīng)當存儲所有最近的搜索,以便在用戶進行下一次搜索的時候,提供這些數(shù)據(jù)。
最近的搜索幫助用戶節(jié)省了在相同內(nèi)容搜索上所耗費的時間和精力。
小貼士:盡量一次展示不超過10個條目,這樣不會讓用戶覺得信息過載。
7、選擇合適的頁面布局
不同的內(nèi)容其實需要不同的頁面布局來支撐的,而我們最常見的兩種布局,列表布局和柵格布局,應(yīng)該能夠滿足絕大多數(shù)的需求。對于布局,我們的經(jīng)驗以一言以蔽之就是:
細節(jié)用列表展現(xiàn),圖片靠柵格支撐。
讓我們在Cotext 的產(chǎn)品頁面中驗證一下這一經(jīng)驗。產(chǎn)品的細節(jié)展現(xiàn)是非常重要的時刻,對于電子產(chǎn)品而言,需要呈現(xiàn)的配置信息非常的多,所以,列表視圖是非常合理的。
而對于相對產(chǎn)品信息更少的產(chǎn)品而言,柵格式的布局則是更好的選擇。想服裝這樣的產(chǎn)品,少有需要借助文本式的產(chǎn)品信息來呈現(xiàn)其特征的,更多還是依靠圖片和視覺設(shè)計,所以這類產(chǎn)品需要柵格式的布局,而不是冗長的內(nèi)容信息。
小貼士:
·允許用戶選擇列表視圖和柵格視圖,讓用戶選擇他們更喜歡的方式來查看內(nèi)容。
·在設(shè)計柵格布局的時候,確保圖片的尺寸合理,大到足以看清其中細節(jié),而又不會太大,讓用戶一次盡量看到更多的條目。
8、展示搜索過程
理想狀況下,用戶點擊搜索按鍵之后,搜索結(jié)果會立刻顯現(xiàn)出來。但是實際情況是,它通常是需要有一個過程的。通過進度條和動效讓用戶明白他們大概需要等多久,或者讓等待的過程更加有趣。
小貼士:動效可以有效的分散用戶等待過程中的無聊感,讓用戶實際等待的體驗更好。
9、提供排序和過濾的選項
當用戶看到的搜索結(jié)果過多,或者相關(guān)度較低的時候,會對搜索結(jié)果非常茫然。而排序和過濾的功能則能夠很好的緩解這一情況。
過濾和排序能夠幫用戶調(diào)整和縮小搜索結(jié)果,大幅度降低用戶手工翻頁篩選的工作量。
小貼士:
·最重要的一點是不要讓用戶有太多的選擇,如果搜索本身需要大量的篩選的話,那么默認盡量折疊或者隱藏一些相對不那么重要的結(jié)果。
·不要隱藏排序功能。
·當用戶篩選到了一個相對狹窄的搜索范圍的時候,在結(jié)果頁面的頂部對此范圍進行標注和說明。
10、不要告訴用戶“沒有結(jié)果”
什么都沒搜到會讓用戶感到非常沮喪的,尤其是當用戶進行了好幾次搜索之后,依然沒有結(jié)果。你應(yīng)該盡量避免用戶陷入死胡同,當用戶沒有搜到他們想要的內(nèi)容之時,應(yīng)當為他們提供有價值的替代品。
結(jié)語
搜索引擎為一個網(wǎng)站所提供的價值是顯而易見的,而可用性良好,體驗平滑舒適的搜索結(jié)果頁則能夠讓用戶快速地判斷出網(wǎng)站和搜索引擎的重要價值。
一個優(yōu)秀的搜索引擎應(yīng)當在結(jié)果頁當中,為用戶提供有效、有用、有價值的搜索結(jié)果。
相關(guān)文章
- Cloudfront 是 Amazon 提供的 CDN 服務(wù),有每月免費 1T 的流量,該流量不可累計,個人小站的話,這個 CDN 是足夠用的了,而且主要是國內(nèi)訪問的速度還不錯,但是需要注意不要2023-10-19
免費為你的網(wǎng)站加速,全球訪問加速還可以防御ddos攻擊的cloudflare
CDN加速通俗來講就是把網(wǎng)站在全國各地的服務(wù)器上復(fù)制一份(即鏡像服務(wù)器),用戶在訪問的時候,路由自動分配到最近的服務(wù)器,提升訪問速度,大家在訪問軟件下載站的時候,經(jīng)2023-10-09什么是AMP(加速移動頁面)Web開發(fā)?AMP的好處以及它與響應(yīng)式網(wǎng)頁設(shè)計的
AMP技術(shù)是一項用于加速移動Web頁面加載速度的技術(shù),它通過限制頁面的HTML、CSS和JavaScript的使用,從而提高頁面加載速度和性能,下面我們將從以下幾個方面對AMP技術(shù)進行拓展2023-10-09谷歌站長(Search Console)工具的注冊安裝及功能介紹
Google Search Console 是一項由 Google 提供的免費服務(wù),可幫助您監(jiān)控和維護您的網(wǎng)站在 Google 搜索結(jié)果中的展示情況以及排查問題,Search Console 可幫助您了解并改善 Go2023-05-13打開網(wǎng)站出現(xiàn)Internal Server Error的原因和解決方法
這篇文章主要介紹了打開網(wǎng)站出現(xiàn)Internal Server Error的原因和解決方法的相關(guān)資料,需要的朋友可以參考下,解決方法:登陸FTP或文件管理器,檢查站點目錄文件權(quán)限設(shè)置,將2022-01-08inxy:超低價“綜合型”國外CDN提供商,專業(yè)POP節(jié)點覆蓋亞洲\歐洲\美洲
inxy,這個2005年成立運作至今的商家不但提供11個機房的VPS、24個機房獨立服務(wù)器,更重要的核心業(yè)務(wù)還有CDN,之所以要來推薦inxy的CDN是因為在性價比上面有著獨到的優(yōu)勢2020-11-16分享盤點10個可免費使用的網(wǎng)站CDN加速服務(wù)
大部分服務(wù)商(如阿里云,網(wǎng)易蜂巢,京東云等)的CDN服務(wù)是按使用量收費的,也有一些服務(wù)商提供免費的CDN服務(wù),這篇文章主要介紹了分享盤點10個可免費使用的網(wǎng)站CDN加速服2020-08-17INXY:運作全球26個國家和地區(qū)的 獨立服務(wù)器、VPS、CDN業(yè)務(wù),價格超便
INXY主要運作獨立服務(wù)器、VPS、CDN、DNS四大類業(yè)務(wù)。inxy有自己的機房,也賣全球其他國家和地區(qū)的相關(guān)業(yè)務(wù),可以說是一個超大型的reseller2019-09-29- 這篇文章主要介紹了新手干貨之網(wǎng)站建設(shè)中常見的一些問題,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-09-18
給我三分鐘還你一個不買視頻會員的理由,手把手教搭建電影網(wǎng)站
本篇文章主要介紹了手把手教搭建電影網(wǎng)站,今天我們就來搭建一個VIP電影網(wǎng)站,本文主旨在于,從基礎(chǔ)的搭建一個簡單的解析網(wǎng)站來引入一些思路,手把手什么的最貼心了。2019-08-22