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

向用戶提出什么問題？

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

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

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

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

一、觀察并提問

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

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

他們是否搜索到：

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

2. 用戶什么時候點擊搜索？

• 在點擊搜索之前，用戶正在做什么？
• 用戶會與誰交談？
• 在切換到搜索之前，他們在使用什么應(yīng)用程序？

3. 用戶如何提出問題？

與搜索的互動就是對話，如果您知道用戶如何開始對話，則可以為他們提供正確的答案。

4. 用戶準確地知道他們在尋找什么嗎？或者只是在瀏覽？

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

5. 用戶期望找到什么？

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

6. 下一步是什么？

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

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

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

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

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

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

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

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

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

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

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

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

二、清單：考慮到搜索的每個部分

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

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

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

1）結(jié)果類型

視頻，活動

音頻

地點

圖表

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

2）結(jié)果可視化

① 表格或列表

Paper.dropbox.com

② 卡片

Pinterest.com

③ 可變的顯示視圖

Bookmate.com

④ 分頁導航

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

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

Spotify

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

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

① 視圖設(shè)置

Ebay.com

② 排序

Ikea.com

③ 分頁

④ 加載

Asos.com

⑤ 無限滾動

Duckduckgo.com的無限滾動

⑥ 組合方式

4）預覽

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

① 在預覽中突出顯示查詢字詞

iBooks

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

Ataccama.com

③ 頁面預覽

Youtube.com

5）可訪問性

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

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

6）捷徑

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

Google

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

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

Spotify

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

• 分享
• 保存結(jié)果，書簽，添加到愿望清單
• 加入購物車

AppStore

• 評論
• 預覽圖庫
• 大量動作

Dropbox Paper

8）界面反饋

① 加載圖標或進度顯示

Skyscanner

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

Fights.yandex.com

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

④ 未找到頁面

Skyscanner.net

⑤ 微交互

9）搜索歷史

① 最近搜索

② 熱門搜索

10）篩選器和分類

篩選器也需要有單獨的文章來探討。

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

Booking.com

• 類別及其顆粒度
• 標簽
• 篩選器類型
• 放置方式
• 操作（保存和編輯自定義過濾器）
• 排序

11）自定義

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

谷歌搜索

Aliexpress.com

12）個性化

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

13）鍵盤快捷鍵

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

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

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

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

1）可視化部分

• 搜索框的位置
• 行動召喚
• 圖標
• 單框或多個輸入字段

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

2）輸入類型

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

• 文本
• 語音
• 圖片
• 標簽

3）幫助

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

Stackoverflow.com

② 輸入字段中的默認文本

Imdb.com

4）自動補充填寫

自動補充填寫功能可以成為一種強大而有效的工具，可以使搜索快速有效地進行交互。

Fullstory.com

預定義的自動補充填寫功能可能會建議最近或流行的查詢，過濾器，標簽或起到導航作用。

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

Twitch.tv

5）微交互

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

Google Drive

6）高級搜索

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

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

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

① 邏輯運算

Confluence

② 基于界面的高級搜索

fullstory.com

3. 設(shè)計跨渠道的搜索體驗

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

要點

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

可參考的搜索界面案例

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/）

書籍：

《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è)計師。

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

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

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