本文全面分析了搜索界面設(shè)計(jì)前需要整理的問(wèn)題，以及進(jìn)行原型設(shè)計(jì)時(shí)應(yīng)該考慮的元素清單，可以作為產(chǎn)品設(shè)計(jì)時(shí)的對(duì)照工具，供大家參考和學(xué)習(xí)。

向用戶提出什么問(wèn)題？

進(jìn)行原型設(shè)計(jì)時(shí)要考慮什么？

設(shè)計(jì)搜索界面的最佳方式是什么？

根據(jù)項(xiàng)目的不同，搜索可能是最復(fù)雜的功能之一。用戶只看到一個(gè)搜索框，而設(shè)計(jì)人員和開(kāi)發(fā)人員卻必須要了解錯(cuò)綜復(fù)雜的系統(tǒng)以及盒子后面的許多工作。

本文整理了在設(shè)計(jì)解決方案之前應(yīng)該回答的問(wèn)題，以及在進(jìn)行原型設(shè)計(jì)時(shí)應(yīng)該考慮的元素清單。

一、觀察并提問(wèn)

設(shè)計(jì)師應(yīng)在研究階段回答8個(gè)問(wèn)題，以了解用戶為什么進(jìn)行搜索以及何時(shí)以及如何形成查詢。

1. 您的用戶的信息需求和意圖是什么？

他們是否搜索到：

• 導(dǎo)航，找到一個(gè)特定的網(wǎng)頁(yè)。
• 查找特定信息（如“布拉格天氣”，“澳大利亞首都”）。
• 查找建議（如“如何設(shè)計(jì)搜索界面”）。
• 查找資源，應(yīng)用程序，文檔。
• 查找事實(shí)和數(shù)據(jù)（如“我們的網(wǎng)站上有多少活躍用戶？”）。
• 收集來(lái)自不同來(lái)源的信息。
• 分析數(shù)據(jù)。

2. 用戶什么時(shí)候點(diǎn)擊搜索？

• 在點(diǎn)擊搜索之前，用戶正在做什么？
• 用戶會(huì)與誰(shuí)交談？
• 在切換到搜索之前，他們?cè)谑褂檬裁磻?yīng)用程序？

3. 用戶如何提出問(wèn)題？

與搜索的互動(dòng)就是對(duì)話，如果您知道用戶如何開(kāi)始對(duì)話，則可以為他們提供正確的答案。

4. 用戶準(zhǔn)確地知道他們?cè)趯ふ沂裁磫幔炕蛘咧皇窃跒g覽？

例如，用戶可能會(huì)研究友誼主題，并尋找任何書(shū)籍或一類(lèi)書(shū)籍；或者正在尋找一本書(shū)。用戶會(huì)期望這兩個(gè)請(qǐng)求會(huì)得到不同的結(jié)果。

5. 用戶期望找到什么？

• 用戶可以描述搜索的期望結(jié)果是什么嗎？
• 用戶還能用什么方法找到此信息？

6. 下一步是什么？

• 用戶如何處理結(jié)果？
• 如果找不到要尋找的東西，用戶會(huì)怎么做？
• 搜索如何適應(yīng)用戶的工作流程？

7. 用戶操作中是否有模式？

用戶行為模式描述了用戶與搜索的交互方式，期望的結(jié)果以及下一步的步驟。在重新設(shè)計(jì)現(xiàn)有接口時(shí)，模式尤其重要。

在《搜索模式》和《搜索用戶界面》兩本書(shū)中，作者描述了以下常見(jiàn)的搜索模式和模型：

退出模式：用戶鍵入查詢>查看結(jié)果>退出。

縮窄模式：用戶鍵入查詢>查看結(jié)果>縮小范圍。

最佳優(yōu)先模式：用戶鍵入查詢>查看結(jié)果>打開(kāi)第一個(gè)鏈接。

珍珠成長(zhǎng)模式：用戶鍵入查詢>打開(kāi)結(jié)果之一>打開(kāi)文檔內(nèi)部的相關(guān)鏈接，或使用文檔中的術(shù)語(yǔ)進(jìn)行查詢。

8. 他們使用什么應(yīng)用程序？

如果您的產(chǎn)品是整個(gè)工作流程的一部分，那么其他工具可能會(huì)影響用戶習(xí)慣和對(duì)用戶體驗(yàn)的期望。

了解更多關(guān)于他們?nèi)绾卧谶@些工具中與搜索交互，以及什么方式最適合他們。

向您的用戶詢問(wèn)他們的工具，以了解他們?nèi)绾闻c搜索互動(dòng)。

二、清單：考慮到搜索的每個(gè)部分

搜索的內(nèi)容比我們看到的更多。使用此清單有助于快速進(jìn)行原型設(shè)計(jì)，并且不會(huì)讓您有所遺忘。

聲明：此列表僅包含交互元素，未考慮算法、搜索行為、速度或結(jié)果質(zhì)量，僅考慮桌面搜索界面。移動(dòng)搜索在許多方面都不同，可能需要專(zhuān)門(mén)的文章進(jìn)行論述。

1. 搜索結(jié)果頁(yè)面

1）結(jié)果類(lèi)型

視頻，活動(dòng)

音頻

地點(diǎn)

圖表

您的網(wǎng)站上提供哪些類(lèi)型的信息？哪些類(lèi)型是可以搜索的？如何更好地在結(jié)果頁(yè)上顯示不同的類(lèi)型？

2）結(jié)果可視化

① 表格或列表

Paper.dropbox.com

② 卡片

Pinterest.com

③ 可變的顯示視圖

Bookmate.com

④ 分頁(yè)導(dǎo)航

根據(jù)信息架構(gòu)將搜索結(jié)果分為邏輯組，使瀏覽體驗(yàn)更加舒適。

“毫無(wú)疑問(wèn)，搜索導(dǎo)航是過(guò)去十年中最重要的搜索創(chuàng)新?！薄狫effery Callender，Peter Morville

Spotify

3）一屏顯示的項(xiàng)目數(shù)

用戶一次需要查看多少個(gè)結(jié)果？我們能否通過(guò)提供其他視圖和排序讓他們舒適地查看結(jié)果？

① 視圖設(shè)置

Ebay.com

② 排序

Ikea.com

③ 分頁(yè)

④ 加載

Asos.com

⑤ 無(wú)限滾動(dòng)

Duckduckgo.com的無(wú)限滾動(dòng)

⑥ 組合方式

4）預(yù)覽

這是界面中經(jīng)過(guò)精心研究的部分，哪些部分應(yīng)當(dāng)包括在搜索結(jié)果中呢？

① 在預(yù)覽中突出顯示查詢字詞

iBooks

② 有助于區(qū)分結(jié)果的文檔摘要

Ataccama.com

③ 頁(yè)面預(yù)覽

Youtube.com

5）可訪問(wèn)性

確保每個(gè)用戶都能舒適地使用我們的產(chǎn)品是我們的工作。

文本語(yǔ)音轉(zhuǎn)換服務(wù)是否可以掃描和讀取搜索結(jié)果？字體大小和對(duì)比度可讀嗎？人們可以在晴天戶外的手機(jī)顯示屏上閱讀它們嗎？您使用的顏色是否所有人都能識(shí)別？

6）捷徑

一些公司將結(jié)果預(yù)覽提升到了可用性的下一個(gè)層次，并在不離開(kāi)結(jié)果頁(yè)面的情況下，為用戶提供必要的最少信息量和功能。

Google

7）可操作的搜索結(jié)果

我們?nèi)绾螏椭脩舾?，更舒適地完成工作？例如，讓用戶可以在不離開(kāi)結(jié)果頁(yè)面的情況下，開(kāi)始處理他們的搜索結(jié)果。

Spotify

這些是一些常見(jiàn)的動(dòng)作，它們可能因產(chǎn)品而異：

• 分享
• 保存結(jié)果，書(shū)簽，添加到愿望清單
• 加入購(gòu)物車(chē)

AppStore

• 評(píng)論
• 預(yù)覽圖庫(kù)
• 大量動(dòng)作

Dropbox Paper

8）界面反饋

① 加載圖標(biāo)或進(jìn)度顯示

Skyscanner

② 關(guān)于搜索過(guò)程的信息（結(jié)果，時(shí)間，應(yīng)用的過(guò)濾器）

Fights.yandex.com

③ 系統(tǒng)通知（例如，如果結(jié)果是對(duì)時(shí)間敏感的，用戶可能需要刷新它們）

④ 未找到頁(yè)面

Skyscanner.net

⑤ 微交互

9）搜索歷史

① 最近搜索

② 熱門(mén)搜索

10）篩選器和分類(lèi)

篩選器也需要有單獨(dú)的文章來(lái)探討。

設(shè)計(jì)復(fù)雜的網(wǎng)站時(shí)，定義明確的篩選器非常重要，它們會(huì)使搜索體驗(yàn)更加流暢。

Booking.com

• 類(lèi)別及其顆粒度
• 標(biāo)簽
• 篩選器類(lèi)型
• 放置方式
• 操作（保存和編輯自定義過(guò)濾器）
• 排序

11）自定義

如果搜索是應(yīng)用程序中的關(guān)鍵功能，并且是用戶工作流程中的重要組成部分，那么自定義對(duì)其將很重要。可以允許用戶調(diào)整結(jié)果頁(yè)面的布局，更改字體和顏色，定義頁(yè)面上顯示的結(jié)果數(shù)量，保存篩選器，自定義排序參數(shù)或添加對(duì)操作的調(diào)用。

谷歌搜索

Aliexpress.com

12）個(gè)性化

考慮一下用戶設(shè)置，過(guò)去搜索的內(nèi)容，首選項(xiàng)或有關(guān)用戶的其他信息，思考如何利用它們改善搜索體驗(yàn)。

13）鍵盤(pán)快捷鍵

一組鍵盤(pán)快捷鍵將使瀏覽搜索結(jié)果更加容易。

14）相關(guān)性指標(biāo)

根據(jù)內(nèi)容的類(lèi)型，結(jié)果的精確度以及結(jié)果相關(guān)性的差距有多大，相關(guān)性指標(biāo)可以幫助您更快地做出決策。

2. 搜索框設(shè)計(jì)清單

1）可視化部分

• 搜索框的位置
• 行動(dòng)召喚
• 圖標(biāo)
• 單框或多個(gè)輸入字段

Franzen和Karlgren在2000年發(fā)現(xiàn)，更寬的向輸入框會(huì)引導(dǎo)用戶建立更長(zhǎng)的搜索問(wèn)題?！端阉饔脩艚缑妗?/p>

2）輸入類(lèi)型

您的搜索應(yīng)支持哪些類(lèi)型的輸入？

• 文本
• 語(yǔ)音
• 圖片
• 標(biāo)簽

3）幫助

① 搜索提示，向用戶展示搜索的全部潛力

Stackoverflow.com

② 輸入字段中的默認(rèn)文本

Imdb.com

4）自動(dòng)補(bǔ)充填寫(xiě)

自動(dòng)補(bǔ)充填寫(xiě)功能可以成為一種強(qiáng)大而有效的工具，可以使搜索快速有效地進(jìn)行交互。

Fullstory.com

預(yù)定義的自動(dòng)補(bǔ)充填寫(xiě)功能可能會(huì)建議最近或流行的查詢，過(guò)濾器，標(biāo)簽或起到導(dǎo)航作用。

結(jié)構(gòu)化建議可幫助用戶瀏覽復(fù)雜的網(wǎng)站。

Twitch.tv

5）微交互

• 載入中
• 錯(cuò)誤訊息
• 系統(tǒng)通知
• 快速清除搜索內(nèi)容

Google Drive

6）高級(jí)搜索

如果有很多用于搜索項(xiàng)目的參數(shù)，則可以考慮使用高級(jí)搜索選項(xiàng)和邏輯操作。

示例：我想找到住在柏林并在上個(gè)月購(gòu)物且年齡在45至60歲之間的所有客戶。

我們?nèi)绾瓮ㄟ^(guò)界面支持這些類(lèi)型的查詢？

① 邏輯運(yùn)算

Confluence

② 基于界面的高級(jí)搜索

fullstory.com

3. 設(shè)計(jì)跨渠道的搜索體驗(yàn)

如果您要設(shè)計(jì)多個(gè)設(shè)備，這是設(shè)計(jì)過(guò)程中至關(guān)重要的部分。我不會(huì)在這里討論這個(gè)主題，但是您可以在Tony Russell-Rose和Tyler Tate的《設(shè)計(jì)搜索體驗(yàn)》中閱讀更多內(nèi)容。

要點(diǎn)

搜索是一個(gè)復(fù)雜且昂貴的功能，技術(shù)約束將在設(shè)計(jì)中扮演重要角色。因此，從一開(kāi)始（研究階段）就讓開(kāi)發(fā)團(tuán)隊(duì)參與非常重要，該團(tuán)隊(duì)將了解用戶需求并幫助找到最佳解決方案。

可參考的搜索界面案例

Swiftype（https://swiftype.com/enterprise-search）

Algolia（https://www.algolia.com/）

Jira Atlassian（https://www.atlassian.com/software/jira）

FullStory（https://www.fullstory.com/）

Mac 系統(tǒng)的Finder（聚焦搜索）

YouTrack （https://www.jetbrains.com/youtrack/）

Skyscanner（https://www.skyscanner.net/）

Google Drive（https://www.google.com/drive/）

Slack（https://slack.com/lp/two）

Spotify（https://www.spotify.com/cz/）

Cars.com（https://www.cars.com/）

Zillow（https://www.zillow.com/）

LinkedIn（https://www.linkedin.com/）

VW Model Lineup（http://www.vw.com/models/）

AliExpress（http://aliexpress.com/）

Amazon（https://www.amazon.com/）

Goodreads（https://www.goodreads.com/）

IMDb（http://www.imdb.com/）

Yandex Flights（https://flights.yandex.com/）

Twitch（https://www.twitch.tv/）

書(shū)籍：

《Search Patterns: Design for Discovery》 作者：Peter Morville, Jeffery Callender。

《Search User Interfaces》 作者：Marti Hearst。

《Designing the Search Experience》 作者：Tony Russell-Rose, Tyler Tate。

《Information Architecture: For the Web and Beyond》第9章：搜索系統(tǒng) 作者：Louis Rosenfeld, Peter Morville 和 Jorge Arango.

文章：

Designing Search（https://blog.prototypr.io/designing-search-c96cc5d05ddf）

5 important things you need to consider when designing for search （https://blog.prototypr.io/5-easy-and-effective-tips-to-get-more-out-of-your-search-f53d55d063de）

Best practices for designing your web search pattern （https://medium.com/@justinmind/best-practices-for-designing-your-search-pattern-c2cbd0a63b5e）

Design a Perfect Search Box （https://uxplanet.org/design-a-perfect-search-box-b6baaf9599c）

Best Practices for Search Results（https://uxplanet.org/best-practices-for-search-results-1bbed9d7a311）

Mobile UX Design: User-Friendly Search（https://uxplanet.org/mobile-ux-design-user-friendly-search-51e5f78f5a1e）

Search UI Patterns: Elements （https://medium.com/@ddsky/search-ui-patterns-elements-80ea9d241f97）

視頻：

[cz] Search UX best practices — relevance, rychlost, pou?itelnost（https://www.youtube.com/watch?v=sbuTVJiQyF0）

UX for eCommerce- Lecture 5: Creating a Good Search Box（https://www.youtube.com/watch?v=AMwUsyQYlbk）

本文翻譯自Nadya Tsech的Search interface: 20 things to consider，作者是Ataccama的B2B產(chǎn)品設(shè)計(jì)師。

原文：https://uxplanet.org/search-interface-20-things-to-consider-4b1466e98881

本文由 @海外設(shè)計(jì)參考 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于CC0協(xié)議