起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識設計搜索界面，你需要考慮這20個細節
這篇文章是我們在設計解決方案以及我們在原型設計時應該考慮的元素清單之前，應該回答的問題集合。
問用戶有哪些問題？原型開發時應該考慮什么？什么是界面搜索設計的最佳實踐?
根據不同項目，搜索可能是最復雜的功能之一。用戶雖然僅看到一個盒子，但實際上在這個盒子背后有一個復雜的系統，設計師和開發人員有大量的工作。
這篇文章是我們在設計解決方案以及我們在原型設計時應該考慮的元素清單之前，應該回答的問題集合。
一、觀察并提出問題
設計師在研究階段需要回答8個問題，了解用戶搜索的原因，他們何時以及如何形成搜索問題。
1. 你的用戶的信息需求和意圖是什么？
他們是否搜索到：
- 導航，查找特定網頁。
- 查找具體信息（“布拉格天氣”，“澳大利亞首都”）。
- 尋求建議（“如何設計搜索界面”）。
- 查找資源、應用程序及文檔。
- 查找事實，數據（“我們網站上有多少活躍用戶？”）。
- 收集來自不同來源的信息。
- 數據分析。
2. 用戶在什么時候點擊搜索？
- 他們在點擊搜索之前做了什么？
- 他們跟誰討論過？
- 在切換到搜索之前他們用了哪些應用程序？
3. 用戶如何形成搜索問題？
搜索交互是一個對話過程。如果你知道用戶如何開始對話，便可以給他們正確的答案。
4. 用戶是否確切地知道他們所找的東西？或者他們僅是單純地瀏覽？
例如，研究關于友誼的課題，尋找任何相關的書籍，或者尋找一本特定的書籍。我希望這兩個請求有不同的結果。
5. 用戶期望找到什么？
- 他們是否能描述期望的搜索結果是什么？
- 他們還能找到這些信息嗎？
6. 接下來的步驟是什么？
- 他們對結果會做什么？
- 如果沒有找到他們正在尋找的東西，用戶會怎么做？
- 如何讓搜索適應他們的工作流程？
7. 用戶操作是否存在模式？
用戶行為中的模式描述了用戶如何進行搜索交互，他們所期望的結果及他們接下來的步驟。在重新設計現有界面時，模式是非常重要的。
在《搜索模式》和《用戶界面搜索》中，作者描述了這些常見的搜索模式和模型：
退出模式：用戶輸入查詢>查看結果>退出
狹窄的格局：用戶輸入查詢>查看結果>將其縮小
優先第一模式：用戶輸入查詢>查看結果>打開第一個鏈接之一
珍珠增長模式：用戶輸入查詢>打開其中一個結果>打開文檔中的相關鏈接或使用文檔中的詞匯查詢
在Searchpatterns.org或Medium的搜索模式（查找具有示例的常見模式列表）中查找更多模式。
8. 他們會使用什么應用程序？
如果你的產品是工作流程的一部分，其他工具可能會影響用戶的習慣和對其用戶體驗的期望。詳細了解他們這些工具中的搜索如何進行交互，以及最有效的交互方式。
詢問并了解他們的搜索交互方式
詢問用戶是一種可以幫助你與用戶建立聯系，并在正確的時間直接向其提問的一種工具。
二、檢查列表：每部分的搜索考慮
搜索有更多的組件不止滿足視覺。這個檢查列表幫助原型更快，不會讓你忘記任何東西。
*免責聲明：此列表僅包含交互元素，不考慮算法、搜索行為、結果的速度或質量，僅考慮桌面搜索界面。移動搜索在許多方面有所不同，需要自己的博客文章。
1.結果頁面
（1）結果類型
視頻、事件、音頻、位置、圖表
在你的網站上有哪些類型的信息是可用？哪些類型可以搜索？如何在結果頁面上更好地顯示不同的類型？
（2）可視化結果
1）表單或列表
2）卡片
Pinterest.com
3）可調節視圖
Bookmate.com
4）分面導航
基于信息架構將搜索結果劃分為邏輯組，使瀏覽體驗更加舒適。
“分面導航無疑是過去十年中最重要的搜索創新?！?/p>
——Jeffery Callender，Peter Morville
Spotify的：
（3）頁面上的項目數量
用戶一次能看到多少結果？我們能否通過提供替代視圖和排序來讓他們舒適地安排結果？
1）查看設置
Ebay.com
2）分類
Ikea.com
3）分頁
4）加載
Asos.com
5）無限滾動
無限滾動的Duckduckgo.com
6）組合
（4）預覽
這是一個經過深入研究的部分界面。最佳實踐告訴我們在搜索結果中包含哪些內容？
1）預覽中要突出顯示查詢術語
iBooks
2）幫助區分結果的文檔總結
Ataccama.com
3）頁面預覽
Youtube.com
（5）可訪問性
確保每個用戶都可以輕松地使用我們的產品是我們工作。搜索結果是否可通過文字轉語音服務進閱讀？字體大小和對比度是否可讀？人們能否在一個晴朗天移動顯示屏上進行閱讀？所使用的顏色是否可以被所有人識別？
（6）快捷鍵
一些公司將結果預覽展示給下一個可用性級別，在不離開結果頁面的情況下向用戶提供必需的最少量信息和功能。
（7）可操作
我們如何幫助用戶更便捷地完成工作？比如，讓用戶在不離開結果頁面的情況下有機會開始處理他們正在查找的項目。
Spotify
這些是一些常見的行為。它們在不同產品中可能會有很大差異：
- 分享
- 保存結果，書簽，添加到愿望清單
- 添加到購物車
應用商店：
- 評論
- 預覽圖庫
- 批量操作
Dropbox?paper
（8） 界面反饋
1）加載圖標或進度指示器
Skyscanner
2）有關搜索過程的信息（結果，時間，應用過濾器）
Fights.yandex.com
- 系統通知（例如，如果對搜索結果的時間敏感，用戶需要重新刷新頁面）
- 未找到頁面
Skyscanner.net
3）微交互
（9）歷史搜索記錄
- 最近的查詢
- 最受歡迎的查詢
（10）過濾和分類
過濾器有自己的博客文章。設計復雜的網站時，定義明確的過濾器非常重要。他們會讓搜索體驗更流暢。
Booking.com
- 類別及其間隔尺寸
- 標簽
- 過濾器類型
- 布局
- 操作（保存并編輯自定義過濾器）
- 分類
（11）定制化服務
如果搜索是應用程序中的關鍵功能，并且是用戶工作流程中的重要組成部分，那定制對他們來說非常重要?？梢栽试S用戶調整結果頁面布局，更改字體和顏色，定義頁面上顯示的結果數量，保存過濾器，自定義分類參數或添加行動號召。
谷歌搜索
Aliexpress.com
（12） 個性化
用戶設置、之前的查詢、偏好及其他有關用戶的信息如何改善搜索體驗。
（13）快捷鍵
一組鍵盤快捷鍵可以更輕松地瀏覽搜索結果。
（14）相關指示器
根據內容的類型，結果的精確程度及結果相關性的差距，相關性指標有助于加快決策速度。
2.搜索框檢查列表
（1）可視化
- 定位搜索框
- 行動號召
- 圖標
- 單個或多個輸入字段
Franzen和Karlgren在2000年發現：向研究參與者展示更廣泛的報名表格，鼓勵他們輸入更長的查詢。用戶搜索界面。
（2）輸入類型
你支持什么類型的搜索輸入？
- 文本
- 音頻
- 圖像
- 標簽
（3）幫助
1）搜索提示。向用戶展示搜索的全部的可能性。
Stackoverflow.com
2）輸入字段中的默認文本
Imdb.com
（4）自動完成
自動完成功能可以成為快速高效地進行搜索互動的強大工具。
Fullstory.com
- 預先定義的自動填充會提示最近或當下流行的查詢、過濾器、標簽或播放導航角色。
- 結構化建議可幫助用戶瀏覽復雜的網頁。
Twitch.tv
（5） 微交互
- 加載
- 錯誤消息
- 系統通知
- 快速清除查詢的方法
Google驅動
（6） 高級搜索
如果有許多用于查找項目的參數，則可以考慮使用高級搜索選項和邏輯操作。
例如：我想找到住在柏林的所有客戶，并在上個月進行了購買，年齡在45-60歲之間。
我們如何用界面支持這些類型的查詢？
1）邏輯運作
2）基于高級搜索的界面
設計跨渠道搜索體驗：
設計多種設備是設計過程中至關重要的一部分。我不會在這里討論這個話題，但你可以在Tony Russell-Rose和Tyler Tate的《設計搜索體驗》中閱讀更多內容。
三、小貼士
搜索是一個復雜且昂貴的功能，技術限制在設計中發揮重要作用。
這就是為什么一開始涉及研發團隊（等同于研究階段）是非常重要，該團隊了解用戶需求并幫助你尋找最佳解決方案。
搜索界面案例
- Swiftype
- Algolia
- Jira Atlassian
- FullStory
- Mac OS finder
- YouTrack
- Skyscanner
- Google Drive
- Slack
- Spotify
- com
- Zillow
- VW Model Lineup
- com
- com
- Goodreads
- IMDb
- Yandex Flights
- Twitch
原文作者：Nadya Tsech
原文地址：https://uxplanet.org/search-interface-20-things-to-consider-4b1466e98881
本文由 @SKYUI 翻譯發布于人人都是產品經理。未經許可，禁止轉載。
題圖來自 Unsplash，基于 CC0 協議
概括的不錯，可以幫助理清思路