•添加商品入购物车时,迷你购物车会弹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式的迷你购物车
•迷你购物车出现在商城所有页面首屏重要区域(右上角确实是最适合的,可以跟购买按纽交相呼应)
•迷你购物车区域显示商品总数与总价
•添加商品入购物车后,呼出迷你购物车的添加商品提示
•添加商品提示只有当发生鼠标点击事件后才消失
•鼠标悬浮可以在迷你购物车区域显示当前购物车内商品列表信息
•可以快速进入正式购物车页面及结算页面
文章TAG:全网平台 购物车设计 用户体验