【打卡学习】

Day1:搜索框的设计(2days 4hours)

【学习part1—交互】

输入框和提交按钮的组合,频率最高的组件。

设计范例:

·使用放大镜图标(使用大众理解趋于一致的图标)

·搜索框明显

·增加搜索按钮:让用户可以同时通过按回车和点击按钮去触发搜索。其实还是有很多用户习惯去点击页面上的按钮。

·为每一个张页面加上搜索框:当用户找不到他们想要的内容的时候,他们会去找搜索框,不管他们在你网站的哪个位置。(??)

·把搜索框放在用户想出现的位置:,网站的左上角和右上角是用户所期待的搜索框的位置,用户在使用F型扫视法查看内容的时候,可以轻松找到搜索框。


尼尔森F形状网页浏览模式

·合适的输入栏尺寸:让输入栏长度大概保持在27个字左右(英文)就可以满足90%的情况了。


Tips: 考虑使用一个可伸缩输入框,当用户点击时,可以加长输入框。这样既可以节省空间,也可以让用户更加方便找到和进行输入操作。



·请为用户列出自动候选项:历史记录、关联词语、拼音修正

Tips:

确保自动候选栏是有用的。不好的候选项反而会让用户困惑。使用拼写修正,辨别输入,并且预测用户想要搜索的内容以为了提高使用体验。

你应该以最快的速度列出建议选项,大概三个字左右,就要快速列出候选项了,以来减少用户后面的输入。

控制在十个选项之内,不要用滚动条,以让信息不会过多。

支持键盘选择,当用户选到最后一个选项时,下一个选项应该转到第一个。ESC键应该可以让用户离开候选列表。

标出输入与建议信息的不同处(例如:输入信息用一般字重,建议信息用加粗字重)。

·请让用户更加清楚什么可以搜索


Tips: 控制你提示内容的字数,否则会增加认知负荷。


Part2 搜索框的产品设计

思路1:基于步骤的搜索设计(转自菜花谈产品)

第1步:输入关键词

信息录入目前来说最常见的就是文字录入,不过现在我们也开始看到新兴的录入方式:语音录入和图片录入。


语音录入我们最熟悉的产品就是一些音乐播放软件还有外语词典,比如qq音乐或者网易云音乐。用户想听一首歌,可以直接输入歌曲名,但是不知道歌名的情况下,可以通过语音的形式完成歌曲信息的录入。


而使用图片完成信息录入的一个比较典型的例子就是淘宝的拍立淘,用户可以拍下心仪产品的照片,系统就会给你匹配相似的商品,非常方便。从这点来看,设计师必须要时刻掌握最新的科技信息,要不然很容易就被淘汰。

输入关键词这步主要考虑的包含2部分:关键词识别和关键词推荐

1、关键词识别

对于输入关键词的识别上,通常要考虑以下几种情况的搜索需求:

(1)多字符串识别

假设用户提交了不只一个查询串,那么搜索引擎需根据分隔符比如空格,标点符号,将查询串分割成若干子查询串。例如,用户输入“气垫 粉底 BB” 和“气垫,粉底,BB” ,会展示所有包含“气垫” 或“粉底”或 “BB” 三个关键词的商品,而非同时包含这三个关键词的商品。

根据下图我们看到,小红书和网易考拉都做了这种识别。不论输入空格还是逗号,查询结果都是一致的。


小红书搜索结果
图2 网易考拉搜索结果

(2)分词

除了多查询串的识别,对长查询串的分词识别也是搜索最基础的要求之一。分词就是当用户提交了一个长字符串,可根据词义分割成若干字符串。例如用户输入“遮瑕气垫粉底bb霜”,能拆分成“遮瑕” “气垫” “粉底” “bb霜”几个词串进行匹配,而不是只匹配与搜索词串完全相同的结果。


(3)错别字识别

用户在搜索时输入错别字也是不可避免的情况。例如,用户搜索“永衣”,能给用户按“泳衣”关键词进行推荐。


(4)同义词近义词

为了最大可能覆盖用户想要的结果,可建立一个同义词近义词的词库,当没有完全符合搜索词的结果时,可推荐近义词或同义词的搜索结果,例如,在考拉中,用户搜“花露水”,系统推荐了“驱蚊”关键词的结果,并推荐了另2个相关关键词。

(5)重复内容识别

假设用户提交的查询有重复的内容,可将重复查询归并成一个处理。例如“遮瑕气垫粉底bb粉底”,能去重分词为:“遮瑕”“气垫”“粉底”“bb”

6)英文字母数字识别

查询串中包含英文字母或数字,将英文或数字作为一个整体保留,做模糊匹配。例如:“sulwhasoo面膜”被拆分为“sulwhasoo”“面膜”



1)历史搜索

历史搜索词就是推荐用户自己最近搜索过N个关键词,避免用户重复输入,支持用户手工清空

(2)热门搜索

热门搜索一般有两种做法:

一是根据用户搜索的关键词热度进行排序,获取真实的热门关键词进行推荐

二是受商业价值驱动,推荐从商业角度,最希望用户搜索查询的内容。这会有一个供运营配置的后台,由运营人工配置。

当然也可以综合以上两种方式,兼而有之。

第2步:确定关键词

确定关键词为了帮助用户用最小的成本获取最准确的关键词,关键词联想也是搜索的基本功能。联想关键词一般来自两个渠道:

一是所有用户历史热搜的关键词

二是自建的常用关键词库

当用户输入的关键词被包含匹配到以上两类关键词时,则被列入联想词列表。

第3步:搜索结果

1、检索范围

搜索范围的规则制定也是搜索设计最基础的环节。是决定用户搜索关键词跟什么内容去做匹配的问题。同时,影响到搜索权重。

跟什么内容做匹配,也取决于用户搜索场景的分析。例如用户想搜索的是商品,则应该跟商品属性做匹配,那具体是哪些属性,优先级如何,就是需要制定的规则。

商品而言,可以跟商品名称、商品关键词、商品详情等属性进行匹配,且商品名称的权重>商品关键词>商品详情。

有的平台可能没有商品关键词库,商品详情也用纯图片展示,那就只跟商品名称做匹配。

所以具体匹配的属性需根据不同的实际情况而定。


2、呈现方式

对搜索结果的呈现方式也是值得研究的点。同样需要从用户发起搜索的场景思考。

还是以小红书为例,用户的搜索需求有三种,搜索内容、商品、用户。

如果用户从商城搜索,那搜索结果默认定位至商品列表是最符合场景的,同理,如果用户从社区进入搜索,那默认定位至社区内容TAB


但是有的产品首页是一个综合页,包含了所有内容模块,如果用户是从首页搜索,那在不清楚用户想搜索的到底是哪一部分内容的情况下,需定位至综合结果页。综合结果页会罗列出几部分中相关性最高的几个搜索结果供用户选择。综合结果的设计可以参考微信搜索结果页。

第4步:细化筛选


通常在搜索结果里,都会默认按照相关度排序。但是也允许用户按需从其它维度进行排序筛选。可筛选的条件跟搜索结果所属的特性强相关。例如,如果是商品列表,那可以考虑根据商品的价格、分类、销量、功能等排序。如果是一个平台电商,那还可以根据品牌等进行筛选。

除了考虑商品本身的属性进行筛选外,还要从商业利益的角度,把最想展示给用户的商品组合成一个分类,方便用户删选,例如考拉的分类中,加入了“618”活动商品、考拉自营等分类。

刚才说的都是搜索结果过多的情况下应该怎么办。我们还应该考虑的是搜索结果为零的时候,我们如何给用户设计合适的空页面。

现在一些搜索结果是通过加载一个新的页面来展示的,如果我们不给用户说清楚。用户会误以为是网络原因导致页面加载失败而不是搜索不到你想要的商品。所以空页面设计一定要向用户解释清楚原因。

二、搜索数据的跟踪

数据驱动产品,是做任何产品都需要具备的意识。搜索也不例外。搜索上线后,我们需要监控哪些数据来帮助我们不断优化搜索功能呢?

1、用户搜索路径及漏斗转化

主要监控用户是从哪里进入搜索的?搜索后有点击搜索结果吗?有完成最终转化吗?用户的路径能帮助我们检验搜索结果是不是用户想要的。此外,如果用户在某个搜索入口高频搜索某个关键词,也可以帮我们反思搜索入口所在页面饿设计是不是没有满足用户某个痛点。

2、关键词搜索数据监控

用户在产品下留下任何行为数据都是有意义的。搜索过的关键词更是如此。关键词代表了用户对产品最直接的诉求。不论关键词最终的搜索结果如何,都值得被记录。并定期拉出来,进行分析。

分析的结果不仅能帮助搜索的优化,还能反推运营、业务进行改进。例如,如果一个电商平台,5月份开始用户搜索“花露水”及类似驱蚊类商品的搜索增加,而平台在驱蚊产品上没有充足的备货,那就可以推动对驱蚊类商品的采购。

3、搜索结果为空的数据监控

搜索结果为空的关键词,最能反映用户对产品的期待,但是却未达成所愿的那部分产品缺憾。所以,专项存储记录搜索为空的关键词,及关键词的搜索热度也是非常必要的。可以帮助我们不断弥补产品的不足。

思路2:根据场景的设计

在设计搜索之前首先需要思考的问题是:谁在什么场景下会使用搜索功能?他想搜什么?

1、小红书

小红书的定位是生活方式分享社区,旗下设立了电商平台“小红书商城”作为变现业务,所以小红书的核心布局:社区+电商。所以对小红书有认知的用户,主要在如下几种场景下有搜索诉求:

(1)想了解生活达人们对某类商品的推荐、评价

(2)想在小红书商城购买某类商品

(3)想关注某位达人

由此,可以确定,小红书搜索范围在社区内容、商品、用户。从小红书搜索结果页TAB的分类看,也是按照这3类进行的划分,其中“全部”其实就是UGC社区内容。

2、网易严选

网易严选的定位是原创生活类自营电商,是一个纯电商平台,所以用户搜索诉求很单一:找到想要的商品

所以纯电商平台的搜索范围只局限于商品。

网易严选搜索结果主页

3、知乎

知乎的定位是网络问答社区,连接各行各业的用户。用户分享着彼此的知识、经验和见解。所以知乎用户的主要搜索诉求是:

(1)找到想了解的经验、内容

(2)找到想关注的知识咖


我们看知乎搜索的模块设计,虽然分为用户、话题、想法、专栏、电子书等分类。但是从本质上仍然分为人和内容两部分。话题、想法、专栏、电子书等都属于内容一类,只是不同的内容形态、业务形态而已。

大多数情况下,会使用搜索功能的用户,主要是产品的老用户,对产品的基本内容和服务有一定的了解,并且有着非常明确的自身诉求。在这种场景下,如果用户能检索到自己想要的内容或服务,必将会产生很高的转化。所以,搜索功能的重要性,不言而喻。

【个人总结】

1.对搜索框的理解

2.不同搜索框的设计

·QQ Mac版

建议信息为个人好友、群和工具

·微信mac版

微信则是以联系人、群聊、聊天内容、搜藏内容和搜索为返回信息

使用场景更偏向办公、信息搜索等


3.针对音乐软件搜索框设计

·网易云音乐mac版本

网易云的信息提示告诉使用者可以搜索哪些内容


输入关键词后,以用户、单曲、相关歌手、专辑、mv、歌单为搜索内容类别给出建议
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,319评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,801评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,567评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,156评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,019评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,090评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,500评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,192评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,474评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,566评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,338评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,212评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,572评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,890评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,169评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,478评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,661评论 2 335

推荐阅读更多精彩内容