Archive

Posts Tagged ‘购物车’

B2C购物车功能评测分析报告(1)——用户使用购物车的限制与识别

March 30th, 2009

上周时间闲一点,打算开始做商城需求,结果刚从必备功能–购物车开了个头,就发现现在国内各个B2C的购物车功能支持实在是大相径庭,存在太多优化空间,而国外B2C的购物车主要功能基本一致,但在小功能点上都力求创新……

最有意思的是,刚测完不久,还来不及整理这份分析报告,就发现有几个问题被改正了,速度之快,以至于我都怀疑是不是我的测试造成的^^

重点根据我们对业内的了解及方向分析了几家网站,其他有些没有列举出来的网站如amazon、淘宝B2C、vancl、国美、达芙妮等仅仅只是作为我们自己的旁证检测,结果没有反映在这份文档里。

评测对象:

国内:

当当:不用介绍了。

卓越:不用介绍了。

京东:it数码第一家,去年融资千万美圆。

新蛋:也做数码,似乎不够格,下份文档移除。

服装B2C-国内:

Yoho有货:算是直接竞争对手吧。

Cosize:大方向(潮流电子商务)相同的网站,有身边的朋友推荐及论坛推荐。

服装B2C-国外:

Gap:美国青少年时尚休闲品牌,应该是第一,Yesppg开始就仿他们做的。

Abercrombie: 美国青少年时尚休闲品牌,据说是大学生最爱。

Zara Home:很有名的Zara,全球第三服装零售商,但他们还没在网上卖衣服,只卖家居。

第一篇:用户使用购物车的限制与识别
第二篇:迷你购物车与正式购物车的设计
第三篇:正式购物车的页面信息结构
第四篇:我们购物车设计的实际需求与原型

第一篇:用户使用购物车的限制与识别

一、三种程度

由于Cookie是实现购物车存储用户购物信息的最容易的手段,所以B2C网站的购物车都是用Cookie来实现记录用户购物信息,即使通过Session也是通过Cookie来变相实现,按评测对用户的限制与识别程度,有三种:

程度1:仅支持登录用户(允许Cookie)
程度2:除1外,还支持非登录用户(允许Cookie)
程度3:除2外,禁止了Cookie机器的用户也能使用(不管注册与否)

这三类用户的支持程度,一层比一层深,目的就是为了让能够使用购物车的人数增加,转化为订单的数字也就会相应增加。

按常识说来,购物车是鼓励非登录用户也能使用的,只有等到了结算中心,才会提示登录。这么做的好处是在用户购物前尽量降低参与门槛。在测试的时候,国外全部及国内部分网站购物车都支持到2,而能到3这种变态程度的,只有卓越。而不可思议的只支持登录用户才能使用的,居然在我作为主要分析对象的国内五家里,占了3家。

二、国内B2C购物车用户识别对比分析

当当(程度2):
•非登录用户用Cookie识别
•已登录用户仍然还是用Cookie识别,不跟帐号对应。清除Cookie后,购物车内商品消失,帐号强制退出
•禁用Cookie后,非登录用户无法添加商品入购物车,有帐号用户无法登录
评论:未分析到卓越模式前,还是不错的,新蛋中国的模式与dangdang相同

卓越(程度3):
•非登录用户用Cookie识别,已登录用户帐号识别
•非登录状态清除cookie,商品消失;已登录状态清除cookie,帐号强制退出,购物车内商品保留
•非登录添加→登录后再次添加,非登录状态下添加的商品转移成帐号对应的商品,清除cookie后仍然保留
•禁用cookie后,非登录用户仍然可以正常添加商品,正常登录
评论:比Amazon还强大…我个人就经常在非登录的情况下使用购物车,然后到结算中心时再登录。

京东(程度1):
•已登录用户才能使用购物车
•帐号退出,购物车商品即消失(囧rz),这周准备做分析复查时发现已解决此大问题
•虽然赶在我分析报告做出来前,解决了测试中帐号退出购物车商品即消失的问题,但是购物车内删除商品,帐号退出再进入后商品仍然还保留(囧rz)
评论:我一直以为京东很强,没想到大错特错-_-

新蛋中国(程度2)
•当当模式,但清除Cookie后,帐号不强制退出
评论:当当和卓越的清除Cookie后,帐号强制退出应该是从安全考虑,就像taobao也频繁让用户登录一样。所以新蛋这么做是合理的,不过要用也该用程度2的卓越模式。

Yoho有货(程度1)
•已登录用户才能使用购物车
•禁用Cookie后Yoho不能登录,重新跳回到商品详情页,没有合适的提示,容易误会已经登录
评论:Yoho的视觉表现力是蛮佩服的,但在功能架构及用户体验上,有很多弊端,因为是直接的竞争对手,就不好多说了哈^^

Cosize(程度1)
•已登录用户才能使用购物车
•禁用Cookie后Cosize用户登录时会跳转到一个提示用户打开Cookie的页面(非常不错的设计)

 

评论:因为只有登录用户才能使用购物车,所以Cosize这个禁用Cookie后又要登录的跳转页设计还是值得赞赏的,但我不理解做出这个优秀设计的Cosize为什么要限制只有登录用户才能使用购物车,希望有机会接触一下听听想法。

此外还有V版他们家365com.com这种关了浏览器,购物车内商品就消失的奇怪的设计(囧rz)

 

三、国外B2C购物车用户识别对比分析

Gap(程度2):
•卓越模式,但清除cookie后帐号不退出
•收藏夹的商品下次登录时自动转入购物车,成功下单后收藏夹内商品也自动转入购物车
•禁用Cookie后,直接跳到检测错误页面,用户不能浏览商品,不能登录
评论:Gap的购物车没啥好说的,反而是其他功能值得大书特书,以后慢慢道来。禁用Cookie后,直接不让用户浏览商品有点奇怪,但至少立场是鲜明的,总比其他网站禁用Cookie后不提示,实际登录不成功也不提示要好很多,算是极端的处理吧。

开启Cookie时正常访问的Gap:

 

禁用Cookie后:

 

Zara Home(程度2):
•session保留匿名用户购物车商品,清除cookie无效
•注册帐号不成功,无法测试登录用户商品识别情况
•禁用Cookie后,添加商品入购物车报错
评论:奇怪的匿名用户下不用Cookie识别的例子。其他没啥可说的,Zara Home有一些小设计在之后慢慢道来。

Abercrombie(程度2):
•session保留匿名用户购物车商品,清除cookie无效,已登录用户帐号识别
•非登录添加→登录后再次添加,非登录状态下添加的商品转移成帐号对应的商品
•禁用Cookie后,添加商品入购物车报错,不能登录
评论:同Zara Home,更多特点在其他功能设计和信息架构上。

四、总结
几个没想到:
1、 京东购物车商品存储之囧:先是购物车没有保存商品功能,退出即清空。后来退出不清空了,删除又失效,以为删除了,其实再次登录后还是没删除…
2、 Cosize的禁止Cookie用户登录时的跳转页设计,当当应该效仿
3、 为什么那么多国内网站要限制只有已登录用户使用购物车?请告诉我…

 

五、我推崇的做法
与技术讨论过可行性,技术上实现照顾三种用户是很容易的,所以,以下是我们购物车在用户限制与识别这一功能点上的设计方案:

•卓越模式的程度3,但清除Cookie后不退出帐户。

admin 电子商务流程和功能设计 ,

B2C购物车功能评测分析报告(2)——迷你购物车的设计

March 30th, 2009

[#2: Edit Options>MightyAdsense>Adsense Code]

上周时间闲一点,打算开始做商城需求,结果刚从必备功能–购物车开了个头,就发现现在国内各个B2C的购物车功能支持实在是大相径庭,存在太多优化空间,而国外B2C的购物车主要功能基本一致,但在小功能点上都力求创新……

最有意思的是,刚测完不久,还来不及整理这份分析报告,就发现有几个问题被改正了,速度之快,以至于我都怀疑是不是我的测试造成的^^

重点根据我们对业内的了解及方向分析了几家网站,其他有些没有列举出来的网站如amazon、淘宝B2C、vancl、国美、达芙妮等仅仅只是作为我们自己的旁证检测,结果没有反映在这份文档里。

评测对象:

国内:

当当:不用介绍了。

卓越:不用介绍了。

京东:it数码第一家,去年融资千万美圆。

新蛋:也做数码,似乎不够格,下份文档移除。

服装B2C-国内:

Yoho有货:算是直接竞争对手吧。

Cosize:大方向(潮流电子商务)相同的网站,有身边的朋友推荐及论坛推荐。

服装B2C-国外:

Gap:美国青少年时尚休闲品牌,应该是第一,Yesppg开始就仿他们做的。

Abercrombie: 美国青少年时尚休闲品牌,据说是大学生最爱。

Zara Home:很有名的Zara,全球第三服装零售商,但他们还没在网上卖衣服,只卖家居。

第一篇:用户使用购物车的限制与识别
第二篇:迷你购物车与正式购物车的设计
第三篇:正式购物车的页面信息结构
第四篇:我们购物车设计的实际需求与原型

第一篇:用户使用购物车的限制与识别

一、三种程度

由于Cookie是实现购物车存储用户购物信息的最容易的手段,所以B2C网站的购物车都是用Cookie来实现记录用户购物信息,即使通过Session也是通过Cookie来变相实现,按评测对用户的限制与识别程度,有三种:

程度1:仅支持登录用户(允许Cookie)
程度2:除1外,还支持非登录用户(允许Cookie)
程度3:除2外,禁止了Cookie机器的用户也能使用(不管注册与否)

这三类用户的支持程度,一层比一层深,目的就是为了让能够使用购物车的人数增加,转化为订单的数字也就会相应增加。

按常识说来,购物车是鼓励非登录用户也能使用的,只有等到了结算中心,才会提示登录。这么做的好处是在用户购物前尽量降低参与门槛。在测试的时候,国外全部及国内部分网站购物车都支持到2,而能到3这种变态程度的,只有卓越。而不可思议的只支持登录用户才能使用的,居然在我作为主要分析对象的国内五家里,占了3家。

二、国内B2C购物车用户识别对比分析

当当(程度2):
•非登录用户用Cookie识别
•已登录用户仍然还是用Cookie识别,不跟帐号对应。清除Cookie后,购物车内商品消失,帐号强制退出
•禁用Cookie后,非登录用户无法添加商品入购物车,有帐号用户无法登录
评论:未分析到卓越模式前,还是不错的,新蛋中国的模式与dangdang相同

卓越(程度3):
•非登录用户用Cookie识别,已登录用户帐号识别
•非登录状态清除cookie,商品消失;已登录状态清除cookie,帐号强制退出,购物车内商品保留
•非登录添加→登录后再次添加,非登录状态下添加的商品转移成帐号对应的商品,清除cookie后仍然保留
•禁用cookie后,非登录用户仍然可以正常添加商品,正常登录
评论:比Amazon还强大…我个人就经常在非登录的情况下使用购物车,然后到结算中心时再登录。

京东(程度1):
•已登录用户才能使用购物车
•帐号退出,购物车商品即消失(囧rz),这周准备做分析复查时发现已解决此大问题
•虽然赶在我分析报告做出来前,解决了测试中帐号退出购物车商品即消失的问题,但是购物车内删除商品,帐号退出再进入后商品仍然还保留(囧rz)
评论:我一直以为京东很强,没想到大错特错-_-

新蛋中国(程度2)
•当当模式,但清除Cookie后,帐号不强制退出
评论:当当和卓越的清除Cookie后,帐号强制退出应该是从安全考虑,就像taobao也频繁让用户登录一样。所以新蛋这么做是合理的,不过要用也该用程度2的卓越模式。

Yoho有货(程度1)
•已登录用户才能使用购物车
•禁用Cookie后Yoho不能登录,重新跳回到商品详情页,没有合适的提示,容易误会已经登录
评论:Yoho的视觉表现力是蛮佩服的,但在功能架构及用户体验上,有很多弊端,因为是直接的竞争对手,就不好多说了哈^^

Cosize(程度1)
•已登录用户才能使用购物车
•禁用Cookie后Cosize用户登录时会跳转到一个提示用户打开Cookie的页面(非常不错的设计)

 

评论:因为只有登录用户才能使用购物车,所以Cosize这个禁用Cookie后又要登录的跳转页设计还是值得赞赏的,但我不理解做出这个优秀设计的Cosize为什么要限制只有登录用户才能使用购物车,希望有机会接触一下听听想法。

此外还有V版他们家365com.com这种关了浏览器,购物车内商品就消失的奇怪的设计(囧rz)

 

三、国外B2C购物车用户识别对比分析
Gap(程度2):
•卓越模式,但清除cookie后帐号不退出
•收藏夹的商品下次登录时自动转入购物车,成功下单后收藏夹内商品也自动转入购物车
•禁用Cookie后,直接跳到检测错误页面,用户不能浏览商品,不能登录
评论:Gap的购物车没啥好说的,反而是其他功能值得大书特书,以后慢慢道来。禁用Cookie后,直接不让用户浏览商品有点奇怪,但至少立场是鲜明的,总比其他网站禁用Cookie后不提示,实际登录不成功也不提示要好很多,算是极端的处理吧。

开启Cookie时正常访问的Gap:

 

禁用Cookie后:

 

Zara Home(程度2):
•session保留匿名用户购物车商品,清除cookie无效
•注册帐号不成功,无法测试登录用户商品识别情况
•禁用Cookie后,添加商品入购物车报错
评论:奇怪的匿名用户下不用Cookie识别的例子。其他没啥可说的,Zara Home有一些小设计在之后慢慢道来。

Abercrombie(程度2):
•session保留匿名用户购物车商品,清除cookie无效,已登录用户帐号识别
•非登录添加→登录后再次添加,非登录状态下添加的商品转移成帐号对应的商品
•禁用Cookie后,添加商品入购物车报错,不能登录
评论:同Zara Home,更多特点在其他功能设计和信息架构上。

四、总结
几个没想到:
1、 京东购物车商品存储之囧:先是购物车没有保存商品功能,退出即清空。后来退出不清空了,删除又失效,以为删除了,其实再次登录后还是没删除…
2、 Cosize的禁止Cookie用户登录时的跳转页设计,当当应该效仿
3、 为什么那么多国内网站要限制只有已登录用户使用购物车?请告诉我…

 

五、我推崇的做法
与技术讨论过可行性,技术上实现照顾三种用户是很容易的,所以,以下是我们购物车在用户限制与识别这一功能点上的设计方案:

•卓越模式的程度3,但清除Cookie后不退出帐户。

 

第二篇:迷你购物车的设计

在商城的购物车程序设计里,随着需求的变化,对用户体验的重视,渐渐的从早期的购物车发展成了迷你购物车+正式购物车的设计。

一、什么是迷你购物车与正式购物车?

1、什么是早期的购物车设计?
早期的购物车设计仅仅满足了去结算中心前存储所有商品的需求,在做添加商品入购物车 操作时必须频繁刷新购物车页面,购物车在商城所有页面仅以链接的形式作为入口,不承担任何购物车内商品数量与价格的提醒作用,例子有如当当、卓越等等。

2、什么是迷你购物车+正式购物车的设计?
迷你购物车+正式购物车设计是在所有商城页面都提供迷你购物车区域,该迷你购物车区域主要用来确认用户当前添加商品入购物车的操作,用户确认需要访问正式购物车后才转入正式购物车页面,否则,依然还在之前所浏览的页面继续浏览,这种设计作用主要有两个:
(1)、减少添加商品入购物车时频繁刷新购物车页面的操作,方便用户继续专心地挑选商品;
(2)、快速提醒用户当前购物车内商品总数与总价,提醒用户查看购物车

作用(1)是迷你购物车最主要的作用,作用(2)更多只是作为所创建的区域的扩展信息架构依附存在。
此外,随着承载信息的不同,迷你购物车还可以直接承载结算入口的功能,在部分情况(如购买少量商品或用户无需核对)下直接提供用户忽略访问购物车直接跳到结算中心进行结算的入口。

二、国内B2C站购物车设计

当当:
•早期购物车,所有页面上的购物车区域仅仅只是个链接

卓越:
•早期购物车,所有页面上的购物车区域仅仅只是个链接

京东:
•早期购物车,所有页面上的购物车区域仅仅只是个链接

新蛋中国:
•核心思想还是早期购物车设计思想,但通过在所有页面都放大购物车区域的显示功能而实现了迷你购物车的作用(2),但添加商品时仍然是频繁访问购物车页面

Yoho有货:
Yoho有货的购物车设计看起来很酷,但设计思想非常混乱,在所有页面加入迷你购物车的添加商品入购物车的设计,但又取消了正式购物车页面,变成了以迷你购物车的表现力来同时承载迷你购物车及正式购物车的功能,造成正式购物车的很多功能都缺少了发挥余地,对信息支持太不够了。在位置上别出心裁地放在屏幕下方的这个设计我的个人观点是坏处大于好处的。

Cosize:
•核心思想还是早期购物车设计思想,但通过在所有页面都放大购物车区域的显示功能而实现了迷你购物车的作用(2),但添加商品时仍然是频繁访问购物车页面

三、国外服装B2C站购物车设计

国外服装B2C站购物车设计有鲜明的迷你购物车+正式购物车的设计思想
•迷你购物车出现在页面右上角
•添加商品入购物车时,迷你购物车会弹div窗显示当前加入的商品信息,几秒后收缩,此效果保证了用户确认添加了商品,又不影响用户将视觉注意力继续集中到商品页面
•通过迷你购物车的链接,访问正式购物车页面

Gap:
Gap的迷你购物车设计是早在1年前初次接触到Gap时就已经发现,可见这种设计思想在很久以前就已经被使用了, PPG的初版据说就是仿的老版的Gap。BTW,Gap有很多堪称亮点的功能设计和用户体验优化可作借鉴,譬如说用小色板/纹理板代替款式选择,尺码也直接放出,因为不涉及到购物车功能,不予详述。

浏览商品时:

 

添加入购物车后:

 

 

记得一年前,这个div的效果是几秒后收缩,现在Gap改成了一直到鼠标在屏幕上发生点击事件后才会收缩,这就更能提醒用户当前添加商品入购物车的操作是有效的。

Abercrombie:
Abercrombie的迷你购物车相较Gap,多了一个鼠标悬浮在迷你购物车上时可以展开迷你购物车内商品列表的功能,去掉了结算入口,不过他们的迷你购物车是弹出后几秒即收缩。

浏览商品时:

 

添加入购物车后:

 

 

鼠标悬浮到迷你购物车区域时:

 

 

Zara Home:
•核心思想还是早期购物车设计思想,但通过在所有页面都放大购物车区域的显示功能而实现了迷你购物车的作用(2),但添加商品时仍然是频繁访问购物车页面。

四、总结
迷你购物车的设计思想的思考:
如前所述,迷你购物车的设计思想主要是为了减少用户频繁访问购物车页面,将用户的注意力重新集中在商品挑选页面。这种设计思想对所有B2C站我认为都是正确的。在具体实现方法上,像Gap、Ambercrombie这种在所有页面右上角区域开拓迷你购物车,通过在商品页面的伸缩来体现已经被添加入购物车的设计,是非常适合中小型B2C站的。(比如前段时间Paidai里介绍的sasacity就是这么做的)

PPG现在版本变成了以屏幕中心为焦点弹div窗口的形式,这虽然起到了主要作用,但由于屏幕右上角仍然只是单纯的购物车的链接,就失去了随时呼叫迷你购物车出来的功能及购物车内的商品数量与价格展示。

不过,像当当、卓越这种大型B2C站,由于搜索功能是用户主要使用的功能,所以占据了首屏的较大区域并对各种附加功能有了更高要求(如热门关键字推荐),所以在如何设计迷你购物车上,倒不应该是简单照搬Gap、Ambercrombie这种设计。这个难题就只能慢慢试验方法去解决了。我个人觉得通过RIA技术的创新,在桌面应用程序结合互联网应用程序这个方向上的突破,对购物车存储商品信息这个功能的设计思想是可以考虑换个载体去解决问题的,具体是否如此,还需要摸索。

五、我推崇的迷你购物车设计:
Gap+Ambercrombie式的迷你购物车
•迷你购物车出现在商城所有页面首屏重要区域(右上角确实是最适合的,可以跟购买按纽交相呼应)
•迷你购物车区域显示商品总数与总价
•添加商品入购物车后,呼出迷你购物车的添加商品提示
•添加商品提示只有当发生鼠标点击事件后才消失
•鼠标悬浮可以在迷你购物车区域显示当前购物车内商品列表信息
•可以快速进入正式购物车页面及结算页面

admin 电子商务流程和功能设计 ,

购物车设计欣赏和实践图例

March 30th, 2009

[#3: Edit Options>MightyAdsense>Adsense Code]

原文出处:http://www.smashingmagazine.com/2008/02/07/shopping-carts-gallery-examples-and-good-practices/

翻译:om19

假设你在设计一个在线商店。由于涉众只对销售量感兴趣,所以你工作的成功与否直接取决于你是否能很好地驱动用户去点击“购买”按钮。在这种情况下,你也许会考虑一些设计思路,这些思路能够将你区别于你的竞争者。最终,他们做错的可能性很高。

在这些有缺陷的设计中,最简单的例子之一就是错误地使用了购物车图标——一个传统的图标,表示虚拟存放商铺里商品的存放地的图标。正确地使用该图标,虽小却强大的元素,能够帮助用户尽可能又快又爽地购买商品。就这点而论,这是购物过程的重点,因此,在设计过程中也要认真地考虑。

少见的购物车,一个巨大的购物袋 来自mascot

在这篇文章里,我们展示了有吸引力的,有创造力的,用户体验好的购物车,购物袋,购物篮——任何他们在线上商铺使用的购物车。除此之外,我们也谈到了创新的想法、设计方法和可用性指南。

难道一个简单的文字链接不够吗?

有时候是够了的。但是,在很多情况下,够不够取决于公司或者商铺要卖什么样的产品。如果一家公司要卖螺丝刀的话,彩色购物袋也许不是最好的图标。在这种情况下,一个明显的文字链接可能就足够了。但是,如果是一家鞋店要想吸引客户的注意的话,最好加上点稍微更加吸引人的设计元素。

Landsens的购物车使用了一个简单的文字链接。这也许是一种解决方案,但可能不是最有效的……

有时候,一个文字链接就够了。

在这些案例里,如何展示购物车功能归根于店铺的设计问题。购物车和结帐图标对于客户和店主双方来讲,都是最重要的功能。这就是为什么它需要认真地考量、认真地设计。另外,如果有更有效的方案替代枯燥的文字链接,何乐不为?

1.吸引人的购物车

设计师经常倾向于设计吸引人的购物车,尤其喜欢在标准的推车图标上使用引人注目的元素。有趣的是,比起电脑、数码商铺来说,定位于女性购物的大多数商铺的购物车看起来更加漂亮。目的很简单:购物车是用来激起用户购买欲望的。

许多情况下,设计师把购物车局限于它的主要功能——表示客户从网店购买的商品的虚拟存放地。但是,在某些情况下,购物车会更不正式些。他们看起来像是现实生活中的购物车,他们带着感情。

2.购物车可提高可用性

从可用性观点来看,最好给用户提供一个对接下来要发生的购物流程的概要。这个的最根本的原因是让用户可以确认系统运作正常,也同时能验证他们之前与系统的交互也正常。(意指购物车能帮助用户确认他们之前所要买的商品。)

为了达到这个目的,购物车可以结合更进一步的商铺功能。既然用户期望购物车会出现在页面的顶部的右边,那么就有理由在购物车旁边放置一些更进一步的选项,因此,可以将整个购物流程以一种精简、全站内持久的显示的方式囊括在此。

举几个例子,这样也许蛮有用的:

  • 告诉用户购物车里有些什么
  • 表明需要至少购买多少件商品才可以下单,

  • 商品总共多少钱,

  • 放置一个结帐的链接也许可以帮助用户立即完成购物流程,

  • 提示可用的支付方式,

  • 为防止用户不清楚购物流程而提供一些帮助

一旦提供了这些信息,商铺就可以将持久的购物流程总览告诉给用户。这节省了客户许多次鼠标点击。于是,客户可以更好地关注于挑选他们喜欢的商品,也更舒服地浏览店铺。

3.购物车图标丰富了内容

购物车也可以用来当作一个简单的说明。设计师将购物车放到在线商铺的内容中间去而不放在页头——比如说把购物车放在商品详情中。显然,不断的有例子说明这样贯穿整个站点的方式是可行的。

购物车丰富内容: Bigw 在标题使用了手推车图标

一个“传统”的设计:购物车在“添加到购物车”链接的右边。

4.微妙地使用购物车

有时购物车被设计得很微妙,正如有时候在第一眼就能看见它。这是你在为店铺设计之前首要考虑的。让我们看些例子,看看他们是如何完成的。

要做得微妙,购物车也应该用一些不同的颜色来强调。这样,就能将它从网站总设计中剥离出来,同时让他们更加容易被辨别。

5.创意地使用购物车

很明显,购物车并没有必要像传统的购物车的样子。从用户的观点出发,这也许不是应该采取的最好的设计解决方案,因为它乍一看不好辨认也不能令人印象深刻。不过,有些设计师倾向于选择创意性的做法:

一个购物车,看起来像是一个……购物栏。你也可以在里边放各种商品。

会动的购物袋 来自 Hgman

6.购物车融入到logo中

有时候设计师会倾向于将购物车集成到商铺的logo中。在许多情况下,用在logo中的颜色也会用在整个在线店铺的购物车图标中。

7.误用购物车

虽然购物车设计中,遵从基本原则是很容易的,但是很多(太多了)网站常常犯同样的错误

  • 购物车不可点,

  • 购物车无法辨认,

  • 购物车很难找到。



    虽然购物车在右边,也同时用颜色突出了,但是其他的元素相当拥挤,所以很难能够把焦点放在购物车上。

购物车:该放在哪儿?

传统的说,购物车都放在页面顶端的右侧。几年来由于用户在大量的在线商铺一遍又一遍地看到这种模式,所以用户早已习惯了这种做法。但是,随着购物车区块的高度随着选择的商品数量的增加,有时候购物车可能需要变成竖排的而是不是常见的横排。

这些情况下,购物车常常被放置到右边栏中。这两种情况,购物车都应该在所有页面保持一致。

更多购物车的图例

前几个月,Jason Billingsley收集了 107 Add to Cart Buttons of the Top Online Retailers(107个最牛逼的在线销售的添加到购物车按钮)。这些小小的、长方形的、有时候是彩色的按钮从商品页面链接到了购物车页面,同时,这些按钮也是你品牌的延伸。将你的“添加到购物车”图标添入一些自己的想法是很重要的。

 

Shopping Cart Icons(购物车图标) Ro London几年前收集的。在他的观点看来,用购物袋比购物车要好。

admin 电子商务 ,

从降低购物车遗弃谈结帐流程的设计

March 27th, 2009

颜超敏原创,转载请注明作者和出处。)

客户进入电子商务购物网站后,挑选了中意的若干商品加入购物车后,就“推着”购物车进入结帐流程,
完成结帐流程并支付订单。

这里存在一个专业术语叫购物车遗弃,英文名叫:Shopping Cart  Abandonment。

与之对应的是购物车转化率,英文叫Shopping Cart Conversion Rate,
即每100个人“推着”购物车进入结帐的人最终下达订单的客户的比率。
电子商务系统设计人员比较关注的是如何降低购物车遗弃(提高购物车转化率),本文将从优化

结帐流程的设计和实现的方面来探讨降低购物车遗弃。

1、安全

恐怕没有谁愿意在一个自己不信赖的站点上购物,一个电子商务网站必须从营销宣传、站点技术、界面设计等方面无处不在
的向客户展示它的安全——在这里购物不用担心您的信用卡、银行资料和个人信息会泄漏等。
所以在结帐流程使用https技术是有必要的,而且需要加上一些安全性的图标、信息等来强化用户的安全印象。

2、缩短结帐流程的步骤

数一下我们的电子商务站点的结帐有多少步骤?必须先登录(不支持匿名购物)、运输地址、发票地址、运输方式、包装方式、
支付方式、赠品赠送和其它独特的步骤等等,Stop,实在很多。这些都是必要的吗?也许某些步骤是必要的,但是不是全部,
我们不妨考虑一下客户在填写这些信息的时候的感觉——天啊,怎么在网上买东西这么麻烦,简直成了查户口了!
好的设计就是有针对性的设计,对于第一次结帐的客户,可以稍稍让其填多些信息,毕竟他/她在这个站点什么信息都还没有,
起码得能够把货物送到他家吧。但是对于老客户而言,则一定要做优化,对于系统已经保存的一些信息,不需要客户重新录入,
直接到最后一步即可,客户需要修改时可以点击“编辑”某类信息才需要回到该步骤。

3、提供结帐流程指示图

这是必须的,合适的图样加上文字说明是一个不错的选择,注意对当前步骤进行高亮显示,提醒客户现在到了那里。
下面是一些优秀的结帐流程指示图设计,大家可以参考一下:

4、不要让多余的信息干扰客户结帐

有些电子商务站点希望让广告促销推荐无处不在,即使结帐流程页面也不放过,他们的想法就是,无论任何时候都要让
客户尽量的购买多些东西,哪怕一瓶木糖醇。
其实在网上购物和现实中的超市购物还是有所不同的,我们不能因为看到超市的结帐柜台放了大量的小商品就认为网上购物也可以
如此设计。
网上购物进入结帐流程后,客户会非常的专心,生怕填错了运输地址,输错了信用卡号等,对于设计者而言,最重要的工作
就是让客户方便愉快的完成结帐信息的选择和填写,尽快的完成本次的下单,其它的东西等待他下完订单后再说吧。
2ecommerce.cn
5、提供匿名购物

有些客户对自己的隐私非常的在意,或者只是单次的购物,不希望在网站上留下信息,如果网站一定要客户注册了才能
购物,那往往会将这些客户拒之门外,即使因为处于客户服务和跟踪的考虑必须客户注册,那其实可以采用更加友好的设计,
如在客户在结帐流程最后一步时,让客户选择是否用结帐信息进行注册的可选框,如果客户选择了,让客户确认一下信息即可,
通过Ajax等技术都可以让这一步做得很贴心友好。

6、结帐的全过程都提供购物车的商品信息和费用统计。

由于在结帐过程中,一些选择会导致费用的改变,如选择不同的运输方式、包装方式等,所以
让客户随时的看到商品信息和费用统计是很必要的,花多少钱、花在那里都要心里有底。

7、提供更多的付款方式

每个客户可用的支付方式是有限的,比如笔者就只是开通了工行、农行的网上银行、支付宝、Paypal,我相信有些
客户能够使用的支付方式比我更加的少,如果网站只提供有限的几种支付方式,如果恰好不在客户可用的支付方式之内,
那么很可能让客户最终放弃了购买。

admin 电子商务流程和功能设计 ,

案例学习:一个优秀的购物车和结账设计

March 27th, 2009

颜超敏原创,转载请注明作者和出处。)

一.   常见的购物车设计的问题

1、购物车的商品在结账流程无法更改

在购物车页面可以进行产品的编辑,但是进入结账流程后只能“专心的”填写相关
的信息,不能随意修改购物车了,如果要修改便得回到购物车页面修改,然后
再进入结账流程,如果网站技术较强,可能会将刚才填写的信息临时记录下来,
但是做得差的网站则会丢失这些信息,需要客户重新填写,非常麻烦。往往会
导致购物车遗弃。

2、购物车的商品和意愿清单(Wishlist)设计的不紧密

意愿清单是客户特意挑选的,希望自己以后购买或者朋友为其购买的若干商品的
列表,对于顾客而言,这些商品很有可能会在本次或者下次购物中进行购买。
所以意愿清单对增加购买非常重要,应该将其提到显眼便捷的位置。

而常见的电子商务网站则将意愿清单放得太“隐蔽”了,客户必须登录,进到我的
帐号,在进入意愿清单才能看到这些商品,网上购物的客户都是健忘的,把这么
重要的数据设计成容易被忘记,就是设计的错误了。
2ecommerce.cn

二.   一个优秀的购物车结账设计

近日找到一个优秀的B2C电子商务站点,购物车和结账页面的设计比较好的解决了
上面所说的常见购物车设计问题。站点请见:www.skymall.com

1、购物车页面。界面非常简洁清晰。

1)顶部放置若干可选的服务;
2)左侧放置购物车;
3)右侧放置交叉销售栏目(Also Like)。
4)下面放置Wish List,可以方便的将意愿清单里面的产品加入购物车;
5)提供普通Checkout和Paypal Checkout两种结账方式。

一个优秀的购物车和结帐的设计

一个优秀的购物车和结帐的设计

2、结账页面的设计。

我们可以看到,左侧放置结账的第一步,包括登录框;发货地址;新客户的Email地址、密码;
支付方式。
而右侧就是重点了:放置了购物车和意愿清单,购物车允许客户在结账过程中随意修改购买
的商品数量、将商品删除或者移到意愿清单,或者将意愿清单里面的商品移到购物车。
做这一切的操作时,用户均无需离开结账流程页面!

这个设计笔者认为非常的好,能够很好的解决了我上面提出的两个问题,值得参考。

admin 电子商务流程和功能设计 ,

购物车恢复(Shopping Cart Recovery)的最佳实践

March 17th, 2009

1 什么是购物车恢复(Shopping Cart Recovery)?

当顾客将若干产品加入购物车,甚至点击“结账/结算”按钮进入结账流程,在填写或选择
相关的运输地址、运输方式、支付方式等信息时中途放弃了结账,形成了购物车遗弃。

对于商家而言,这类已经最接近达成交易的机会给顾客放弃了是非常的可惜,而通过
一些方法将顾客重新吸引回网站完成该次购物,被称之为:购物车恢复
(Shopping Cart Recovery)。

2 购物车恢复的业务重要性

经研究,遗弃购物车的顾客大部分是新的顾客,由于未曾在该网站上进行过购物,所以
基于若干的顾虑(如购物过程繁琐、运费过高、送达周期较长、觉得网站不安全、基于
隐私的保密等)而放弃了购物,而且这些顾客如果放弃了这次的购物,往往以后就不会
回来了,商家将非常可惜的失去了这些潜在的顾客。

有人专门做过一些分析,如果注册的用户在1周内没有下过第一张订单,他将有很大的
几率永远不会回来这个网站(虽然网站还是可以通过各种促销手段重新将他们吸引回来,
但是成本就高了很多),各位可以试验一下,你如果注册了淘宝的帐号,然后先不急着
进行购物,你将很快会收到淘宝通过电子邮件发过来的一张代金券(如20元)来鼓励你
购物,因为淘宝很清楚,只要顾客达成了第一次购物,他就会从怀疑到尝试信赖这个平台,
直到成为这个平台忠诚的顾客。

所以让顾客尽快完成第一次购物是非常重要的!
2ecommerce.cn
而购物车恢复就是为了尽量减少购物车遗弃带来的损失,从实际运营来看,这是一个非常
重要和实用的业务。

3 购物车恢复最佳实践

1)先收集顾客的邮件地址。可以在结帐流程刚开始时,立刻要求顾客填写,并且系统将
其持久化记录下来,免得顾客中途离开了,你的邮件欲寄无门。

2)了解你的顾客中途遗弃购物车的原因,通过网络调查等方式尽量了解顾客真实的想法。

3)通过发送制作精美的购物车恢复帮助邮件给顾客来实现购物车恢复。虽然通过呼叫中心
也可以,但是毕竟成本较高,而且发送邮件可以通过程序时间自动化,响应速度更快。

4)发送购物车恢复帮助邮件的内容要体现你的真诚,如“我们注意到您未有完成订单的下达,
我们希望能够为您提供我们最大的的帮助,为您解答疑问来完成订单的下达。我们提供了下列
的常见问题解答,请查阅,如果您希望直接和我们的客服联系,请点击下面的在线客服链接或拨打我
们的免费客服热线,谢谢!”

5)邮件内容除了上面的说明文字外,还需要包括返回到购物车/结帐流程的快捷链接,FAQ、
在线客服、呼叫中心的号码等。
邮件的末尾不要忘记附上退订的选项,以便给顾客造成不满,觉得这是垃圾邮件。

6)使用自动化发送邮件设计,必须在5分钟之内发送邮件到到顾客的邮箱中,因为这时顾客可能
依然在线,甚至还在您的网站上,打铁要趁热,时间不等人。

7)通过相关技术跟踪该快捷链接的点击率,达成购物的转换率,制作成报表,逐步优化购物车
恢复的策略。

8)试验发送多少次邮件会更加适合您的商务模式。一般是发送两次,第一次在5分钟内发出,
第二次,在1天后发出。但是不要发得太多,以免让顾客觉得这是垃圾邮件。

9)通过技术将顾客的购物车商品和结帐时录入的信息持久化保留,以便在顾客重新回到结帐流程时
无需重复录入——这对顾客将是一个很好的购物体验。

10)提供奖励(如奖励额外的积分、优惠券等)来鼓励顾客回到您的网站完成他们的订单。

总结

通过精心设计一个购物车恢复的业务模式和相关的邮件,成本很低廉,但是将大大提高您的购物车
转换率,通过提供奖励的方式已经被证明是最为有限的购物车恢复的策略,正在被越来越多的商家
进行使用。还等什么,立刻着手实现这个功能吧!

admin 电子商务 , , ,