在公司中作为职能部门的UED团队,需要站在用户的角度思辨业务,通过服务内部客户进而服务我们的最终用户,用设计专业帮助业务成功,与业务一起成长。
设计师不能把设计目标等同于用户体验目标
五导家步骤说明:
1、明确业务诉求
完整而明确的业务诉求包含四部分:
1)精准定位的目标用户(市场划分)
2)主张为目标用户带来的核心价值(对目标用户的实用意义)
3)价值的变现模式(收入模型)
4)价值的实现策略(主要落地办法)
2、洞见用户诉求
包含三部分:
1)场景故事(目标用户的特征、情景、任务/诉求、行为/说法、结果等)
2)用户当前的主导诉求
3)用户的潜在诉求
3、定义业务目标,聚焦设计目标
设计目标服务于业务目标
作为设计师必须清楚的指导完整的业务目标是什么
4、设定衡量设计目标的数据指标
衡量的目的不是获得准确性,而是降低不准确性
数据指标,应该遵循“VSM”的推导思路:设计价值(value)得以实现,会有相应的现象或者信号(signal)出现,有了现象或者信号,就能够找到可以表述和衡量它们的数据指标(metric),并以此反映设计价值的变化。
5、根据设计目标构建设计方案
“SKS”推导思路:明确设计策略(strategy),挖掘决定策略实现的关键因素(key factor),再有关键因素衍生出最终的设计方案(solution)
数据在互联网产品设计中的应用
“5度”模型:基于用户体验周期的多维度指标体系,从吸引度、完成度、满意度、忠诚度和推荐度这五个维度来评价用户体验质量。(用户体验评价的宏观指标)
用户体验数据指标定义
GSM模型:目标(goal)——>信号(signal)——>指标(metric)
目标:是通过设计实现的目标,在整个产品中,有些目标是不能通过设计实现的。
信号:设计目标实现以后,出现的现象,这个现象一定是因为设计目标实现产生的。
指标:对用户现象进行量化,将用户现象数据化。
用户体验评价的“四象”:当前态度、当前行为、长远态度、长远行为
用户体验周期的5个阶段:
当前阶段,3个过程
1、触达——>吸引度,相关数据指标:知晓率、到达率、点击率、退出率等
2、行动——>完成度,相关数据指标:首次点击时间、操作完成时间、操作完成点击数、操作完成率、操作失败率、操作出错率等
3、感知——>满意度,相关数据指标:操作容易度、布局合理性、界面美观度、表达内容易读性等各方面的主观评价
长远阶段,2种表现
1、回访 ——>忠诚度,相关数据指标:30天/7天回访率、不同平台的使用重合率等
2、传播——>推荐度,相关数据指标:净推荐值(NPS)
数据在设计中的作用:
1、设计前用于发现问题
2、设计中用于判断思路
3、设计后用于验证设计
设计前发现问题
1、定义指标:要看什么数据主要是由设计目标决定的,或者根据定性研究/分析决定需要关注的数据。查看数据的顺序是要先看重要性高的数据指标,再看重要性低的数据指标。
2、对比。通常用到的数据对比有三种类型:横向对比(和同类比,看相对大小)、纵向对比(和自己的过往比,看变化趋势)、人群对比(把用户群细分之后作对比,看群体差异)。
3、寻因/溯源
设计中判断思路
1、定义指标:先找出不同设计思路的本质区别,然后定义这个本质区别所对应的数据指标。对于单个思路论证可行性,要看这个思路的关键因素是什么?
2、论证思路:
设计后验证设计
1、定义指标:数据指标主要由设计目标决定。
2、验证设计:
经验与技巧
从用户的角度看问题
没有数据怎么办?
1)使用近似或同类数据替代
2)通过用户调查获得数据
3)数据也可以作为设计元素
4)灵活使用统计方法
交互设计师说话之道——交互输出物再思考
交互设计师需要的能力:全局把控、细节专注
交互输出物的原则与类型
原则:1)易于理解,在交互文档中,展现的不仅仅是设计方案,还需要体现自己的思考过程,所以在设计中要保留自己在过程中尝试的方案。交互设计师不仅需要完成项目的设计方案,还需要将需求分析,项目目标拆解等思考过程融入到自己的设计方案输出中。
2)利于协同
高段位交互输出物
交互设计师产出内容需要上升到设计师对项目前、中、后三个阶段全程思考和创新的跟踪与记录,并且根据项目的重要程度(A+、A、B、C层级)来确定项目交互阶段需要产出的内容范围。
层层递进的文档逻辑
常用的四种组织方式:
1、按修改版本组织:使用重点单页面型项目,如网站首页、行业频道等。
2、按产品层级关系组织:适用于整体平台类项目,如我的阿里。
3、按操作流程组织:适用于业务流程型项目,如下单付款、会员开通等项目。
4、按参与人员组织:适用多个交互设计师共同完成的项目,如项目共建。
元思考
项目接手,开始做设计时,需要想明白三个问题:
1、为什么要做这个?(目标)
2、这个需求针对的用户群是什么?(用户)
3、什么场景下会使用使用到这个功能?(场景)
设计前大量的设计分析和数据梳理等部分思考过程放进交互输出文档中。让自己的设计变得理性,更具有说服力。
信息架构规划图
在了解了项目全局信息架构以后,根据信息的优先层次、用户的关键路径和业务逻辑信息来设计页面信息的架构规划图。包含两个关键点:
1、界面主体的布局和框架,比如搜索框位置、主体导航框架、产品坑位、页面区块划分等。
2、用户视觉流的规划,比如一个频道页面、页面的重点信息的传达、用户对于信息认知的过程。
任务流程图和页面流程图
任务流程图:常常以一个用户角色完成项目中从开始到结束的所有任务的流程图。
页面流程图:值这个项目或者产品中涉及的页面,以及页面上下游之间的跳转关系和组织表达的方法。
状态注释:
交互文档可协同性
记录项目所有的历史过程。
心得
1、文档命名,规则:项目名称—版本号—设计师--日期
2、根据栅格规范来布局,为了跟视觉设计师更好的合作
3、第一屏内容决定产品的转化:作第一屏的交互方案时,注意两点
1)页面的重点内容是否在第一屏有展示?
2)页面是否让用户感知到下面的内容更精彩?
画出一屏线高度,需要知道设计的产品目标用户的几个数据:
1)使用设备的分辨率
2)浏览器类型和版本
3)使用设备的系统:PC还是MAC
一屏高度 估算公式:一屏线高度=分辨率高度—浏览器高度—系统top bar 高度(OS)
4、善用组件和控件库
5、文案真实
6、避免使用截图:3点建议
1)如果在设计过程中,内容尚未确定,建议使用占位符
2)如果需要后续视觉深入,建议在旁边标注或者用文字的形式描述,会更加贴切
3)如果是一些常用控件,建议你就趁当下建立自己的控件库。
web 动效研究与实践
在设计web动效的时候,要根据运动过程的物理法则,对物理法则进行分析和映射。
web动效方案的输出
前端同学无法精确还原动效,所以需要绘制出运动曲线,然后得到一个包含时间点、关键帧、触发条件、运动过程和空间幅度的完整时间文档,这样就可以清晰显示出页面区块元素在每一个时间点的样式和样式之间的过度。
web 动效的实现手段
一个小动效让前端不断的写代码,性价比太低,实际上,前端可以提供一个画布区域,设计师通过逐帧动画的设计实现效果,会更加有效的提升产品开发效率。
1、gif动画
2、webM视频
3、PNG序列
(雪碧图?需要研究一下)
贝塞尔曲线