最近一直在做电商平台的活动,
首先,接到这个需求时,产品给了个简单的原型:
产品原型图这是什么鬼?
大概看一下原型,可以看到有三个承载页面,第一步是要输入手机号和验证码,第二步输入卡密,最后一步验证成功,进行下载。咋一看一头雾水,这貌似是一个激活卡的流程,为了更加精准地了解产品需求,于是找到产品直接进行需求沟通(沟通前需要去思考用户场景和每个细节):
我:这是什么个需求?
。
?
实体卡样式我:这卡是怎么来的?
pm:平台通过线下运营活动给平台老用户进行的福利或者用户进行购买获得。
?
我:用户要怎么才能激活?
。
我:激活后又会怎样?
。
我:为什么要做这个需求?
我:额……
好了,现在已经大概了解了项目需求,先出个一版交互看看:
交互第一版额,感觉就是把产品原型稍微优化重新排个版而已,如果这样就算做交互了,那也太简单了,这个时候需要更加深入地思考和分析:
上面的步骤流程有没有问题?第一步就要输入手机号?
头部的广告是什么?跟激活卡有什么关系?会不会影响用户正常激活流程?
按钮的文案是不是有问题?提示文案是不是太简单?用户是否看的懂?
……
从交互设计三要素重新梳理整个逻辑流程:
1、用户。
2、目标。
3、使用场景:?难道应该是像产品原型里面那样直接出现输入手机号和验证码吗?。
分析了这么多,突然思路就清晰一些了,现在我们再重新优化一下交互,就当作第二个版本吧
交互第二版。。滑屏区下面的步骤拆分区域也是为了更好地让用户感知到整个流程和需要操作的步骤。
看到这里感觉这版应该没有什么问题了,正当我要定稿准备发出来的时候,为了确保没有遗漏什么重要的细节,还是要再仔细思考一下:
页面流程是否有问题?是不是能够更简化?
页面是否清晰明白?用户是否能够看的懂?
用户当前的心理预期是什么样的?需要引导用户怎么操作?
用户为什么要进行这个操作?用户的目标是什么?
还有没有更好的方案?
……
不停地问为什么,同理心的目的就是让我们能够站在用户的角度去思考用户的心理和其行为模式。
所以才有了更优的方案:
交互第三版这里唯一的改动是把特权滑屏区域去掉,将这里做成了实体卡样式。
为什么要这么做?。。当用户输入密码时,上面卡密区域也会同步进行密码输入的联动。
这样设计的好处就是能够让用户快速地进行场景带入,用户第一眼看到就很清楚地知道需要做什么操作,模拟实体卡设计符合用户的心理预期,能够与用户产生共鸣。
最后再整理优化一下交互流程,添加细节描述和异常态:
交互最终版好了,到目前为止交互的工作算是完成了,接下来就是视觉设计师的工作啦~
视觉稿总结一下,交互设计分析总体分为4点:
1、用户:是什么样的人在用你的产品,这些人有哪些特点,有哪些诉求,用户画像越细越好;
2、目标:用户的目标是什么,用户想得到什么,能够给用户带来什么样的价值。
3、场景:场景化设计,考虑用户真实的使用场景,这里分为内部使用场景和外部环境场景等,针对不同的场景才能做成符合用户心理预期的设计。
4、流程:考虑用户在使用过程中在各个场景下分别会产生哪些行为流程,怎样优化用户流程,怎样避免用户犯错并给出友好的反馈等等。
总之,多问一些为什么,多思考这样做的原因,可以通过交互设计七大定律、交互设计三要素以及5W1H规则等交互方法来进行实施和验证。