萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> 交互設計 >> 下拉框和搜索輸入框的二三事

下拉框和搜索輸入框的二三事

下拉框和搜索輸入框的二三事 三聯教程

  下拉框和搜索輸入框組合是頁面常用的標配之一,是串起獨立頁面的一種紐帶。下拉框和搜索輸入框的組合較多出現在行業性比較強的網站或是各種後台系統,而且會在其頁面的的重要位置顯示,讓用戶能很容易找到查找產品的入口。撇開其行業內容不談,下拉框和搜索輸入框的組合順序和其每個獨立的下拉框的內部順序對於是否能快速精確的定位用戶想要查找的內容起著至關重要的作用,同時,也將左右用戶的操作次數和思考次數。

  就簡單的獨立下拉框而言,其選項順序不同,對於用戶的眼球運動和鼠標移動以及點擊次數也會有較大的影響。我們來看圖A-一個簡單的例子:

下拉框和搜索輸入框的二三事~

  圖 A

  此為公司廣告後台中一個關於廣告發布的部分表單,“部門”的選擇有“研究中心、家裝頻道、廣告中心”等等14個選項,設計師在選擇時,如要選擇“廣告中心”,則要點擊下拉框,然後浏覽到第9條再點擊選擇。

  但是通過統計,80%以上的工作單都是由廣告中心發出,如果我們將“廣告中心”設為缺省選項,其他內容順序不變,那麼在這個下拉框的操作中,設計師將減少80%的操作量,同時也會減少更多的操作失誤(下拉選項太多,失誤率也高)。

  對於單個下拉框的用戶體驗優化相對比較簡單,多個下拉框+搜索輸入框的組合明顯增加了優化的復雜程度。如果多個下拉框的前後選項順序不同,可能造成用戶的下拉點擊操作次數和思考次數就不盡相同。同時,搜索輸入框和下拉框的位置也因各種情況而異。我們來看圖B,幾大門戶搜索新房的例子:

下拉框和搜索輸入框的二三事~

  圖 B

  各個下拉框的內容主要有“區屬+物業類型+均價”。 三者的順序基本是由用戶對於新房的搜索心理以及其內部的部分邏輯關系所決定的。

  三個門戶網站都將“區屬”放在第一個,這是符合用戶搜索新房的心理的,買新房首要條件是地段,同時地段決定了均價的大概區間。兩個門戶網站將“物業類型”放在其次,“物業類型”這個術語比較繞,實際上就是住宅寫字樓商鋪等分類。最後是“價格”,已經由區屬決定了其大致區間,個人認為放在最後是合理的。個人有一疑問:將“物業類型”與“區屬”是否可以調換位置?麻煩大家能給出專業意見~

  同時,三個門戶中下拉框和搜索輸入框的先後順序有兩種,一種將搜索輸入框放在下拉框之後,另一種將搜索輸入框在下拉框之前。下拉框一般是網站策劃定位各種區間來引導用戶搜索產品,而搜索輸入框則是讓用戶自主進行產品關鍵字輸入進行搜索。是先讓用戶主動還是先引導用戶?這是網站策劃必須要考慮的的問題,這是要根據用戶對於產品的熟悉程度和自身對於產品的需求所決定。

  所以,在策劃下拉框和搜索輸入框組合模塊時,對於用戶的調研是必不可少的,這樣,才能掌握用戶的需求,進行用戶需求的篩選、分析、總結,以最佳的模式來組合下拉框和搜索輸入框模塊。

copyright © 萬盛學電腦網 all rights reserved