网站搜索框设计诀窍

翻译：october
校对：toMMy
原文：Tips on site search box design



虽然很多在线购物者更愿意用导航链接浏览网站，但我们不应当忽视搜索框的重要作用。


如果来访的购物者清楚的知道想要什么，他们会很明确的使用搜索框。这种情况下购物者显示出了明确的购物意图，因此搜索框能够把该意图转变为真实的购买行为。

根据Fast Search提供的数据 (pdf)，30%的购物者进入电子商务网站后会立刻使用搜索框，超过30%的人通过导航没有找到需要的物品后转而使用搜索框。

那么，如何让这一切变得更加容易一些？以下是些小诀窍：


搜索框大小


允许用户输入较长的搜索请求，比如两个或者两个以上的词，这是现在的流行做法。那些查找具体电视机型号或者笔记本电脑型号的用户会倾向于使用较长的搜索请求。这意味着我们需要较长的搜索框。

理想的文本框应当能够容纳约30个字符，即5个单词左右。如果用户输入了更长的搜索请求，就无法看到全部文本。这不算糟糕，但如果搜索框能长一些，用户会更容易修改搜索内容中的拼写错误。

以Kelkoo为例，该网站为搜索框提供了足够的输入空间：




显化搜索框

搜索框应出现在页面的显著位置。许多网站倾向于将其放置在页面右上角，但将其安排在中间，购物者会更容易发现。Comet网站最近发布了新版首页，更加突出了搜索框（同时加大了搜索框）。Comet网站发现搜索框是有效的转化工具，所以做出了此变更。

旧版搜索框被放在了页面右边，如下图：



新版中，搜索框被明显突出：



提供搜索预测

搜索框中输入关键词时，用户必须用几个词来描述产品，并猜测电子商务网站会如何呈现该产品。



让搜索变得更加容易的绝佳方式，是在用户输入搜索项时给与搜索建议，正如Google Suggest。用户能用最小的投入获取想要的东西。

Borders.co.uk网站最近升级增加了这一功能：



允许用户缩小搜索范围

如果用户搜索的产品数量非常巨大，用户更愿意通过缩小目标限定搜索范围。

Amazon网站就是如此。你可以通过其18个目录缩小搜索范围，以呈现更加相关的搜索结果：


用标签明确标识搜索框

大多数的购物者很容易找到搜索框，但我们不应当让那些对网络不是特别熟悉的人为此花不必要的精力。

Waterstones网站虽然将搜索框放在页面左侧，但它清晰明确的标记出其搜索工具：



页面载入后，光标默认定位在搜索框内

这是个小细节，但能够让顾客更加容易开始搜索。Google及其他主要搜索引擎都是如此，这能帮助用户更加迅速的达成目标。

但并非所有电子商务网站都是如此。Kelkoo和Amazon网站载入页面后，都将光标默认定位在搜索框内，但在M&S和Next等网站中，用户必须移动鼠标进行定位，才能输入搜索项。

移除搜索框中现有文字

许多网站和下例中的Marks & Spencer网站一样，在搜索框中写入文字解释功能。点击搜索框时，文字自动消失，你可以自由输入搜索项。




如果搜索框中的解释文字无法消失，用户会感觉沮丧，他们必须删除文本再输入搜索项。值得庆幸的是，很少有网站犯这个错误，而迪斯尼英国网店恰恰犯了这个错误。