IAMUE
  • Home
  • 文章分类
    • 交互
      • 从零开始学交互
      • IxD案例
      • 微信热点
    • UXD
    • Wireframes
    • GUID
    • PM
  • More
    • AID
    • 资源下载
    • 作品集
    • 电子书:《从零开始做交互》
    • Sketch 4.9 - Sketch全系列免费下载(更新Sketch4.9)
    • 淘宝手机H5版UX移动交互设计规范
    • Axure基础入门
    • 隐私政策

实例分析:运营活动项目中交互设计的4大维度

Catherine • 2017-04-30 04:07 • 交互设计

文章以作者最近做的一个会员卡绑定激活的运营活动作为案例,总结了交互设计中的一些“套路”。我:这是什么个需求?
pm:一个会员卡激活绑定的流程页。
我:会员卡是什么东西?
pm:这是一个实体卡,是我们平台用户升级为会员用的,上面有logo,卡号和密码图层我:这卡是怎么来的?
pm:平台通过线下运营活动给平台老用户进行的福利或者用户进行购买获得。
我:会员卡有什么用?
pm:激活后可以将帐号升级为会员(类似qq会员那种)
我:用户要怎么才能激活?
pm:通过扫描会员卡后面的二维码来进行激活。
我:激活后又会怎样?
pm:激活后用户升级为会员,能享受各种xxxxx牛逼的特权。
我:为什么要做这个需求?
pm:让我们平台用户能够升级为会员,然后就…….
我:额……


文章以作者最近做的一个会员卡绑定激活的运营活动作为案例,总结了交互设计中的一些“套路”。

实例分析:运营活动项目中交互设计的4大维度

大家都知道,运营类app会经常做各式各样的运营活动,面对不同的活动类型,会有不同的需求和用户目标,怎样能够快速理解需求并做出逻辑清晰的交互方案,下面以最近做的一个会员卡绑定激活的运营活动作为案例来总结一下交互设计的那些“套路”:

首先,接到这个需求时,产品给了个简单的原型:

实例分析:运营活动项目中交互设计的4大维度

这是什么鬼?

大概看一下原型,可以看到有三个承载页面,第一步是要输入手机号和验证码,第二步输入卡密,最后一步验证成功,进行下载。咋一看一头雾水,这貌似是一个激活卡的流程,为了更加精准地了解产品需求,于是找到产品直接进行需求沟通(沟通前需要去思考用户场景和每个细节):

我:这是什么个需求?

pm:一个会员卡激活绑定的流程页。

我:会员卡是什么东西?

pm:这是一个实体卡,是我们平台用户升级为会员用的,上面有logo,卡号和密码图层

实例分析:运营活动项目中交互设计的4大维度

我:这卡是怎么来的?

pm:平台通过线下运营活动给平台老用户进行的福利或者用户进行购买获得。

我:会员卡有什么用?

pm:激活后可以将帐号升级为会员(类似qq会员那种)

我:用户要怎么才能激活?

pm:通过扫描会员卡后面的二维码来进行激活。

我:激活后又会怎样?

pm:激活后用户升级为会员,能享受各种xxxxx牛逼的特权。

我:为什么要做这个需求?

pm:让我们平台用户能够升级为会员,然后就…….

我:额……

好了,现在已经大概了解了项目需求,先出个一版交互看看:

实例分析:运营活动项目中交互设计的4大维度

额,感觉就是把产品原型稍微优化重新排个版而已,如果这样就算做交互了,那也太简单了,这个时候需要更加深入地思考和分析:

  • 上面的步骤流程有没有问题?第一步就要输入手机号?
  • 头部的广告是什么?跟激活卡有什么关系?会不会影响用户正常激活流程?
  • 按钮的文案是不是有问题?提示文案是不是太简单?用户是否看的懂?

……

从交互设计三要素重新梳理整个逻辑流程:

1、目标用户:大部分平台普通用户(非会员用户)和少量非平台用户,通过某些渠道活动营销或自己花钱购买到实体会员卡。

2、用户目标:希望用卡能够快速进行升级会员,然后可以享受各种xxxxx牛逼的特权,然后可以买各种便宜的东西等等。

3、使用场景:用户拿到会员卡后,看到卡背面有二维码,用户下意识地用微信去扫一扫,这个时候就要去思考,用户扫完二维码后出现的页面的心理预期是什么?难道应该是像产品原型里面那样直接出现输入手机号和验证码吗?仔细想想是不符合用户心理预期的,其实用户更希望看到关于卡详细的信息,以及这个卡怎么样一个激活流程,让用户提前看到激活的步骤和操作会让用户有更好的心理安全感,另外如果能让用户直接看到升级会员后能够带来哪些好处能够享受哪些特权会更加促使用户进行升级会员的操作。

分析了这么多,突然思路就清晰一些了,现在我们再重新优化一下交互,就当作第二个版本吧

实例分析:运营活动项目中交互设计的4大维度

嗯,现在看起来是不是页面结构清晰多了,用户通过扫描二维码进入后可以看到大大的标题“特奢汇会员卡激活”以及副标题“升级超级会员,尊享会员8大特权”从标题上就告知用户这确实是会员卡的激活流程,以及升级会员会享有8大特权,符合用户的心理预期。标题下面一块滑屏区,展示着升级会员后会享有的一些特权和好处,这个地方也是为了让用户更好地了解会员的好处并促使用户进行升级的诱发剂。滑屏区下面的步骤拆分区域也是为了更好地让用户感知到整个流程和需要操作的步骤。

看到这里感觉这版应该没有什么问题了,正当我要定稿的时候,为了确保没有遗漏什么重要的细节,还是要再仔细思考一下:

  • 页面流程是否有问题?是不是能够更简化?
  • 页面是否清晰明白?用户是否能够看的懂?
  • 用户当前的心理预期是什么样的?需要引导用户怎么操作?
  • 用户为什么要进行这个操作?用户的目标是什么?
  • 还有没有更好的方案?

……

不停地问为什么,同理心的目的就是让我们能够站在用户的角度去思考用户的心理和其行为模式。

抱着一定有更好的方案的思路才能不断突破:

实例分析:运营活动项目中交互设计的4大维度

优化后的思路是把特权滑屏区域去掉,将这里做成了实体卡样式。

为什么要这么做?还是要回到用户和场景本身,我们这里的主要用户群体是非会员用户,对我们的产品和平台有一定的关注和了解,能够接受花钱购买会员卡进行会员升级,说明该用户已经提前详细了解了平台会员所有的特权,并且有足够强的动力去完成会员卡激活等一系列流程,所以这个地方再次强调有哪些会员特权就显得意义不大。

考虑到用户是通过实体会员卡扫描二维码而进入的页面,所以在页面形态上面通过高度还原实体卡样式来展示,通过用户手中的实体卡和界面里面的卡来形成会员卡帐号的互通。当用户输入密码时,上面卡密区域也会同步进行密码输入的联动。

这样设计的好处就是能够让用户快速地进行场景带入,用户第一眼看到就很清楚地知道需要做什么操作,模拟实体卡设计符合用户当前的使用场景和心理预期,能够与用户产生情感上的共鸣。

最后再整理优化一下交互流程,添加细节描述和异常态:

实例分析:运营活动项目中交互设计的4大维度

好了,到目前为止交互的工作算是完成了,接下来就是视觉设计师的工作啦~

实例分析:运营活动项目中交互设计的4大维度

最后总结一下,在处理运营活动类交互设计时(其实适用于大部分交互设计类型)一般通过下面4个维度来分析:

  1. 用户:是什么样的人在用你的产品,这些人有哪些特点,有哪些诉求,用户画像越细越好;
  2. 目标:用户的目标是什么,用户想得到什么,能够给用户带来什么样的价值。
  3. 场景:场景化设计,考虑用户真实的使用场景,这里分为内部使用场景和外部环境场景等,针对不同的场景才能做成符合用户心理预期的设计。
  4. 流程:考虑用户在使用过程中在各个场景下分别会产生哪些行为流程,怎样优化用户流程,怎样避免用户犯错并给出友好的反馈等等。

总之,多问一些为什么,多思考这样做的原因,可以通过交互设计七大定律、交互设计三要素以及5W1H规则等交互方法来进行实施和验证。

 

本文由 @小米渣和大冬瓜 原创发布于人人都是产品经理。未经许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/21943/

logoVR交互交互设计产品产品经理原型场景微信案例分析沟通用户用户场景用户目标视觉视觉设计设计设计师转载运营运营活动
赞 (0)
CatherineCatherine
0
生成海报
运营设计常用“套路”拾趣(附实战案例)
上一篇 2017-04-30 03:15
【交互基础】系列之解析移动端导航设计模式
下一篇 2017-04-30 05:00

相关推荐

  • 微信热点

    网络心理学与用户体验:如何使用户爱上我们的产品?

    什么是网络心理学?网络心理学(Cyberpsychology)是研究人与科技交互的背景下人们的心理与行为的新兴学科。它关注网络世界以及网络对人们行为产生的影响。近年来,网络心理学逐渐脱离其他研究人类行为的学科(如社会心理学),形成了自己专门的心理学研究领域。了解来自这个新领域的研究可以帮助设计人员更准确地预测人类在使用不同技术时会如何反应。因此,在思考如何使用户爱上我们的产品时,了解网络心理学是一个非常有用的手段。通过更好地理解用户与技...

    2018-02-23
  • 微信热点

    气定神闲的珍珠

    快快点击关注人言风华绝代太难得,然而,一个人终日沉浸在王者农药里碌碌无为,几时能被时光打磨成气定神闲的珍珠?但,珍珠是天然的馈赠,美,则是一种修炼。这世界上的一切精致动人,都是狠狠的被修理出来的。软了不行,硬了也不行,得软硬兼施。就像选专业一样。就像选择计算机软件技术专业一样。你想让自己活得精致,过得洒脱,不对自己狠一点,社会对你狠一点。自己的狠,是由内而外的质变。社会的狠,是苟且偷生。自己的狠,是内软外硬,由环境的硬塑造内心你的软,打...

    2018-03-15
  • 五步走,带你了解交互设计流程 交互设计

    五步走,带你了解交互设计流程

    本文作者分享交互设计的流程,但切记具体问题具体分析哦~交互设计(Interaction Design):定义、设计人造系统的行为的设计领域。人造物,即人工制成物品,例如,软件、移动设备、人造环境、服务、可佩带装置以及系统的组织结构。交互设计在于定义人造物的行为方式(the interaction, 即人工制品在特定场景下的反应方式)相关的界面。
    ——维基百科

    2017-05-09
  • 如何写一份出色的交互设计文档,给程序员以美的享受? IxD案例

    如何写一份出色的交互设计文档,给程序员以美的享受?

    交互设计文档分为两个版本:一个是界面元素标注版,另一个是附带交互逻辑版。那么,具体的写法和要求如何呢?

    2016-07-11
  • 【原译】迪士尼中的UX(下篇) 交互设计

    【原译】迪士尼中的UX(下篇)

    上次有简单介绍迪士尼十二原则的基本概念,这篇文章则是韩国pxd设计小组与迪士尼设计大师Glen Keane先生的一次更加深入的访谈与讨论。 在正式开始这篇文章之前,先给大家稍微展示动画《Duet》中的一个小片段。《Due…

    2015-10-27
  • 微信热点

    做好用户体验是赢得口碑营销的关键

    点击上方蓝色字体关注-商业洞察与您一起把脉商业未来趋势,洞见企业未来成功之道文/陈楠华:中国管理科学研究院特聘研究员,2015年度新三板十大新锐人物,2015年度中国创新经济领军人物,中国富爱产业链控股集团董事长,富爱科技产业发展有限公司董事长。本文由商业洞察战略合作伙伴竹石文化授权发布转载请标明作者、来源和ID用户体验:口碑的源头“用户体验”在近几年被热炒的“互联网思维”中是一个重要的关键词。现在的商业评论在点评各大公司最新推出的品牌...

    2018-03-26
  • 微信热点

    新知 | 在打造用户体验上,连雷军都要向这家企业学习

    在我们之前发布过的一篇文章《小米八周年:雷军揭秘四大成功之道》中提到过,雷军在创建小米时受到了美国零售连锁超市好市多(Costco)的启发,从价值体系上来看,小米与好市多相同,都是希望用户能以可承受得起的价格享用更好的产品。好市多以优质、低价出名,在全球拥有700多个分店。从2006年到2016年,好市多的市值增长了五倍,如今的市值约为670亿美元。好市多亚洲区总裁张嗣汉在2018零售业年会上分享了好市多的运营模式、会员制度,以及管理层...

    2018-05-04
  • 功能确定之后,如何做好产品的交互设计? 从零开始学交互

    功能确定之后,如何做好产品的交互设计?

    功能和数据都确定下之后,接下来我们就要把功能数据给设计出来,也就是决定它们长啥样,怎么操作的。如果说前面的分析研究、需求定义、功能数据确定是“做正确的事”,现在开始我们就要“正确地做事”,方向抓准了,我…

    2017-08-03
  • 当用户操作错误时,如何在不影响用户体验的情况下快速处理好 交互设计

    当用户操作错误时,如何在不影响用户体验的情况下快速处理好

    在很多界面中,错误的产生不可避免。一旦发生错误,要帮助用户快速轻松地处理好。

    2017-05-23
  • 微信热点

    12个关于用户体验的界面设计细节

    点击上方"工信商务培训学校"↑文章列举了一些界面设计中的案例细节,希望对产品设计工作有所帮助。UI设计工作中,设计师们往往不喜欢将界面设计得与原型图一致,总会刻意的去寻求存在感与原型做出差别,那么对于UI设计师来说,更应该懂得用户体验,成为办个用户体验设计师。以下列举了一些界面设计中的案例细节,希望对设计师们有所帮助。一.图标1.统一图标的样式图标在界面设计中还是占着较大的比重,它的存在有利于平衡界面,也让页面看起来更加的美观,也有一定...

    2018-04-06
  • UED书单
  • 微信精选
  • 投稿说明
  • 赞助

Copyright © 2024 WPCOM 版权所有 粤ICP备000000000号 Powered by WordPress