搜索框和菜单导航是电商用户的两大入口,其设计的重要性不言自明。搜索框的设计涉及到搜索框位置、外观设计、搜索输入框长度、关键词智能推荐、搜索框热词推荐等。本文着重讨论搜索输入框长度对用户体验的影响。
电商网站搜索框长度现状
对国内常见电商网站的搜索框长度进行了汇总(见下表):
电商网站搜索框长度(px)搜索框高度页面总宽度搜索框长度/页面宽度
乐淘

171

27

990

0.17

凡客诚品

186

24

980

0.19

拍拍

235

27

985

0.24

QQ商城

252

26

985

0.26

好乐买

260

20

990

0.26

易迅

326

25

1235

0.26

新蛋

321

36

1200

0.27

国美电器

352

36

1210

0.29

库巴

356

32

1200

0.30

麦包包

290

34

960

0.30

当当网

371

26

1200

0.31

QQ网购

325

30

985

0.33

V+

400

30

1210

0.33

京东商城

416

30

1210

0.34

苏宁易购

444

38

1190

0.37

天猫

420

26

1000

0.42

阿里巴巴

460

28

990

0.46

淘宝网

467

28

998

0.47

亚马逊

740

22

1333

0.56

一淘

980

37

1200

0.82


单纯比较搜索框长度不是十分合适,还要考虑到页面宽度——跟人一样,矮一点无所谓,关键是身材比例要黄金,因此列表按照“搜索框长度/页面宽度”项进行了排序。即便如此,当前的排序结果跟以长度排序的结果差异很小,为方便讨论,我们仍然以长度论英雄。
乐淘搜索框最小、一淘(这个不算是严格的电商网站)最大。一淘网搜索框的长度甚至超过了其他网站的页面宽度,占据了网站页面宽度的82%!

长171px的乐淘网搜索框看起来有点太低调了,其长度只有页面宽度的17%。

搜索框长度集中于300px区间和400px区间,是为主流。页面宽度方面,1000px以上的网站有11家,以下的有9家。90%的网站搜索框长度/页面宽度之比低于0.5。
搜索框多长才好?判断标准是什么?搜索框长度对用户体验有何影响?
1. 是否美观、协调,能增加用户输入和搜索的欲望,带给用户对搜索结果的良好预期
好不好看、协调与否,这些感性的指标往往难以量化,但是可以通过一定样本的用户调研获得定性数据,找到用户心中最协调、美观的长度比例。从设计师的角度,多长才好,需要看页面整体设计,包括页面宽度、页面布局和风格等。
一个设计得好的按钮,我们会忍不住点击,搜索框也是如此,这种点击或输入的“欲望”程度(包括用户对搜索结果的预期)都可以通过用研获得量化。
2. 是否易于发现。
单就这一条标准看,越长的搜索框越易于发现。当然,搜索框位置、外观设计在更大程度上影响着搜索框的可发现性。
3. 是否方便文字输入和完成“搜索”动作。
显而易见,短输入框不利于较长关键词的输入,修改被遮挡的关键词完全不是一件美妙的事。另一方面,长输入框则有可能给“搜索”动作的完成带来麻烦。设想用户将鼠标置于输入框左端并输入关键词,如果该用户没有使用键盘快捷键(一般为Enter键)进行搜索,那么他就需要将鼠标从左端移到右端的“搜索”按钮,这段移动距离随着搜索框的长度增加而增加。搜索输入框也并非越长越好。
一淘网页面和搜索框都非常宽,显得大气,但是从输入框左端到“搜索”按钮的长度实在太长,想通过鼠标完成搜索动作需要横跨整个屏幕,比较费力。当使用触摸板时,这种费力感又会增加若干倍。
5. 电商网站对“搜索”功能的需求大小影响着搜索框长度(感谢崔立学的评论意见)
搜索框设计得长短,可能跟网站本身对“搜索”功能的需求大小有关系。如果笼统地将上述电商类网站分成两种:综合类(例如淘宝、亚马逊)、垂直类(例如麦包包、好乐买),我们会发现综合类电商网站的搜索框长度要明显长于垂直类电商。这是因为综合类电商网站对搜索框的依赖要远远高于垂直类网站。
从个人网购体验看,在淘宝购物时,首先用到的大都是搜索框,而在好乐买购买鞋子时,却很少能用到搜索功能。
小结
判断搜索框长度的标准不止于以上几点,从设计和用户体验的角度,希望本文可以引发大家的讨论与思考。设计除了“设计”本身,还牵涉设计的主体——产品,设计要为产品功能服务。回头看文章标题“是否越长越好”,在提出这个问题的同时,其实已经给出了答案:当然不是,当我们不需要搜索框时,搜索框的长度可以为0.
请您欣赏: