2022-05-26 分類: 網站建設
搜索框是我們網頁設計中用到的UI控件之一,基本大型一些的網站和app中會有搜索框。大多數人認為搜索框不需要設計,因為它似乎就是由兩個最簡單的元素構成的。在以內容為導向的網站中,搜索框的重要性會相對更明顯,用戶需要快速又無痛地找到他們想要的內容。而對于設計相對負責的網站而言,這個需求尤其明顯。搜索框的可用性設計,是整個設計的關鍵。
今天的文章與創新互聯來聊聊搜索框設計,如何讓用戶盡量節省時間,搜到他們想要的內容。
時至今日,搜索的概念和放大鏡圖標之間的關系已經深入人心,根深蒂固了。在日常最常用、最易于識別的幾個圖標當中,放大鏡所帶代表的搜索圖標就是其中之一。
即使在沒有文本標簽標識的情況下,用戶也能輕松地識別圖標的含義。
小貼士:使用最簡略直觀的放大鏡圖標,細節越少,越容易識別。
如果搜索是你的網站或者APP的重要功能的話,你應當讓搜索框足夠顯眼,這樣的能設計讓用戶最快發現它的存在。
左邊:搜索功能隱藏在圖標之后
顯示完整的文本輸入框是很重要的,隱藏在按鈕背后的輸入框會讓用戶覺得不是那么明顯,不容易被快速發現。需要點擊之后用戶才能看到。
按鈕的存在讓用戶能夠明白搜索的觸發方式——也就是說通過觸發按鈕來完成這一操作。
小貼士:
你應該為用戶擁有在每個頁面都能立刻進行搜索的權限,如果你的用戶在特定的頁面找不到他們想要的內容,可以立刻通過搜索獲取內容,無論他在網站的哪個地方。
在你設計搜索框的時候,請盡量讓它看起來就是一個搜索框,并且簡單易用。可用性研究表明,默認沒有顯示高級選項的搜索框看起來更加友好,所以,通常情況下給用戶提供的搜索框最好不要提供進階的搜索選項。
當用戶想要搜索內容的時候還需要花費精力來尋找搜索框,這就非常尷尬了。這意味著搜索框本身就不容易被察覺。
下面這個圖表來自 A. Dawn Shaikh 和 Keisi Lenz 的一項研究,它展示出了 142 名被調查者對于網站的搜索框的預期的位置。這項研究表明,網站的左上角和右上角是用戶所期待的搜索框的位置,用戶在使用F型掃視法查看內容的時候,可以輕松找到搜索框。
這份研究還表明,右上角的區域是用戶搜尋輸入框的選區域。
因此,將輸入框置于頂部靠右或者頂部居中的位置,用戶會主動在這個地方尋找搜索框。
小貼士:
輸入框太小是最常見的搜索框設計錯素,雖然用戶可以輸入比輸入框更長的內容,但是可見的部分往往無法完全可見,這種設計的可用性并不強。這樣的輸入框可能因為可視范圍的限制,促使用戶使用短的、不精確的查詢方式,因為更長的內容并不適合閱讀。如果輸入框能夠符合用戶的常見輸入內容的尺寸來進行匹配,那么它的可用性會更強。
根據經驗,輸入框能夠承載的好字符數量為 27 個,百分之 90 的搜索內容都在這個長度以內。
小貼士:建議考慮使用能根據輸入長度增長而能變長的輸入框,這不僅節省了屏幕空間,而且能夠給予用戶足夠的視覺提示,并快速進入搜索環節。
自動建議機制能夠幫助用戶在輸入的過程中,動態地預測正確的查詢方向。自動建議并不會加快搜索的過程,但是能夠幫助用戶構建正確的搜索關鍵詞/內容。普通用戶在第一次搜索結果不理想的情況下,很少會繼續進行嘗試,而自動建議運作順利的情況下,將會幫助用戶更好的搜索。
谷歌搜索在這方面有著豐富的經驗,自 2008 年開始,谷歌開始記錄用戶的搜索記錄,并且通過這種方式節省時間,優化結果,創造更為優秀的體驗。
小貼士
最好是在輸入框中包含示例,這樣可以向用戶給予建議。如果用戶可以輸入多個關鍵詞搜索,那么可以像下面的IMDB的網站一樣給予建議。HTML5 可以輕松的實現在輸入框內加入文本占位符。
小貼士:建議的內容不宜過多,這樣對于用戶會有認知負荷。
搜索是UI設計中極為常見的一個組件,看似簡單的輸入框背后包含了大量的知識以及設計的要素。即使是微小的更改也會對整個用戶體驗帶來巨大的改變,謹慎。
新聞標題:網頁設計中搜索框設計要素
網站URL:http://m.newbst.com/news43/159143.html
成都網站建設公司_創新互聯,為您提供Google、網站策劃、定制網站、全網營銷推廣、靜態網站、自適應網站
聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯
猜你還喜歡下面的內容