网页设计之搜索框该怎样去设计(下)
1、让搜索框尽量简单
搜索框设计还有一条原则,那就是简单易用。研究表明,一个没有显示高级选项的搜索框看上去更加友好,可用性也更强。所以,一般情况下,在给用户提供搜索框时最好不要提供复杂的搜索选项。
2、使用自动搜索推荐机制
什么是自动搜索推荐机制?以Google为例,当我们在搜索框中输入"Apple Watch 2",它会自动出现相关词条推荐搜索,这就是自动搜索推荐机制的表现形式。谷歌在这方面拥有绝对的发言权,从2008年开始,它就开始统计用户的搜索历史,整理词条推荐,以帮助用户节省时间,创造更佳的用户体验。自动搜索推荐机制能够动态地预测用户的搜索方向,帮助用户更快完成搜索。不过,在使用这种机制时我们也要注意以下几点:
确保自动搜索的推荐内容是有价值的。如果输入框中出现不恰当或无用的搜索推荐,这非但不能为用户的搜索提供便利,反而容易混淆和分散用户的注意力。自动搜索的推荐内容一定要基于用户的搜索历史数据来决定;
当用户在输入框输入关键词时,尽快给予用户推荐信息,比如在第三个字符之后,为用户开始提供即时、有价值的建议,降低用户的输入难度和工作量;
尽量为用户提供少于10个搜索结果,避免信息过载。
突出显示输入信息和推荐内容之间的差异;
3、让用户明白哪些可以搜索到
让用户知道在网站中可以搜索到哪些内容,也是一种能够提高用户对网站好感度的方法,这可以通过在输入框中添加占位符文字做到。下图是IMDB的网站,它在搜索框中添加了一些占位字符,提示用户搜索框中可搜索的内容,吸引用户进行搜索。随着HTML5建站技术的不断发展,这种形式的占位符添加在设计时也不没有什么难度。不过这里建议占位符的内容不要太多,避免给用户带来认知负担。
4、让搜索框处于用户预期的位置
当用户想要使用搜索框,却需要花费不少精力去找时,用户的体验就已经大大降低了。网站上的搜索框最好易于察觉,放在用户预期的位置,哪里才是用户预期的位置呢?下面这个图表是来自 A. Dawn Shaikh 和 Keisi Lenz 的一项研究结果,他们抽样调查了142名用户,了解用户对于网站搜索框位置的偏好。从图表中,我们可以看出大多数用户会在网站的左上角和右上角寻找搜索框,这主要是因为用户在浏览网站时使用F型扫视法,而网站右上角是大多数用户的首选区域,因此在设计搜索框时我们最好把它放在顶部靠右或顶部居中的位置。
小贴士:
在理想情况下,搜索框的设计应和整个网站的设计风格保持一致。不过在视觉上要略微突出,便于用户发觉它的存在;
网站的内容越多,搜索框就应该越明显,确保输入框和按钮能够与背景区域相互区别;
5、合理的输入框尺寸
输入框尺寸太小是最常见的搜索框设计错误。不少网站的输入框都太小,虽然可以容纳较长的内容,但部分内容却是不可见的,这种设计的可用性很差。由于视觉范围的限制,用户在输入内容可能会下意识觉得只能采用短的、不精确的查询方式,或是输入了较长的关键词,却在修改时遇到麻烦。因此,小飞建议使用能够根据输入关键词长度而变长的输入框,这不仅可以节省屏幕空间,还能给予用户充分的视觉提示。