注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

无线时代辐射无穷

抓紧生宝宝,小心辐射

 
 
 

日志

 
 

网站站内搜索的产品设计及应用  

2009-10-26 17:37:47|  分类: lucene |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

如何搞定站内搜索的产品设计及应用(上)http://blog.xiqiao.info/2009/06/02/343

如何搞定站内搜索的产品设计及应用(中)http://blog.xiqiao.info/2009/06/03/357
一、站内搜索应用

站内搜索的应用受到越来越多的重视,以前出于技术成本和内容规模的原因,大家使用公共应用来凑合这个事,或者干脆没有。但是现在有钱了,信息量和信息类型的差异化和几年前也完全不是一个级别了,有越来越多网站对站内搜索有了极大的依赖。

对于分类信息、电子商务、点评类、视频和资源站,站内搜索应用简直就是生死线。

对于专业领域门户、综合社区网站、以及新型交互应用网站,站内搜索也在扮演着重要角色,拉升活跃度和流量,提升网站整体的信息质量。

站内搜索应用分为2个部分。搜索入口和搜索结果页面

1. 全局搜索入口的设计原则

  • 使用显眼的设计,全站统一样式和位置。位置通常是位于第一屏的居中或居右。

    搜索框
    搜索框

  • 搜索框中应有提示文字。(比如:请输入关键字…或者 关键字、分类、url…),以在视觉上标识该input框的功能或提示可行的操作。
  • 焦点功能。页面初始化时和input输入框失去焦点时 显示提示文字, 鼠标聚焦搜索框时 消除提示文字。(不要使用text框的默认值,我们曾在客户的统计数据里发现每天有上千条关键词为“请输入关键字”的搜索请求,浪费资源。更不要使用背景图片-_-!!!)
  • 输入词智能(模糊)匹配提示(search suggest),这个最近也逐渐成为标配。最初此功能用于在拉丁语系网站中协助拼写,现在发展为通过和本站内的搜索请求的趋势关联,智能提示的搜索词可以在一定意义上引导用户进行集中而热门的搜索,获得更有效的结果,以及拓展的关联搜索。
    输入词智能(模糊)匹配提示,search suggest
    />

2. 分类搜索和搜索结果分类

许多网站会在全局搜索入口中放置分类搜索下拉菜单(select)。

  • 好处:对于通用搜索和拥有复杂信息类型的网站而言,可以帮助熟练用户精确搜索目标,减少点击次数。
  • 坏处1:根据我们掌握的多个各个类型的站内搜索log结果分析,这个分类下拉的使用率非常低,不足2%。
  • 坏处2:互联网用户的搜索习惯是被通用搜索引擎培养的——直接输入关键字。用户总是先直接输入关键字,除非发现找不到结果,才会返回来寻找并使用分类搜索下拉,这样设计反而变成是反用户的了。

许多设计师混用了 “分类搜索”和“搜索结果分类”这2个概念。

分类搜索:针对不同信息数据类别,搜索需求间有互斥性,分类搜索的搜索结果间不存在交集。

搜索结果分类:针对不同内容类型,将某一搜索需求 按不同维度的属性进行的二级分类或筛选,搜索需求是一致或可容的,结果之间可能存在交集。

我们拿豆瓣的分类下拉菜单举例:
豆瓣搜索下拉菜单

书籍/电影/音乐都是属于内容类型,(且输入框的提示把它们同质化了)。它们之间是搜索结果分类的区别。

内容和小组、成员、活动是同级别的类型。它们之间是分类搜索的区别。

用户搜索“暮光之城”,用户不会排斥在结果中同时得到“暮光之城”的电影类、书籍类、原声音乐类信息,都是对内容的搜索需求。但是可能会排斥小组/活动/成员类型搜索结果。想搜索小组和想搜索活动是完全不同的需求,一个想搜仅仅想搜索书籍信息的用户并不想看到小组中的讨论。
_________________________________________________

再来看淘宝的全局搜索入口:

淘宝全局搜索入口
宝贝、店铺、打听是不同的搜索需求,它们是分类搜索的区别。

商城、拍卖、全球购 和宝贝都属于同一内容类型,搜索需求一致,信息结构是父子级的关系。它们也属于搜索结果分类
这3个分类是否有单独作为分类搜索存在的必要,你使用过这3种分类吗?

下列设计搜索入口的一些方法和原则:

  • 避免过度设计。对于搜索目的或内容类型单一的网站,放置分类搜索下拉是不必要的。比如专业视频网站,餐饮点评网站等等
    这是一个专业视频网站,从图1和图2中可以看到,虽然分类搜索里选择的视频和专辑这2个分类,但是当选择视频分类去搜索时,还是会在第一行输出了专辑类的搜索结果。

    专业视频网站搜索结果页面 搜索结果分类

  • 把搜索结果分类放到它该去的位置——搜索结果页面通过统一的搜索入口进入搜索结果页面后,用户可根据此列表了解 搜索结果的分布,筛选所需分类。
    这种设计可以清晰地展现信息结构,信息规模,帮助用户明确搜索目的,精确筛选。
    1 简单化处理:在全局页面放置通用搜索入口,不带分类下拉。同时在频道页设置单类的搜索入口。 2 复杂化处理:在首页放置高级搜索工具箱
    (不可代替通用搜索框!)
    在频道页设置单类的搜索入口  高级搜索工具箱
  • 尽量避免存在多个分类搜索之间互斥的设计
    你是否遭遇过直接在淘宝的input框中输入店铺名称而得不到任何有效结果?
  • 使用Tab manu (选项卡)代替 下拉菜单。
    你更习惯的是下面哪一种的方式?

    搜索,选项卡

  • 有些分类选择可以用高级搜索选项来代替高级搜索筛选 在这里 使用高级搜索中的筛选来表现可能会更好。高级搜索筛选
  • 在需要使用多重维度的搜索条件来定位时的处理
    多搜索条件定位

    比较两者的设计,高下立现。

3.全局搜索结果和分类搜索结果

当一个网站同时拥有全局搜索入口和单类搜索入口。会产生一个问题:单类搜索可得出单一精确的搜索结果,而全局搜索得出的结果页面是多种单类搜索混合而成的。如何处理好这种混合,并有效引导用户得到自己想要的信息?

1 最简单的方法: 混排+分类标签。

搜索结果混排

2 华丽的方法:分区块显示。(对服务器压力较大,分区块搜索会形成多次请求)

搜索结果分区块排

分区块显示要根据网站自身的产品特性和内容重心来安排,

不能不分详略,事无巨细把所有类型都均等地列出来。多信息等于无信息。

二、搜索结果页面布局

1. 常用功能模块

站内搜索常用功能页面

站内搜索所有功能模块设计DEMO

点击小图显示大图

上图只是是为了演示所有通用功能模块的设计demo。并不建议像这样设计产品,用户根本不会用到那么多功能,过度设计会导致开发成本和用户的学习成本大大增加,也使页面零乱。

应该根据各自网站的资源、优势、类型、目的来选用恰当的模块进行设计。关于这一点请见后文

2. 布局问题

先来看2个案例

4栏搜索结果案例

上图为4栏的机票搜索结果页面,中间2栏为往返双程的搜索结果。信息密度太高,页面拥挤,用户在寻找自己所需的结果时,视线会不断被干扰。在左栏纵向放置的筛选功能区块,位置和高度导致用户的正常使用流向被打乱,最右边的推荐和广告区也很难吸引用户阅读和点击,

双栏搜索结果案例

上图是2栏的机票搜索页面。页面布局宽松,信息密度分布正常。日期的Tab Manu、筛选功能区和搜索结果区的分布和排序符合用户使用流程。 右侧的推荐信息区也容易吸引用户视线。

搜索结果页面的布局原则是简洁、突出重点、目的明确。不能分散用户获取搜索结果的注意力。

下面是一些设计建议

  • 使用两栏布局。内容型搜索建议比例为三七开,不要让搜索结果内容区过宽,影响阅读体验。
  • 剔除无关元素,对于网站统一布局中的公告、推荐、广告、排行之类的元素,应该割舍。布局越清晰明了,干扰元素越少,用户越容易顺利达到使用目的。
  • 主搜索框 位置全局(或主内容区)上方居中。在搜索结果页面,搜索框不必和全局设计统一,缩于一角。
  • 处理好多个搜索框之间的层次关系(在同时存在 主搜索框和单类搜索框/高级搜索工具箱的时候)。
  • 信息密度不要过高。不要试图在搜索结果中列出所有信息元素。
  • 筛选、排序等功能区要注意产品逻辑和分布层次。很多设计师在处理信息的多个维度缺乏逻辑和结构意思,弄得页面看起来有4~5层横导航。
    失败的筛选区设计

    这一堆选项卡,你眼花吗?

  • 根据内容属性的不同,对搜索结果使用合适的显示模式。(图片、缩略图+内容、内容列表、表格、内容+表格 等)
  • 正常搜索结果和 推广类搜索结果(竞价或广告)的设计应该有清晰的区分,让用户能很容易区分这两者。
  • 搜索结果中的 匹配关键字 应高亮显示

三、不同类型网站的站内搜索应用特点

站内搜索普遍意义上可以分为两类:内容搜索和比较搜索。特殊搜索(如地图搜索,)不在讨论之列。

典型的内容搜索:新闻(资讯)、视频、图片、音乐、人、论坛(小组)、帖子。对于内容搜索,基于分词的全文搜索是主要应用,通过分词、概率等对数据进行筛选排序,得出匹配度高的搜索结果

典型的比较搜索:购物、餐饮、旅游、租房。 分类、筛选、排序等功能更为重要。搜索结果和用户行为关联更大。有大量基于数据库的搜索。

1. 内容(帖子、话题、博客)搜索 。

内容搜索 产品原型

  • 主要应用: 相关度排序。
  • 引导流量:相关内容推荐
  • 布局特点:不需要过多的功能模块,比如高级搜索、二级分类、筛选和排序。而应该重点优化设计 搜索结果、关联搜索、结果类型分布。

2. 新闻类搜索 最重要的是时效性

  • 主要应用: 更新时间+相关度排序。 为什么把新闻类搜索从内容搜索中单提出来说,因为新闻搜索的结果排序,更新时间要的优先级要高于相关度。如果不注意这一点,会出很严重的后果。
  • 引导流量:热门关键字,“你可能还对这些关键词感兴趣”
  • 布局特点:同内容类搜索。

新闻类搜索还有一个高级应用,就是新闻关键字的趋势比较。一般网站可能没有这个开发实力和预算,只有成熟的SaaS才有可能提供类似的高级应用。

3. 多媒体搜索 图片/相册/视频/音乐

多媒体搜索 产品原型

  • 主要应用: 分词+过滤,因为许多图片的alt是直接使用文字标题,所以正确的分离出关键词很重要。

图片常用的过滤包括:文件类型、图片尺寸、风格、图片色调。

视频由于没有统一的描述协议,暂时也没有成熟的OCR技术,所有视频搜索主要基于tag,数据库分类和人工填写的描述。视频常用的过滤包括:分类、时长。

音乐常用的过滤包括:文件类型、专辑、歌手、风格、语种、源状况

  • 布局特点:图片和视频类搜索由于结果的展现主要是缩略图,搜索结果区域的面积要尽可能大,建议使用全屏单栏设计。图片搜索需求的目的性很明确,除过滤外,没必要放置其它功能属性和关联搜索。

多媒体基本都存在专辑或系列,专辑和系列是基于人工分类的更准确的检索方法,包含更大的信息量。应当通过精确匹配后,优先列在搜索结果中。

4. 用户搜索:

  • 主要应用:高级搜索、重音或拼写纠错提示。
  • 引导流量:“搜索该词的用户还关注什么”,“你可能还对这些关键词感兴趣”

对人的搜索应使用精确匹配,根据数据类型支持高级搜索选项的过滤,还有一些特殊的比如在线状况、活跃程度、信用等级等。
对于人名应提供重音和拼写纠错提示。

5. 消费搜索:

消费类搜索在过类别属性的侧重点上有很大差异,购物搜索:价格、信用、热度。租房搜索:匹配度、地域、价格、其它属性。餐饮搜索:地域、菜系、热度、价格。旅游搜索:时效性、价格、折扣

消费类搜索 产品原型

  • 主要应用: 多维度属性过滤,支持多种排序,多种搜索结果显示形式、搜索结果对比。
  • 引导流量:搜索结果(竞价推广),“搜索该词的用户还关注什么”,“你可能还对这些关键词感兴趣”,热门关键字、历史记录。
  • 布局特点:应该重点优化设计二级分类、筛选、排序等模块。

一个消费搜索的产品设计是否成功?我觉得有一个衡量方法:看用户是否可以通过不打任何字,光用鼠标也能顺利完成检索需求。
站内搜索的筛选设计

四、高级搜索功能的设计

分类、过滤、排序这3个是应用最普遍的高级搜索功能。

分类:帮助用户逐层定位所需搜索范畴,一般通过罗列所有分类项的方式展现,可一级级展现多层列表。

站内搜索的分类设计

过滤:通过在搜索结果中排除某一维度中的某个或多个属性 来帮助用户剔除不需要的搜索结果。一般通过单选、多选、下拉菜单、选项卡、标尺等形式展现。

排序:帮助用户按某一属性对搜索结果进行重新排序。

1. 排序的设计

排序看起来简单,但是有问题的设计确很多。

  • 不分正序倒序
    网站站内搜索的产品设计及应用 - wolfgangkiefer - wolfgangkiefer的博客

    人均花费排序,不分正序倒序,那默认是从高到底,还是从低到高呢?右图是较好的设计

  • 使用排序按钮,但是表意不清,增加用户学习成本
    排序按钮的设计
    猜猜左图4个操作排序的按钮分别是什么意思?销量、价格、折扣、上架时间。(除了第二个,其它我打死也想不出来)
    右图是较好的设计
  • 未明示哪些选项可允许排序操作
    未明示哪些选项可允许排序操作
    这里面有些允许排序操作,有些不允许。用户在点击的时候都得小祈祷一下…
  • 排序和过滤功能混淆在一起
    排序和过滤功能混淆在一起

    图中有一堆看起来功能相似的下拉菜单,但里面有的是排序操作,有的过滤操作。排序操作不会减少搜索结果,但过滤操作会。用户点击完其中某个下拉菜单,可能页面中搜索结果就为空了,用户能搞清是自己干了什么导致的吗?

  • 默认排序是什么?
    正确的排序设计
    上图 排序下拉菜单的设计非常好,同时有下拉菜单和按钮,同时有文字说明和图示箭头,一目了然。
    但是谁能告诉我,默认排序是基于什么的排序?
    常规意义上默认排序是基于相关度的排序,是认为用户无法理解相关度这3个字吗?

2. 过滤的设计不好用的过滤器

分类和过滤是两个容易混淆的概念,最常见的错误是把分类 设计成了过滤,让产品反而很难用

如右图:这只是多组看起来像过滤器的分类列表而已,用下拉菜单的设计形式来代替索引链接,用户品牌维度下:用户只能选择某一个品牌,匹数维度下:用户只能选择一个固定区段。

一个真正的过滤器应该能允许用户在终于的信息维度上,自由取得或排除部分搜索结果。

下面是两种功能的正确设计

正确的站内搜索筛选功能设计

另一个常见错误是使用错误的表现形式来破坏用户的筛选自由度

单选模式的筛选功能

如上图:如果我理想的出发时间是在8:00~10:00之间,使用这个过滤器,我就得搜索两次。

而下图这两种都是不错的设计模式。

自由划分区间的筛选功能

当我搜一个酒店,只想去7天、如家、汉庭这几家,要求有免费宽带和餐厅。

如果是品牌和设施这两个维度的筛选形式做成了下拉菜单、选项卡或单选框,就只能歇菜了。

最好的设计是将搜索选项做成多选框,用户可以任意组合。
排序和过滤功能混淆在一起

如果搜索页面空间比较紧张,没有太多位置放置筛选过滤器,下面的设计也是一个办法。将排序和筛选结合起来。

混合类搜索和筛选功能

3 高级搜索:

高级搜索是一个比较传统的应用,它的特点是给出了多个input框,指望用户通过在固定位置输入每个维度的关键字,来获取精准的搜索结果。

问题是如果用户输错了一个地方,可能就得不到任何有效结果。

下图的设计让用户很容易输错。

不好用的高级搜索

下面这个改进过的高级搜索要好用得多,除了减少用户动脑子想关键字的时间,动键盘打字的次数,关键是能是输入条件规范,不会出现用户的理解错误或输入格式错误。

不好用的高级搜索

  评论这张
 
阅读(476)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017