聊聊UI界面中搜索入口的設(shè)計

2 評論 14112 瀏覽 67 收藏 8 分鐘
🔗 B端产品经理需要更多地关注客户的商业需求、痛点、预算、决策流程等,而C端产品经理需要更多地关注用户的个人需求

搜索幾乎是現(xiàn)在所有網(wǎng)站,APP甚至操作系統(tǒng)的標(biāo)配,不論是電商還是論壇等等。它是一個站內(nèi)給用戶直接到達(dá)目的地的通道,起到了一個引導(dǎo)用戶走向的重要作用。在不同的系統(tǒng),不同用途的網(wǎng)站上搜索呈現(xiàn)的方式都有所不同。

用搜索的原因

使用搜索時,用戶可以自己掌握瀏覽該網(wǎng)站的路徑,從哪一頁進(jìn)入到哪一頁,自己控制如何使用這個網(wǎng)站。沒有必要根據(jù)網(wǎng)站的頁面設(shè)計來決定瀏覽頁面的先后順序。這也是為什么很多網(wǎng)站用戶一進(jìn)入就直接使用搜索功能的原因。

另一個原因是,當(dāng)用戶瀏覽網(wǎng)頁到一半不知道接下去該干什么的時候,往往會使用搜索直接去找到自己想找的內(nèi)容。

不使用搜索的原因

相對于搜索,用戶根據(jù)類目,或者從功能模塊的入口進(jìn)入各個頁面其實是跟著頁面的導(dǎo)向進(jìn)行的下一步操作。

網(wǎng)頁的設(shè)計者會根據(jù)網(wǎng)站的不同需求從而設(shè)計不同的頁面布局。根據(jù)這些頁面布局進(jìn)而引導(dǎo)用戶一步一步的達(dá)成網(wǎng)站設(shè)計者的目的。這些目的可能就是買一件商品,參加一個活動等等。用戶可以根據(jù)設(shè)計者創(chuàng)建的引導(dǎo)流程一步步的查看網(wǎng)站內(nèi)容。

不同用戶群

根據(jù)搜索是否主動搜索這點來分,可以把用戶分成3種類型:任務(wù)型,鏈接型,混合型。

任務(wù)型

任務(wù)型的用戶就是前面說的直接使用搜索功能的用戶。大部分用戶都是任務(wù)型的用戶。這些用戶往往是帶著某種目的來,例如已經(jīng)知道了自己要購買的商品,就直接搜索商品名稱進(jìn)入搜索列表頁。

使用搜索的場景可以再細(xì)化一點,通常用戶已經(jīng)想好了具體要搜索的關(guān)鍵詞,同時他使用的網(wǎng)站可以搜索到非常大量的搜索結(jié)果時,用戶會使用搜索功能。

例如,在手機(jī)里找一個聯(lián)系人的號碼,如果手機(jī)里只存了10個號碼,那很可能就直接打開聯(lián)系人的APP,從這10個人的姓名中找到一個號碼;另一種情況,如果手機(jī)里存了500個號碼,這時候要逐個瀏覽來找某個聯(lián)系人效率就會相對低,這是大家會做的是在聯(lián)系人里找到搜索框,輸入要找的人的姓名或者拼音,定位到要找的人,最后找到電話號碼。

鏈接型

鏈接型的用戶打開一個頁面之后會找各個功能的鏈接(首頁廣告,功能入口,鏈接),即使他們已經(jīng)想好了要找某些信息,他們還是會通過點擊入口而不是輸入關(guān)鍵字來找頁面。通常這類用戶知道自己要買麥片,但是沒有考慮好什么品牌的麥片,哪個國家的麥片,那這個時候,他們會做的是找到網(wǎng)站的類目入口,在類目里找到“麥片”的分類,點擊進(jìn)入,而不是直接搜索關(guān)鍵詞“麥片”。

鏈接型的用戶只有當(dāng)他們在頁面上找不到自己需要的相關(guān)信息鏈接時,才會選擇使用搜索框。

混合型

混合型的用戶行為其實以上兩種都有,有時候會直接搜索關(guān)鍵詞,有時候會在頁面上尋找鏈接,沒有使用以上哪種偏好的傾向性,只是用當(dāng)下他們覺得最好的方式。

搜索入口的設(shè)計

不同功能,不同需求的界面會影響到搜索框入口的設(shè)計。

iOS系統(tǒng)的搜索框只有在用戶下拉頁面時才會出現(xiàn)。

對于一個系統(tǒng)界面來說,給用戶提供各個APP,功能入口是一個系統(tǒng)的重要功能,所以對于搜索,系統(tǒng)做了隱藏處理。

uisdc-201611-17

YouTube的搜索框點搜索icon出現(xiàn)。

YouTube有針對用戶的喜好在首頁提供不同的視頻,是一個對每個用戶個性化的訂制內(nèi)容, YouTube希望用戶瀏覽查看他們對于用戶推薦的視頻。所以他們沒有把搜索框直接展開而是只顯示一個icon,點擊之后出現(xiàn)單獨的搜索頁。

uisdc-201611-18

電商類APP搜索框一般直接露出在首頁的最頂端。

前面有說到在電商網(wǎng)站中,當(dāng)用戶不知道接下去該做什么的時候,會使用搜索操作來直接到達(dá)自己想要到達(dá)的頁面。所以,通常電商網(wǎng)站中,搜索往往是固定在頂部Global上的,以便用戶無論在哪一頁都能找到。

uisdc-201611-19

搜索引擎像Google的首頁則只有搜索框。

類似于Google,百度,Bing,搜索是他們的主營業(yè)務(wù),自然希望用戶所要查看的大部分頁面都是通過搜索來獲得。所以把搜索框做為用戶的唯一使用路徑放在首頁,不論是APP還是網(wǎng)頁。

uisdc-201611-110

這4個例子里對用戶對搜索的需求依次增強,所以搜索在頁面上的表現(xiàn)形式也依次增強。

作為一個用戶大量使用的工具:搜索,它的位置,呈現(xiàn)形式直接關(guān)系到制作者對產(chǎn)品的預(yù)期,也直接關(guān)系到用戶會用什么形式使用當(dāng)前的界面。有的用戶瀏覽界面知道自己要找什么,有的用戶是來頁面上逛逛的,針對不同用戶,不同的搜索設(shè)計方案可以幫助設(shè)計者達(dá)到設(shè)計目的,也能幫助用戶更好的使用體驗。

以上是對搜索表現(xiàn)形式的一些基本見解,謝謝。

 

本文由 @點融設(shè)計中心DDC 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉(zhuǎn)載。

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 有些啟發(fā):對用戶進(jìn)行分層,然后對不同層級的用戶設(shè)計不同的搜索使用路徑

    來自北京 回復(fù)
  2. 基本是科普式的說了下,沒有深入講,依然感謝。

    來自廣東 回復(fù)
专题
16433人已学习13篇文章
本专题的文章分享了基础功能的实现原理和设计理解。
专题
13104人已学习13篇文章
数据可视化需要利用大屏这一工具实现,若想让数据展示变得更加生动,可视化大屏的艺术性设计便不可缺少,而这需要结合许多设计技巧。本专题的文章可视化大屏设计。
专题
34807人已学习13篇文章
有多少用户痛点,你是听回来的,而不是经过深思过后找出来的。
专题
145748人已学习15篇文章
作为产品经理,你多多少少得懂点技术。
专题
29429人已学习16篇文章
系统如何恰当、清晰、及时地传达给用户操作的结果或者操作对象状态的变更?本专题的文章提供了有效的页面操作反馈设计指南。
专题
12920人已学习14篇文章
在项目实际推进过程中,不加控制的需求变更往往给项目带来沉重的负担和无法预料的风险。本专题的文章分享了如何做好需求变更。