B2C网站购物流程中优惠券的交互设计优化方案

来源:网络 责任编辑:栏目编辑 发表时间:2013-07-02 02:26 点击:

  我们在互联网上经常买东西,也会经常收到优惠券,最近有空做了一个小调研,在一个网站上,有30%的用户拥有超过10张的生效优惠券,但是,当我们使用优惠券的时候,我们发现一个问题,很多网站在购物结算页面只能显示10张优惠券,那么,如果多于10张优惠券后,我们怎么选择使用呢?

  我模拟一个用户,当我去一家超市,我购买了很多或者单件商品后,我发现我包包里有N张优惠券,我开始纠结了,我该使用那张呢?于是,我开始翻包里的优惠券,看看哪张快过期了,哪张是我这次想用的,我下次使用的,平时呢,不会理这些优惠券,只有当使用的时候才会看一眼。

  我看过国内N多B2C站,在优惠券上,都没有做过这样的交互

  但是我发现这样用户,随着网购的逐渐增多,越来越多有人有更多的优惠券

  所以,我在来做这个交互

  到了B2C,我们怎样满足这些用户的需求呢?

  解决方案有几种:

  1,为了好看和前端页面加载不是很多,就限制10张,结果就是30%的用户不能使用显示外的优惠券

  2,为了使用,30%的用户会看到好几页的优惠券,找起来也很麻烦

  现在我们理一下逻辑关系

  1, 做优惠券的交互设计解决那些问题?

  答:

  做优惠券的交互设计是为了满足自己B2C站上30%有多于10张优惠券的用户使用优惠方便,简单

  2做优惠券的交互设计是为了让70%没有多于10张优惠券的用户使用起来简单,易懂

  2, 做优惠券的交互设计有什么好处?

  答:

  做优惠券的交互设计,可以满足网上有拥有多于10张优惠券的用户的复杂选择,同时又不会给拥有少于10张优惠券减少操作复杂,同时增进用户体验,使用户用起来舒服,不会生气

  首先,我们来解决排序问题,根据大部分网名的数据来看,按照结束时间倒序排列,是我比较倾向的一种排序方式

  在支付环节中,列出优惠券的时候,可以根据订单金额,商品,首先筛选出符合使用的优惠券,例如你买的东西是100元的 那些 200-50的就不用显示出来了。

  其次,如果有同一种优惠券,则一行显示就好了。有个小+号 展开。不然都是 200-100 同一时期领的。全部显示 看起来头疼 怎么排序都头疼

  我们先来解决如果优惠券少于10张的用户的优惠券选择需求

  这些用户很简单,我们设置优惠券默认显示5张,如果有5张以内,那么我们就全部显示出来就可以了,而且页面也很美观

  









 

 

  当然,也有一些用户是大于5张优惠券却少于10张的,他点击更多后会有下面这样图的显示

  

 

  从上面这张图上可以看出,显示10张优惠券,已经很多了,

  这时候,我手中有张我想使用的优惠券,怎么办?作为用户,我很自然的想到,添加优惠券呗

  那么用户点击增加新优惠券,就可以解决添加优惠券的需求了,因为,在支付环节中,真正增加新优惠券的用户,只有35%,所以,我淡化了增加新优惠券按钮,使用户可以更清晰的使用

  

 

  但是添加后再哪里呢?

  问题就来了

  优惠券的排列顺序大致有这几种

  1, 按照有效时间的开始时间排序

  2, 按照有效时间的结束时间排序

  3, 最后一张激活的排列的最上面

  其实,这些都不是主要的,因为根本就没有解决用户的需求

  用户的需求就是,我想用哪张,就用哪张,我自己来挑

  所以就有了我这个新的页面,当用户的优惠券多于10张,就会有更复杂的交互

  

 

 

  当用户点击更多筛选条件后

  

 

  在开始做的时候,我对两个事情很纠结,

  1, 要不要翻页功能,最后被我否定了,因为翻页功能对于一次只使用一张优惠券的支付页面来说,太厚重了,不需要

  2, 要不要增加激活时间呢,也就是有的用户想查看他刚刚激活的优惠券,怎么办呢?最后也被我否定了,我想,如果他刚刚激活,那么,优惠券号他输入后就可以查出来了,如果他想查看,他可以点击您共有X张优惠券,可以新页面打开用户中心优惠券页面,自己慢慢看就好了

  3, 其实,用户用的翻页功能和查看都不是他目前最想做

    相关新闻>>

      发表评论
      请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
      用户名: 验证码:点击我更换图片
      最新评论 更多>>

      推荐热点

      • WordPress添加百度喜欢按钮小技巧
      • Wordpress 博客如何实现自定义Gravatar头像
      • 网站设计分析:建立良好的视觉层级
      • 网站设计分析:“中国式设计”的三个方向
      • 案例分析:奥巴马筹款网站的制作过程
      • 创建不平衡的平衡:在网页设计中使用不对称设计
      • 7大主流B2C首页导航栏设计对比分析
      • Wordpress页面模板制作方法及使用
      • css控制文字前的小图标
      网站首页 - 友情链接 - 网站地图 - TAG标签 - RSS订阅 - 内容搜索
      Copyright © 2008-2015 计算机技术学习交流网. 版权所有

      豫ICP备11007008号-1