【PM】移动设计模式—搜索篇

Alfred

今天继续探讨如何帮助用户找到内容——「搜索」过程产品设计

我们先看一个完整的搜索用户体验流程:有一个用户小明,进入一个APP之后,通过搜索功能查找相关内容,系统反馈结果,小明对结果进行浏览,最终找到目标对象。

整理抽象后的流程为:搜索入口(功能入口)→搜索页(关键词输入)→搜索结果页(相关数据列表)→目标结果页(详情页)。

下面我们按照这四个步骤分别探讨可能的设计方案,以帮助我们提高产品搜索功能的使用体验。

一、搜索入口

设计规范:Android/iOS

两大移动平台都有标准的搜索控件,尽量按照平台规范设计,使用原生控件。

设计层面:整体性、规范性、美学性。

技术层面:标准化组件,开发成本低、兼容性好、体验流畅。

PS:Android版本跨度较大,考虑部分原生控件兼容性稍差,可根据实际需求重新设计。

二、搜索页

关键词联想、关键词排序、热门搜索、搜索历史

1. 有效的关键词联想。当用户输入文字时,使用有效的自动提示,诸如词根识别、文本预测等都可以降低用户的输入难度、操作强度,有助于加快搜索提高效率。

京东(iOS)

2. 联想关键词排序。阅读顺序为从上到下。根据关键词相关性、文本匹配算法确认联想出的关键词排列顺序,提供最短路径,节省消耗。

若联想出的关键词,已经找到目标对象,则点击后直接跳转至目标结果页。

微信(iOS)

3. 显示最近搜索记录。提供搜索历史主要用于再次查询,帮助用户节约时间和精力。符合基本的可用性原则:尊重用户的付出。

搜索记录数量不宜过多,尽量不使用滚动条,太多的信息会造成过载且意义不大。若有必要,可以提供入口查看所有记录。

4. 可提供热门搜索。用户没有明确的搜索目标,推荐部分关键词,给用户提供选择,帮助用户了解趋势。 同时,推荐的关键词可以提高转化。非必须项,根据产品属性选择使用,推荐性、商业性较弱的产品,可不使用。

京东(iOS)

5. 显示搜索进度。从「搜索页」到「搜索结果页」的过渡,需要给出搜索进度提示,可使用动画特效完成转场,降低焦虑感。注意区分短等待与长等待。

三、搜索结果页

关键词回显、结果排序、结果数量、显式方式选择、过滤器

1. 回显用户在「搜索页」输入或选择的内容。再次查询是信息检索中关键的一步。在搜索框中留下初始的关键词,方便用户进行再次查询,让用户不至于重复输入。

2. 反馈准确或相关的结果。以合理的方式确定结果优先级,并把所有重要的结果放置在前面。关联性(优先级)排序:准确>相关>推荐。最好能基于自己数据库里的数据范围做匹配或推荐,提高准确度。

3. 纠正拼写错误。打字容易出错,尤其移动场景。 如果用户输入了错误的关键词,为避免因没有返回结果导致用户不得不再次输入关键词的不适,提供两种设计方案:

3.1 系统直接按照预测判断的正确关键词反馈结果,给出提示。

3.2 在结果页告知输入错误,提供建议关键词,或直接给出建议关键词之后的结果。

京东(iOS)

4. 显示搜索结果数量及分页。告知用户具体数量及位置,帮助用户在进行内容比较时快速定位;指导用户后续动作,如需要花费多长时间浏览、是否需要再次搜索。

5. 选择合适的结果页布局方式:列表、网格。若只有图片或关键文本信息,采用网格形式;若需要展示更多细节信息,采用列表形式。

5.1 提供展示方式切换选择。

5.2 网格布局形式的图片要适中,基于展示需求及美学性。

6. 提供过滤器。必要的筛选条件可以提高效率节省精力。一次搜索系统返回的结果过多时,通过排序和筛选条件缩小搜索结果范围,帮助用户更快更精准找到目标内容。

6.1 提供全站(综合)及分类查询。

6.2 排序及筛选条件分开设置。

6.3 筛选选项不宜过多(≦5个)。

6.4 提供筛选选项默认值。

6.5 若只有一个Filter入口,提供多选设置。

6.6 回显已设置选项值。

7. 尽量不直接显示"无结果"。原则上帮助用户寻找替代品。给出相似/相近关键词推荐;给出相似/相近内容推荐;文案友好。

四、目标结果页

一个关键原则:目标结果页与搜索结果页的关键信息显示应前后一致,否则容易造成用户的担忧。具体的内容设计及界面设计放在下一个系列更新。

一个优秀搜索产品基本要求:快速准确找到用户想要的。如果有可能,不要让用户花精力去找,直接提供给他。

愿你更进一步。


完。

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

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,800评论 25 707
  • 这周看了一本书——《移动应用UI设计模式》,与0-1岁产品经理分享: 其实全书就是把移动应用的表皮撕碎了来讲,从用...
    拾零阅读 1,403评论 1 9
  • 搜索功能无论在web端还是移动端,都是产品中十分重要的功能。文章主要从用户体验和产品功能、策略角度来分析,提出一些...
    史蒂芬宋阅读 2,761评论 4 44
  • 灯,在夜色中孤守寂寞, 我,在寂寞中静守希望。 梦,在希望中挣扎不安, 你,在不安中进退两难。
    墨凝枫霞君倾墨阅读 106评论 0 0
  • 【瓦罐态度】-喜欢瓦罐,就是我们的态度 BMW "咚~ 咚~" 不管它有多“老” 对它的爱,从没变过 细腻的原车漆...
    老特拉福德的猫阅读 265评论 0 0