代码改变世界

【转】我们的电子商务网站—Webtogs的发展历程

2008-01-29 09:49  Jacky_Xu  阅读(529)  评论(0编辑  收藏  举报
过去的11个月里,我和我的团队在一个新的电子商务网站webtogs.co.uk上销售户外运动和探险装备。069月份成为了我们新的开始。

一切从零开始

一个网站设计的好坏就看它是不是很好地将网上的产品展示变成实际的交易,我们所做的每件事都要达到最好的目标。平均来说,电子销售商的商品成交量只有大约2%。但是,作为最重要的一个方面,易于操作的设计可能使成交量接近5%。有电子商人曾做过研究,有些美国的网站成交量超过了12%。所以说网站的设计和易用性会明显地影响到商务利润,付款成交率,以及很多其他的利益。

亚马逊花了很多年在书上做各种评估手段来测试他们网站的新做法。有个内部人士告诉我说,虽然他们并不满意网站的某些地方,但这是他们迄今所知的可能设计中最能将浏览展示转化成现实交易的一种。

‘简单为上’是另外一个宗旨。在设计一种应用程序或一个网站时,要将天下所有的东西都搬进来是很容易的(我们刚开始时就是这样做的!)。随着Webtogs的设计的发展,我们取消了很多不必要的东西。我们还在办公室的墙上贴了张这样的横幅:“你所卖的不是华丽的界面……”。当你看一个好的产品页的时候,你应该看的只是产品本身。

我们最大的(或即将成为)竞争对手Cotswold Outdoor最近更新了他们的网站,做成了全新的flash动画展示。至少在我看来,这是典型的形式主义,而且我敢打赌最终他们的成交量会受到影响。

那么电子商务的追求目标是什么?正如前面所说,就是100%地将展示商品卖出然后再摆满。很显然有很多因素会起作用,不只是销售商的品牌认知度,线上线下的市场策略等。不过本文的目的是谈论我们如何做的,谈论网站本身并试图解释为什么我们这么做。

提高要求

我见过一篇很有趣的文章——《17条成功电子商务网站的新规则》,文中列出了一些很重要的观点,说明哪些是不该做的,如何提升顾客的购物体验。有趣的是,这真的只是条起跑线而已。

对想要成为优秀者的电子商务网站来说要求还要提高。当前卖同样的或类似的产品的网站太多了。相比于5年前来说,要想保证顾客的回头率,获得稳定的增长,光靠不错的顾客体验,良好的客服和及时准确的送货已经不够了。

页面设计

我们刚开始时设计的页面可说糟透了。我们没有全盘考虑清楚整个市场,犯了很多堪称经典的错误。
The first design for webtogs.co.uk

我们最大的5个错误是:

  • 我们开始时没有成套的真实的,相关的产品,很少或没有考虑产品的特征(规格,颜色等)和这些设计这些特征的作用。
  • 我们没有考虑区分性别,导致设计非常男性化。
  • 界面太华丽,盒式的三栏设计使得用于布局的空间非常有限。我们总是遇到问题,产品名称,一些细节,产品描述过长,标志太长(事实上什么东西都太长了),根本不适合布局安排。
  • 我们在广告和文字链接上花费太多了。虽然现在这些花费也有所见效,但对于技术性很强的户外运动服装、鞋类和装备,这些花费并没多少实际用处。
  • 我们完全忽略了品牌引领的策略,有评论认为做任何一个电子商务网站都卖品牌货。

第二代的页面设计可以看到右侧有了很大改动。这次我们引入了一个更大更有经验的工作团队,有了几名设计的专家,有了菲·威尔金斯的加盟,他提出了与他在Kelkoo时很不同的高明的见解。

目前我们网站已经是第四代了。我们将发展细分成多个步骤,下一个版本里将会更少评论而加入更多的有趣的产品特点。
Version 4 of the design for webtogs.co.uk

在第四代里,我们做出的最大的5个改进是:

  • 现在的网站结构是围绕产品安排的,可通过AJAX实时查库存确定规格与颜色的搭配。这使我们可以通过规格与颜色过滤查找结果,查找更多的相关结果和获取更多的成交量(完全有可能)。
  • 设计的性别色彩更中性,作为全球元素可作性别选择,闲时切换产品显示。由此带来的成交收益非常明显,因为我们并未忽略这个40%的市场部分。
  • 目前品牌导航成为了网站的核心,搜索系统集成了‘根据品牌’菜单系统和品牌标签。用Google查查我们业内相关的关键词就会发现会显示超过60%的产品相关搜索,包括品牌名称。我想其他领域的大部分市场也都应该达到这个水平。
  • 广告,短片和大标题的图片都加入了完善的产品匹配引擎。这个引擎可以自动将产品配对,推荐相似的或免费赠送的产品,更灵活地进行交叉销售。我很期待根据销售量来看这个改变是否正确。我可以肯定现在我们的风格已经不再华而不实和掺杂很多无关的广告了。
  • 页面比之前朴实得多了,登陆与结果等页面上的产品展示像素利用率提高了500%

屏幕上显示大量的产品

产品的像素利用率越高,网站就越好,是这样吗?这确实是一条很多关于这方面的文章所未提到的规则。我们在此之上花了不少的功夫。我们看成人是如何做事的,与任何可能的人交谈,看大量的相关文章,测试我们自己如何使用电子商务网站。

我们50%的研究支持用网格式展示,不管有多少行,每行展示5~6个产品,如Play,Gap等网站的做法。
Sample grid view layout from webtogs.co.uk
另外50%的研究支持列表式的详细展示,每件产品有很多讯息,但产品的像素利用率不高,像亚马逊和其他的一些网站的做法。
Sample list view layout from webtogs.co.uk

所以,最终我们们两种方法都采用了。每个产品结果页既可以以每排5个的网格式显示,又可以按详列式显示。目前暂时默认的是按网格式显示,因为我们认为这样会稍好一点点。如果用家改变浏览方式,我们就会记住这个设置并在以后他的浏览时都使用这种方式(通过cookies信息来实现)。

如果用户是在用详列式浏览,我们还允许改变产品的颜色和看放大的图片。

这种网格/详列式浏览有一个很不错的附加效果,就是可以从详列式浏览中直接购买,不必点击打开单独的产品页。Gap在他们的网站中就是这样做的,我很想知道这样做是否能提高成交量。
Screenshot from gap.com

我们如何将事情做得更好?

在我们的网站能存活之前,我们输不起。基于这种思想,我们组织了一个40人的封闭测试群。我们将整群人按性别分成大致相同的两半,尽量合理搭配懂技术和不懂技术的人以及不同年龄段的人。

隔几个星期我们就发布一个网站的新版本,然后请测试群来测试新性能。我们的测试版本每一页底部都有一个文本框,用来发表意见或指出bug。用户登陆进来后,我们就跟踪看他们点击了什么地方,看哪里,当然还有他们给我们的意见。我强烈建议要做相似的项目的人都来用用这种方法,事实证明这种办法非常管用。
Sandbox comments box from webtogs.co.uk

我们从封闭测试员那里学到的最重要的5件事:

  • 你无论怎么做一个东西它都不会太显眼。按钮永远不会太大,要让用户注意到某些东西,背景的对比相当重要。头几个测试版里,我们讶异于他们忽视了网页上的很多内容。
  • 一个产品你怎么做都不能把所有的细节表现出来。
  • 如果要让客人填写表格,一定要给他们尽量多的帮助(比如自动检测)。
  • 越有经验的用户在一个页面上停留的时间越短,如果他们能看页面内容的10%那你就该感到庆幸了。
  • 男人几乎都是一开始就想好了要买什么东西,而女人则倾向于随意看各种东西,甚至会去看一些毫不相干的页面。

如果我们有机会再写详细一点,我们会谈谈网站的其他一些问题,比如说自动检测程序,产品页面的细节,还有如何将社会因素考虑到风险之中。很高兴能开诚布公地谈论这些,我们抛砖引玉,当然也希望能有各种回应。