当前位置: 首页 > 图文教程 > 网页制作 > 心得技巧 > 卓越亚马逊和当当网购物车设计对比

心得技巧
IE8 Beta 1两个地方需要大家注意
提高网站性能中内容有关的10条原则
网页设计者应该从三个方面优化网页
Web 设计 实现干净代码的12条定律[图文]
网页设计必备工具 firefox Web Developer插件 CSS工具组教程
UCenter Home 站点添加统计代码
9款很棒的网页绘制图表JavaScript框架脚本
提高网站可用性的10个小技巧
网站维护页面的列表制作技巧
B2C 网站用户体验细节设计参考
收集12个实用的网页在线工具
设计参考 漂亮和原创的博客设计
收集25个知名网站标志中使用的字体
极尽简约的网站设计实例
个性化创意鲜明的网站设计实例(30个)
水平滚动的网站设计 小结
更受欢迎 更具创造性的深底色网页设计实例
有创意的关于我们网页页面设计
整洁漂亮的网页设计的4项原则
设计参考 WordPress建站成功案例

心得技巧 中的 卓越亚马逊和当当网购物车设计对比


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2010-01-03   浏览: 41 ::
收藏到网摘: n/a

当当网与卓越网是目前国内最大的两个卖书网站,也是最相似的两个网站,做为老牌的电子商务网站,经常将两者放在一起对比分析,本文主要从网站中的购物车设计来对比两个网站对于用户体验的友好程度。

第一站,当当

1)进入购物车之前

  • 搜索书名,居然没有输入提示!
    意见:太 out 了,这个应该算是标配了吧。
  • 点击搜索结果里面的对应条目,弹出新窗口进入详细信息页面。
    意见:虽然弹出新窗口基本上已经是中国网民最喜闻乐见的体验了,但我认为也不能乱用。我已经找到了我要的东西了,你还留着这个结果页面搞球啊,我还得费劲把它关了。当然了,我这里是基于使用精确搜索的场景得出上面的结论。使用模糊搜索的场景,保留结果列表页是说得过去的,但我觉得还是需要分析下搜索数据,看哪种比例高。当当购书整体走下来,最突出的问题就是弹出的新窗口太多了。
  • 在书籍详细信息页面里,点击“购买”,又弹出了一个新窗口进入购物车。好吧,我忍了。

2)购物车内
上图是当当的购物车推荐区域,标题是“根据您挑选的商品,当当为您推荐”。
  • 位置,横在页面上部。
    意见:放在这里应该是觉得它比较重要,但在设计上与下面的“已购商品”产生对比,被弱化了很多。
  • 每个推荐商品,显示名称/市场价/当当价,共 3 项信息。
  • 名称有显示不完整的,鼠标放在链接上会提示完整名。
    意见:不能够直接显示完整商品名,感觉不太好。
  • 推测当当应该是认为,市场价/当当价对比,是用户购书关注的一大指标。
  • 推荐条目总共 8 条。
    问题:数目是怎么确定的?

上图是当当的已购商品区域。
  • 位置,无论视觉上,还是设计上,这个区域都是中心。
  • 显示商品名/单品积分/市场价/当当价/优惠/数量/共节省/共获积分/总金额,共 9 项信息。
  • 灰掉了“积分/市场价”,应该是想强调一下“当当价”。
    问题:如果认为灰掉的两项不重要,是否有更好的处理?
  • 变换颜色强调了“共节省/积分”,特别突出的是“总金额”。
  • 提示并进行了“图书促销区”活动的导航。
  • 可以修改商品数量,以及删除商品。

上图是特惠区的促销信息。
  • 位置在页面最下面,一般很难看到。我个人持保留意见,放在此时此地能有用吗?

3)个人看法
  • 要赞一下当当的推荐算法团队,有功力,购物车推荐的相关性不错,多样性也照顾到了。
  • 要搞清楚一个重要问题,基于当当目前的情况,购物车的首要目标是什么:刺激交叉销售,提高单个订单的总金额?还是尽量减少对结算的干扰,以保证订单地完成率?
  • 不了解设计初衷,但感觉购物车推荐部分的产品设计还有提升空间。套个专业术语,信息架构没整明白。

第二站,卓越亚马逊

1)进入购物车之前
  • 搜索书名,Bingo,有输入提示!看来 Amazon 代表了先进生产力啊。
  • 点击搜索结果里面的对应条目,当前页转入详细信息页面。
    问题:是否能够说明在卓越亚马逊这里,使用精确搜索的用户是占大多数的?
  • 在书籍详细信息页面里,点击“购买”,当前页转入购物车。好吧,我承认我是 Amazon 的拥趸。

2)购物车内
根据最近加入购物车的一个商品,在购买操作维度给出的推荐。总共 6 条。
根据最近加入购物车的一个商品,在浏览操作维度给出的推荐。总共 3 条。
根据购物车内的其它商品,在购买操作维度给出的推荐。总共 3 条。

上面三个图片是 Amazon 购物车推荐的三个区域,标题是我们喜闻乐见的“买了... 还买了...”的经典句式。
  • Amazon 清晰地传递了它的理念:购物车的核心目标是,使用交叉销售帮助用户完成更多地购买。
  • 购物车推荐区域基本上进行了满屏显示,无论视觉上,设计上,还是事实上,这里都是中心。
  • 每个推荐商品,显示图片/名称/卓越价/打星/评论数,共 5 项信息。商品名称全部完整显示。
  • 相比文字,图片能够更加有效地传递信息。
  • 三个推荐区域的条目数分别是 6/3/3,总共 12 条。

上图是已购商品区域。
  • 位置,在页面的右上部的独立区域。通过区别于其他的色块设计,使其也足够突出。
  • 显示商品名/作者/包装/卓越价/数量/总金额,共 6 项信息。
  • 突出了商品的卓越价及订单总价。
  • 不能直接修改商品数据,也不能直接删除商品。
  • 有一句看似很多余的提示语,“购物车中的商品价格与该商品页面显示的最新价格一致”。

3)个人看法
  • 卓越亚马逊显然用的是 Amazon 总部的推荐技术,效果毋庸置疑。
  • 细节上仍有待注意,推荐区域稍嫌散乱,且时常可以见到商品图片无法显示的情况。

关于购物推荐

用户购买一件商品,有两个阶段:首先是要知道有这么一个东西;然后评价一下是否需要购买,做出决定。
当当的推荐完成了第一个阶段,能够把相关性比较好的东西自动推给用户,但基本上到此就停住了,在帮助用户作决定这个阶段几乎没有作为。
细节处见真章。可以看到 Amazon 对推荐这件事情的理解的确更加到位。通过给出“打星”与“评论数”,为用户做出决定提供了一些参考。但请注意,我说的不是卓越亚马逊,他抄都没抄明白,Amazon 在同样的地方,还另外给出了书籍的作者,而卓越似乎是自作主张地去掉了。要知道,作者可是用户决定购买一本书的重要因素!

结论

内容写着写着就有点儿发散了。
转回头来,开篇的那句话,其实说的是“Shopping Cart Abandonment Rate”,它是电子商务领域的一个核心问题。它非常重要,因为可以抛开其他所有因素,只需要单纯把这个比例降低,销售收入就能够增加。但也正因为如此,一般的电子商务网站对待购物车都是格外的小心翼翼。这个事情的做法上,没有绝对的正误,一定要数据说话。
但评定标准绝对只有一条。搞清楚我之前提到的那个问题:
  1. 刺激交叉销售,提高单个订单的总金额;
  2. 尽量减少对结算的干扰,以保证订单地完成率。
哪一个能够提升最终的销售收入,哪一个就是你当前的最佳选择。