<menuitem id="mh6do"></menuitem>

    
    
    <em id="mh6do"><ol id="mh6do"><mark id="mh6do"></mark></ol></em>
    <ol id="mh6do"></ol>
      <em id="mh6do"><tr id="mh6do"></tr></em>
      <dl id="mh6do"><ins id="mh6do"><thead id="mh6do"></thead></ins></dl>

      <sup id="mh6do"><menu id="mh6do"><small id="mh6do"></small></menu></sup>

      您的意见是我们 UI 中国进步的动力!
      点击立即反馈按钮,发表您的意见!
      立即反馈
      QQ群反馈
      您?#37096;?#20197;加入UI中国官方反馈群进行反馈!
      群号:302892100
      备注:反馈问题后@管理员能让我们及时了解您的意见

      金融产品体验设计思考

      原创文章 分类: 经验/观点 版权:
      9608 355 163 24
      2019-03-15
      82.9
      首页推荐

      “互联网金融产品是一个复杂并具有一定门槛的产品。设计师需要利用设计思维和合理的设?#21697;?#27861;向用户传递产品的安全感,降低用户对互金产品的认知难度,提升用户体验。”

      Image title

      与其他产品相比,互联网金融产品是个稍具门槛兼具复杂性的产品,我们在进行用户调研研究后得知:大部分用户并没有太多金融知识的储备,且防范心理较为?#29616;?/strong>。这?#20013;?#24687;不对称的现象久而久之会导致用户对金融产品敬而远之或心生戒备。因此作为一名金融产品设计师,需要在兼顾金融产品的特殊性的基础上,打破信息的不对称,利用设计思维和方法设计体验良好的金融产品。


      在此,我将结合目前工作的思考以及?#23548;?#26696;例与大家分享,以期?#25945;幀?/p>

      Image title

      用户在使用金融产品时对安全性的极度?#26159;?#26159;我们在日常的设计过程当中需要经常思考的一项问题。


      我们知道情感的建立,往往是从认知开始,经历“认知-操作-反思?#27604;?#20010;阶段。唐纳德?#24503;?#20063;在他的《设计心理学:情感设计》一书中提到:情感的体验是由本能、行为、反思三个层面共同决定的。


      首先是本能层次的设计;这是用户对产品在外形、色彩、触感等方面属性产生的较初级的情感。在app应用方面,主要的设计对象是色彩


      其次是行为层次的设计;行为层的情感是用户同产品交互时所感知和操作得到的。这一层面的设计对象主要是认知的信息和操作


      最后是反思层的设计;反思层的设计不仅仅是能用(本能层)和好用(行为层)层面的设计,更多的是唤起用户对产品回忆、认知自?#19994;?#35774;计。在移动产品中这一层面的设计对象主要是反馈与提示

      Image title

      01?-?选择稳重的视觉色调


      在体验中,色彩很容易唤起用户本能层同某一情感的联系。而在一众色系当中,蓝色色系所表示的理智、沉静?#32676;?#20041;是最能体现出安全感的。?#27604;唬感?#30340;你可能会发现当前金融产品中还广泛应用了红色色系。这一现象与这里阐述的并无冲突,红色色系所代表的活力、热情也是金融产品期待传达给用户的情感,仅仅是在传达过程中偏重不同罢了。

      Image title


      02?-?信息清晰准确、具备实时性


      在金融产品中,信息最受强调的特性是其表达的准确性和实时性;这两个特性很大程度上的决定了用户对产品的信赖感,也影响了用户的去留。我们以?#23548;?#39029;面为例:

      在相同的交易结果页面当中,左侧详细地描述了交易状态、资金流动去向、产品名称及份额还有不受重视的订单号(明确的订单号有助于客服快速定位客户订单),并按优先级划分了信息层级。而?#20063;?#30340;结果页仅仅描述了交易订单的状态节点,其他信息诸如:资金流动去向,产品名称及份额并无描述。所以左侧的页面信息相较?#20063;?#26356;准确、清晰,也更让用户?#34892;?#36182;感。

      Image title


      再来看信息实时性的作用:左侧页面在刷新后底部会弹出toast提示数据更新状态,页面中的每条数据的底部也会短暂的出现渐变色条提示数据已更新。而?#20063;?#39029;面的数据刷新后,由于没有提示,用户会很难感知到多个数据的变动。所以左侧的页面相较于?#20063;?#22312;实时提示方面做的更好。

      Image title


      03?-?操作中的防错、容错与可控


      易操作是一款产品具备良好体验的基础。在这里我们可以通过设置操作前的防错设计、操作中状态可控设计以及操作后的容错设计来帮助用户在行为层建立安全感。

      例如,金额输入框的防错设计,可以做到实时提示用户输入的状态;资产数据的隐藏/显示按钮帮助用户实现数据状态的可控;金融产品购买后的撤销按钮给用户提供了一定的容错空间。

      Image title


      04?-?反馈及时且明确


      体验良好的产品总会在恰当的时间给予恰当的反馈,不反馈、反馈不及时、反馈信息不对都会让用户产生反感情绪(反思层),从而失去用户。涉及?#38454;?#37329;流动的金融产品的反馈如果出现以上问题,用户的反感情绪尤甚。而好的反馈后帮助用户建立起对产品的良好印象,结合金融产品的特性,好的反馈会使用户对产品产生信赖感。

      Image title


      Image title

      Image title

      基于以上理论的提出,我们针对金融产品信息本身具有一定理解难度、操作相对复杂等特性,制定出了以下四点设计解决策略以降低信息理解门槛,减少认知摩擦:


      1) 简化复杂信息


      2) 明确组织信息


      3) 减少不必要的信息干扰


      4) 简化复杂任务

      Image title


      01?-?简化复杂信息


      针对内在认知负荷:虽然信息的数量、种类、复杂性一定程度上无法改变的,但是用户自身内部因素引起的内在认知负荷是可以降低的。如果我们将金融产品专业且复杂的信息通过图示的方式同用户大脑进行关联,也就是我们常说的信息可视化,那么认知负荷就会较低。其他一些处理办法例如将专业术语口语化,将信息碎片整合都是简化复杂信息、降低内在认知负荷的处理办法。

      Image title


      02?-?信息归类明确


      很多时候设计师是没有办法控制页面呈现的信息多少的,金融产品尤甚,在监管要求下,许多相关的金融条款信息必须展示给用户。在这?#26234;?#20917;下,作为设计师,我们可以通过信息的组织来保障信息用户获取大量信息的效果。结构划分合理信息层级清晰可以作为信息归类明确的两个依据。


      结构划分合理

      Image title


      信息层级清晰

      Image title


      03?-?减少不必要信息的干扰?


      金融产品在使用中存在诸多场景,例如注册登录、资金操作、账户操作等。许多场景中需要完成多个任务?#28304;?#25104;目标,而不当的信息呈现和组织会造成额外的认知加工。因此我们可以通过合理的删除和隐藏不必要的信息来减少外在认知负荷的干扰。

      Image title


      04?-?简化复杂任务


      在认知负荷理论中,J.Sweller认为在认知信息加工过程中,人的?#19988;?#23481;量、认知资源数量是有限的。操作任务越是复杂,用户所耗费的时间和注意力也会相应的增加。在设计当中,删除冗余步骤、转移操作对象、简化操作方式都是?#34892;?#31616;化复杂任务的方法。


      减少操作步骤


      任务操作中的步骤越长,用户所投入的认知资源的数量就越多,而复杂的任务也往往来源于冗余的操作步骤。


      例如在金融产品的使用过程中,支付操作是比较高频次的使用场景。这里截取支付?#25214;?#21488;改版前后的页面进行?#21592;取?#21487;以发现,左侧页面页面将支付方式的选项提前,这一做法避免了?#20063;?#39029;面不必要的页面跳转,省去了中间多余的步骤。

      Image title


      将复杂任务转?#32856;低?/p>


      每一个过程?#21152;?#20854;固定的复杂性。这一固有的复杂性无法依照我们的意愿消失,只能设法调整、平衡。而复杂?#28304;?#22312;一个临界点,超过?#33487;?#20010;点,过程就无法再简化了。只能将固有的复杂?#28304;?#19968;个地方转移到另一个地方。在交互设计中,我们可以将复杂操作从用户转?#32856;低常?#35753;?#20302;?#20195;替用户进行操作。


      金融产品在使用中包含了许中录入数据信息的场景,例如记录用户名和密码,自动带入用户常选择的支付方式等设计细节都是通过将复杂的任务转?#32856;低?#26469;减轻用户的操作负担。

      Image title


      简化操作方式


      回想一下金融产品出现指纹支付前的支付流程:我们在输入金额后,点击?#33539;?#25353;钮跳出密码输入框,用户需要输入正确的支付密码并点击?#33539;?#20197;后,支付流程才会结束。整个过程耗时10几秒,而指纹支付功能只需要用?#31181;?#25509;触home键即可完成任务,这种简化的操作方式大大的优化了支付流程。


      类似的方?#20132;?#20986;现在了其他的一些场景中,例如用滑动刻度尺?#33539;?#37329;额的方式代替输入操作能够更快地将投资?#25214;?#20449;息反馈给用户。

      Image title


      Image title

      人的行为并不完全是自己主动选择的,而是社会情境和个人因素双重作用下产生的。?#22266;?#31119;大学的福格教授在09年提出了行为发生的模型,简单?#27492;?#23601;是:B=MAT,即影响用户消费行为的因素有三:用户动机(M)、用户能力(A)、触发器(T)。

      Image title


      01?-?增强行为动机


      一般而言,用户在使用互金产品时具有较强的行为动机,针对这类用户,设计师只需做?#25945;?#21319;用户能力、设置合理的触发器即可。但存在部分随意浏览的用户,他们的使用动机并没有前一类那么强烈,而造成这一现象的根本原因是?#32856;?#22686;值需求对这类用户而?#28304;?#22312;马斯洛需求的较高层级,用户没有产生是对金融产品的缺乏感。


      设计师可以通过以下两个策略来增强用户的行为动机:


      ?#19994;?#20154;们行为背后隐藏的动机,刻意制造缺乏感,刺激并且强化;


      把高层次、非刚需转化为低层次、刚需,激起消费者的生存威胁感;

      Image title


      02?-?提高用户能力

      我们在前文提到,用户的能力一般而言是固定的,但提高能力的另一种方法可以是降低购买行为的门槛,降低消费者行为的成本。具体而言是:


      降低学习成本;


      降低行动成本;


      降低决策成本;


      前文思考二部分所提到的“降低用户理解门槛”其实也是在变相阐述如何提高用户在购买行为当中的能力,因?#33487;?#37324;不对降低学习成本、行动成本、决策成本做过多的赘述。


      03?-?设置行为触发器


      在用户具备了最初的动机和行为能力后,触发器成为了用户进行购买行为的最后一环。常见的触发设置有两种:利益刺激场?#25353;?#28608;


      1) 利益刺激用户


      例如用户在购买前看到的费?#25910;?#25187;信息、输入金额后所看到的预期?#25214;?#20449;息都可以算作是购买行为的触发器。

      Image title


      2) 场?#25353;?#28608;用户


      ?#28909;?#29992;户在查看某一金融产品时弹出了其他用户的购买信息,那?#30784;?#24377;出”的购买信息就是触发器,它会一定程度上的刺激用户的购买欲。

      Image title

      与其他产品相比,互金产品是一个比较复杂并具有一定门槛的产品。不断更新的金融管控政策和复杂的金融业务要求设计师能够在狭缝间做好用户体验。如何利用设计思维和合理的设?#21697;?#27861;?#21019;?#36882;产品的安全感,降低互金产品的认知难度,提升产品转化率是我们的最终设计目标。


      END


      作者


      奚宏伟? 苏宁金融用户体验中心? 交互设计师


      「特长?#26500;低?撕逼)


      「属性」Nice(耐撕)


      「爱好」深夜撸图




      苏宁设计

      苏宁设计,一直致力于促进用户体验行业的交流与知识分享。

      165粉丝/0关注

      8
      willing200

      支付宝的那个弹?#23433;?#26159;多余的,作为用户在支付?#26041;?#26159;比较关心的,多一步信息确认弹出,用户心理会感觉踏实,而且支付宝弹窗里有一个重要信息就是是否用零钱支付,用户体验不是一味的减少步骤,还要考虑用户心理,只要每一个步骤让用户觉得合理和自然

      精彩!

      • 0
        萝莉音
        萝莉音

        很棒,超级赞,加qu)n:【583】【915】【450】,每天晚上八点免费公开?#27493;?#35838;哦,很适合零基础,群文件有PS、AI软件下载,教程视频。

      • 0
        182****9200
        182****9200

        产品经理零基础培训--口碑最好的产品经理?#20302;?#23398;习中心--产品经理梦工厂

      • 0
        jiujiayi
        jiujiayi

        请教一下,2.2里说到的:信息归类明确。基金产品页 拆分欠佳的图,为什么把交易规则?#35834;?#27010;况里啊?#28212;?#23454;上我觉得交易规则相当重要。?#28909;?#25903;付宝就是在产品页有板块。

      • 1
        jiujiayi
        jiujiayi

        用户指纹/滑动操作那张图,放错位置了吧?是应该属于第二项:提高用户能力的范畴吧?

      • 0
        GuoJun
        GuoJun

        6666666666666

      • 0
        Daisy1108
        Daisy1108

        【将复杂任务转?#32856;低场?和 【增强行为动机】 两个小节的图?#22797;?#20102;位置。

      • 0
        李好纠结额
        李好纠结额

        @willing200: 支付宝的那个弹?#23433;?#26159;多余的,作为用户在支付?#26041;?#26159;比较关心的,多一步信息确认弹出,用户心理会感觉踏实,而且支付宝弹窗里有一个重要信息就是是否用零钱支付,用户体验不是一味的减少步骤,还要考虑用户心理,只要每一个步骤让用户觉得合理和自然

        确实 这一步选择很重要的 简化了之后虽然流程上看似少了 但非常容?#33258;?#25104;不选择就直接买

      • 0
        橘?#20248;?#27915;洋
        橘?#20248;?#27915;洋

        @Jaco_Zhu: 一直想问,交互设计?#38477;?#20570;的什么?#35838;?#22312;那边的时候在另外一个组的用户体验中心,但是不是交互,纯UI设计……组里还准备招一个交互设计师……

        做ui设计图也是用户体验的其中一环啊,信息的显示是否合理,也直接关系到用户在使用你这个产品的时候的体验嘛。有时候设计无法决定功能,但是可以在现有功能上进一步迭代设计稿,提高用户体验嘛

      • 0
        李好纠结额
        李好纠结额

        京东金融

      • 0
        哥是man,不是姐
        哥是man,不是姐

        @willing200: 支付宝的那个弹?#23433;?#26159;多余的,作为用户在支付?#26041;?#26159;比较关心的,多一步信息确认弹出,用户心理会感觉踏实,而且支付宝弹窗里有一个重要信息就是是否用零钱支付,用户体验不是一味的减少步骤,还要考虑用户心理,只要每一个步骤让用户觉得合理和自然

        同感,作为一个支付工具--安全感是最重要的

      • 更多评论

      苏宁设计

      TA已经获得0枚勋章啦

      • 成就勋章

        • 特别勋章

        • 身份勋章

      • 已拥有

      • 作品

        创造者才是真正的享受者。

      • 经验

        经验是一所好学校,可它的学生却经常旷课。

      • 活跃

        大神都是从围观群众开始的

      • 拓展

        作品、经验、活跃还不能满足你?

      京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by 2008-2019 UI.CN

      印度快乐8开奖号码
        <menuitem id="mh6do"></menuitem>

        
        
        <em id="mh6do"><ol id="mh6do"><mark id="mh6do"></mark></ol></em>
        <ol id="mh6do"></ol>
          <em id="mh6do"><tr id="mh6do"></tr></em>
          <dl id="mh6do"><ins id="mh6do"><thead id="mh6do"></thead></ins></dl>

          <sup id="mh6do"><menu id="mh6do"><small id="mh6do"></small></menu></sup>
            <menuitem id="mh6do"></menuitem>

            
            
            <em id="mh6do"><ol id="mh6do"><mark id="mh6do"></mark></ol></em>
            <ol id="mh6do"></ol>
              <em id="mh6do"><tr id="mh6do"></tr></em>
              <dl id="mh6do"><ins id="mh6do"><thead id="mh6do"></thead></ins></dl>

              <sup id="mh6do"><menu id="mh6do"><small id="mh6do"></small></menu></sup>