文本框中自动完成的应用

产品经理

 

近来积累了一些关于自动完成的应用方式,今天将其扩展延伸并整理了些常见的应用方法供大家一起学习。

“自动完成”的设计思路源自于Poka-yoka预防机制。是一种自动纠偏方法,在生产中用以防止人为失误发展成为最终产品缺陷。

网页设计中自动完成在输入框的应用已很广泛,属于反应性界面的强大模式。能够尝试猜测用户输入的文字,并且动态的搜索出适配的结果并推荐给用户,辅助完成输入。目的是避免用户打错字,起到提示作用,智能预测用户心理期望,从而确保他们的搜索更有效率。

优点:[br]
“自动完成”输入框能预防错误。用户经常在输入几个字的情况下就能在推荐列表中发现正确的名称,而不会因为笔误找不到适配的搜索结果。

防止用户为已经在存在于数据中的名称创建多条数据库记录。

这种输入框列出的搜索结果不会分页。因为搜索结果是随着输入的文字增加而变化的,所以就在当前页面中。因此完全没有必要点开“下一页”,查看其余的结果。

这个功能的灵活性使用户更加信任这个网站,使事情变得简单可依赖。虽然这个功能有很多值得夸赞的地方,但它也同样有一些局限性。

局限性:[br]
当用户搜索一些小范围的数据时,例如某个学科的分支目录,他会很有用,但是对于在google和yahoo 这样的网站中进行广域搜索的用户来说,并不一定有用。

首先,那些盯着键盘输入文字的用户通常注意不到推荐列表,虽然已经把一切都送到眼前,他们还是看不到。有些人偶尔会在输入完想要的内容后抬头才发现推荐列表,但他们往往都是敲了回车键才抬头,所以根本没看清楚列表里面是什么。

其次,用户会因为推荐而放弃自己先前的主张,但其实他们自己想输入的文字很可能比推荐的词汇更加有效。原因是用户认为系统推荐的将会产生更有效的结果,也有可能他们认为这些搜索词是开发者希望他们使用的词汇。

“冷启动”是个问题,也即最初可能没有任何用户行为数据。这时候需要结合热点挖掘的方式给用户一个最初的感受,不过需要很好的把控质量,并进行灰度放量,AB test。

suggest的一些质量评测点:

  1. 垃圾词过滤。比如带无意义符号的查询串要进行处理。

  2. 意义重复的query,比如“天上人间照片”和“天上人间的照片”属于同意。

  3. 在去重复基础上考虑多样性。

  4. 匹配模式,前缀匹配、后缀匹配。

  5. 中英文(拼音)混合串的质量。

  6. 错别字智能纠错。

  7. 政治、黄词、零结果等的过滤。

  8. 新闻类检索需要引入时新性。

  9. 如果有类似阿拉丁的直达区,考虑直达区策略以及展示样式。

  10. 数据方面主要看CTR。但是要注意,用户只要输入query,就会调用suggestion,多一个查询词,suggest就又检索一次,如果以单纯的检索量做分母是不合适的。应该以一次完整的检索行为作为分母,以点击提示词的次数为分子。

Google suggest是Google搜索引擎最重要的人性化服务之一,即在搜索栏输入框内使用了此功能,使用户在输入搜索关键词时能及时调整关键词推荐列表,以 获得最需要的搜索结果。其中通过各种搜索请求的流行度来确定这些预测推荐请求的排列顺序等。目前中国的版本已经没有这个功能了。

百度

产品经理

 

Quora

 产品经理

 

A fancy Apple.com-style search suggestion (演示地址)

这是一个使用HTML/CSS,jQuery,MySQL PHP等技术实现的Search Suggestion。

产品经理

 

TextboxList (演示地址)

这个Mootools插件能够将普通的文本输入框,转换成拥有Autocomplete功能风格类似于Facebook的文本输入框。支持任意类型的数据源(XHR、Json)。

产品经理

 

Tokenizing Autocomplete Text Entry (演示地址)

一个jQuery插件能够让用户从一个预设的列表中,选择多个项目。并提供Autocompletion功能来帮助用户搜索项目。支持通过CSS控制和定制布局。能够缓存搜索结果减少服务器加载次数。支持用鼠标或键盘来选择项目。提供平滑的动画数据加载效果。

产品经理

 

有道

有道为suggest添加三栏显示、网页预览等功能,帮助用户更快的找到答案。在优酷等视频网站中也有此功能。

产品经理

产品经理

产品经理

 

优酷

产品经理

 

via:百度UEO

关键字:产品设计, 文本框, 自动填充

版权声明

本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符,请点击 举报 进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部