這篇文章是我們?cè)谠O(shè)計(jì)解決方案以及我們?cè)谠驮O(shè)計(jì)時(shí)應(yīng)該考慮的元素清單之前，應(yīng)該回答的問(wèn)題集合。

問(wèn)用戶(hù)有哪些問(wèn)題？原型開(kāi)發(fā)時(shí)應(yīng)該考慮什么？什么是界面搜索設(shè)計(jì)的最佳實(shí)踐?

根據(jù)不同項(xiàng)目，搜索可能是最復(fù)雜的功能之一。用戶(hù)雖然僅看到一個(gè)盒子，但實(shí)際上在這個(gè)盒子背后有一個(gè)復(fù)雜的系統(tǒng)，設(shè)計(jì)師和開(kāi)發(fā)人員有大量的工作。

這篇文章是我們?cè)谠O(shè)計(jì)解決方案以及我們?cè)谠驮O(shè)計(jì)時(shí)應(yīng)該考慮的元素清單之前，應(yīng)該回答的問(wèn)題集合。

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

設(shè)計(jì)師在研究階段需要回答8個(gè)問(wèn)題，了解用戶(hù)搜索的原因，他們何時(shí)以及如何形成搜索問(wèn)題。

1. 你的用戶(hù)的信息需求和意圖是什么？

他們是否搜索到：

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

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

• 他們?cè)邳c(diǎn)擊搜索之前做了什么？
• 他們跟誰(shuí)討論過(guò)？
• 在切換到搜索之前他們用了哪些應(yīng)用程序？

3. 用戶(hù)如何形成搜索問(wèn)題？

搜索交互是一個(gè)對(duì)話過(guò)程。如果你知道用戶(hù)如何開(kāi)始對(duì)話，便可以給他們正確的答案。

4. 用戶(hù)是否確切地知道他們所找的東西？或者他們僅是單純地瀏覽？

例如，研究關(guān)于友誼的課題，尋找任何相關(guān)的書(shū)籍，或者尋找一本特定的書(shū)籍。我希望這兩個(gè)請(qǐng)求有不同的結(jié)果。

5. 用戶(hù)期望找到什么？

• 他們是否能描述期望的搜索結(jié)果是什么？
• 他們還能找到這些信息嗎？

6. 接下來(lái)的步驟是什么？

• 他們對(duì)結(jié)果會(huì)做什么？
• 如果沒(méi)有找到他們正在尋找的東西，用戶(hù)會(huì)怎么做？
• 如何讓搜索適應(yīng)他們的工作流程？

7. 用戶(hù)操作是否存在模式？

用戶(hù)行為中的模式描述了用戶(hù)如何進(jìn)行搜索交互，他們所期望的結(jié)果及他們接下來(lái)的步驟。在重新設(shè)計(jì)現(xiàn)有界面時(shí)，模式是非常重要的。

在《搜索模式》和《用戶(hù)界面搜索》中，作者描述了這些常見(jiàn)的搜索模式和模型：

退出模式：用戶(hù)輸入查詢(xún)>查看結(jié)果>退出

狹窄的格局：用戶(hù)輸入查詢(xún)>查看結(jié)果>將其縮小

優(yōu)先第一模式：用戶(hù)輸入查詢(xún)>查看結(jié)果>打開(kāi)第一個(gè)鏈接之一

珍珠增長(zhǎng)模式：用戶(hù)輸入查詢(xún)>打開(kāi)其中一個(gè)結(jié)果>打開(kāi)文檔中的相關(guān)鏈接或使用文檔中的詞匯查詢(xún)

在Searchpatterns.org或Medium的搜索模式（查找具有示例的常見(jiàn)模式列表）中查找更多模式。

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

如果你的產(chǎn)品是工作流程的一部分，其他工具可能會(huì)影響用戶(hù)的習(xí)慣和對(duì)其用戶(hù)體驗(yàn)的期望。詳細(xì)了解他們這些工具中的搜索如何進(jìn)行交互，以及最有效的交互方式。

詢(xún)問(wèn)并了解他們的搜索交互方式

詢(xún)問(wèn)用戶(hù)是一種可以幫助你與用戶(hù)建立聯(lián)系，并在正確的時(shí)間直接向其提問(wèn)的一種工具。

二、檢查列表：每部分的搜索考慮

搜索有更多的組件不止?jié)M足視覺(jué)。這個(gè)檢查列表幫助原型更快，不會(huì)讓你忘記任何東西。

*免責(zé)聲明：此列表僅包含交互元素，不考慮算法、搜索行為、結(jié)果的速度或質(zhì)量，僅考慮桌面搜索界面。移動(dòng)搜索在許多方面有所不同，需要自己的博客文章。

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

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

視頻、事件、音頻、位置、圖表

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

（2）可視化結(jié)果

1）表單或列表

Paper.dropbox.com

2）卡片

Pinterest.com

3）可調(diào)節(jié)視圖

Bookmate.com

4）分面導(dǎo)航

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

“分面導(dǎo)航無(wú)疑是過(guò)去十年中最重要的搜索創(chuàng)新?！?/p>

——Jeffery Callender，Peter Morville

Spotify的：

（3）頁(yè)面上的項(xiàng)目數(shù)量

用戶(hù)一次能看到多少結(jié)果？我們能否通過(guò)提供替代視圖和排序來(lái)讓他們舒適地安排結(jié)果？

1）查看設(shè)置

Ebay.com

2）分類(lèi)

Ikea.com

3）分頁(yè)

4）加載

Asos.com

5）無(wú)限滾動(dòng)

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

6）組合

（4）預(yù)覽

這是一個(gè)經(jīng)過(guò)深入研究的部分界面。最佳實(shí)踐告訴我們?cè)谒阉鹘Y(jié)果中包含哪些內(nèi)容？

1）預(yù)覽中要突出顯示查詢(xún)術(shù)語(yǔ)

iBooks

2）幫助區(qū)分結(jié)果的文檔總結(jié)

Ataccama.com

3）頁(yè)面預(yù)覽

Youtube.com

（5）可訪問(wèn)性

確保每個(gè)用戶(hù)都可以輕松地使用我們的產(chǎn)品是我們工作。搜索結(jié)果是否可通過(guò)文字轉(zhuǎn)語(yǔ)音服務(wù)進(jìn)閱讀？字體大小和對(duì)比度是否可讀？人們能否在一個(gè)晴朗天移動(dòng)顯示屏上進(jìn)行閱讀？所使用的顏色是否可以被所有人識(shí)別？

（6）快捷鍵

一些公司將結(jié)果預(yù)覽展示給下一個(gè)可用性級(jí)別，在不離開(kāi)結(jié)果頁(yè)面的情況下向用戶(hù)提供必需的最少量信息和功能。

Google

（7）可操作

我們?nèi)绾螏椭脩?hù)更便捷地完成工作？比如，讓用戶(hù)在不離開(kāi)結(jié)果頁(yè)面的情況下有機(jī)會(huì)開(kāi)始處理他們正在查找的項(xiàng)目。

Spotify

這些是一些常見(jiàn)的行為。它們?cè)诓煌a(chǎn)品中可能會(huì)有很大差異：

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

應(yīng)用商店：

• 評(píng)論
• 預(yù)覽圖庫(kù)
• 批量操作

Dropbox?paper

（8） 界面反饋

1）加載圖標(biāo)或進(jìn)度指示器

Skyscanner

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

Fights.yandex.com

• 系統(tǒng)通知（例如，如果對(duì)搜索結(jié)果的時(shí)間敏感，用戶(hù)需要重新刷新頁(yè)面）
• 未找到頁(yè)面

Skyscanner.net

3）微交互

（9）歷史搜索記錄

• 最近的查詢(xún)
• 最受歡迎的查詢(xún)

（10）過(guò)濾和分類(lèi)

過(guò)濾器有自己的博客文章。設(shè)計(jì)復(fù)雜的網(wǎng)站時(shí)，定義明確的過(guò)濾器非常重要。他們會(huì)讓搜索體驗(yàn)更流暢。

Booking.com

• 類(lèi)別及其間隔尺寸
• 標(biāo)簽
• 過(guò)濾器類(lèi)型
• 布局
• 操作（保存并編輯自定義過(guò)濾器）
• 分類(lèi)

（11）定制化服務(wù)

如果搜索是應(yīng)用程序中的關(guān)鍵功能，并且是用戶(hù)工作流程中的重要組成部分，那定制對(duì)他們來(lái)說(shuō)非常重要?？梢栽试S用戶(hù)調(diào)整結(jié)果頁(yè)面布局，更改字體和顏色，定義頁(yè)面上顯示的結(jié)果數(shù)量，保存過(guò)濾器，自定義分類(lèi)參數(shù)或添加行動(dòng)號(hào)召。

谷歌搜索

Aliexpress.com

（12） 個(gè)性化

用戶(hù)設(shè)置、之前的查詢(xún)、偏好及其他有關(guān)用戶(hù)的信息如何改善搜索體驗(yàn)。

（13）快捷鍵

一組鍵盤(pán)快捷鍵可以更輕松地瀏覽搜索結(jié)果。

（14）相關(guān)指示器

根據(jù)內(nèi)容的類(lèi)型，結(jié)果的精確程度及結(jié)果相關(guān)性的差距，相關(guān)性指標(biāo)有助于加快決策速度。

2.搜索框檢查列表

（1）可視化

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

Franzen和Karlgren在2000年發(fā)現(xiàn)：向研究參與者展示更廣泛的報(bào)名表格，鼓勵(lì)他們輸入更長(zhǎng)的查詢(xún)。用戶(hù)搜索界面。

（2）輸入類(lèi)型

你支持什么類(lèi)型的搜索輸入？

• 文本
• 音頻
• 圖像
• 標(biāo)簽

（3）幫助

1）搜索提示。向用戶(hù)展示搜索的全部的可能性。

Stackoverflow.com

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

Imdb.com

（4）自動(dòng)完成

自動(dòng)完成功能可以成為快速高效地進(jìn)行搜索互動(dòng)的強(qiáng)大工具。

Fullstory.com

• 預(yù)先定義的自動(dòng)填充會(huì)提示最近或當(dāng)下流行的查詢(xún)、過(guò)濾器、標(biāo)簽或播放導(dǎo)航角色。
• 結(jié)構(gòu)化建議可幫助用戶(hù)瀏覽復(fù)雜的網(wǎng)頁(yè)。

Twitch.tv

（5） 微交互

• 加載
• 錯(cuò)誤消息
• 系統(tǒng)通知
• 快速清除查詢(xún)的方法

Google驅(qū)動(dòng)

（6） 高級(jí)搜索

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

例如：我想找到住在柏林的所有客戶(hù)，并在上個(gè)月進(jìn)行了購(gòu)買(mǎi)，年齡在45-60歲之間。

我們?nèi)绾斡媒缑嬷С诌@些類(lèi)型的查詢(xún)？

1）邏輯運(yùn)作

Confluence

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

Fullstory

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

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

三、小貼士

搜索是一個(gè)復(fù)雜且昂貴的功能，技術(shù)限制在設(shè)計(jì)中發(fā)揮重要作用。

這就是為什么一開(kāi)始涉及研發(fā)團(tuán)隊(duì)（等同于研究階段）是非常重要，該團(tuán)隊(duì)了解用戶(hù)需求并幫助你尋找最佳解決方案。

搜索界面案例

• Swiftype
• Algolia
• Jira Atlassian
• FullStory
• Mac OS finder
• YouTrack
• Skyscanner
• Google Drive
• Slack
• Spotify
• com
• Zillow
• LinkedIn
• VW Model Lineup
• com
• com
• Goodreads
• IMDb
• Yandex Flights
• Twitch

原文作者：Nadya Tsech

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

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

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