梳理适合自己的交互自查表

梳理适合自己的交互自查表

年底了,工作节奏逐渐空闲起来,回顾一下这大半年的工作内容和踩过的坑,发现其实很多问题都是易被忽略或经常重复出现的那种,于是脑海里想起来一个东西——交互自查表。

作为设计师,如何保证设计质量保证自己的专业性,在方案输出后不被项目组成员以及老板们提出各种挑战?交互自查表就是用于解决这些问题的工具。那么应该如何进行高效的设计自查?我看到过网上有各种版本,总觉得没有贴合自己的需求,于是就结合自己平时的项目经验及其他同学分享的内容,梳理出来这份适合自己的自查表。但这绝对不是终结版,还会持续不断更新优化,最终以提升设计质量,保证设计方案经得起检验。

一、明确用户核心使用场景及影响因素

不同的产品对应的用户场景和操作流程是不同的,设计投入前定好的那些功能需求,在设计产出后再回过头来检验一遍方案是否真正满足用户需求?在体验上是否还有优化空间?以及各种影响因素都要一并考虑进去。

  • 在哪些主场景下完成什么任务?
  • 有哪些核心影响因素?

二、整理产品框架及流程

按照核心任务梳理流程,检验整理的流程图是否有问题。设计稿常常在开始设计和中间过程会经过不断地调整,结合各方意见最终定稿,所以很难保证原本设定好的流程是否会发生变化,这里都需要设计师进行把控,从整体到局部,防止出现逻辑问题,保证最重要的核心任务流完成。

框架布局

  • 框架结构:能否承载产品功能?明确操作区域、内容区域等是否合理统一?
  • 信息层次:是否清晰,重要的信息是否优先展示
  • 信息组织:是否可合并归类,没有重复信息
  • 功能操作:是否易操作,重要、频繁触发的功能按钮是否在手机的可操作区域
  • 导航:广度和深度是否适中、易操作、拓展性好;导航完整性,顶部菜单、手风琴菜单、面包屑(二级以上菜单)、步骤导航(不要超过5步)
  • 页面打开方式:当前页打开(单个服务刷新页面)、在新窗口中打开(两个服务两种内容的跳转)的场景总结
  • 页面滚动方式:系统滚动条滚动、指定区域滚动
  • 颜色:背景色、线条色、图标颜色、多种状态色(成功、失败、失效、未完成、审核中等)、告警颜色(紧急>重要>次要>提示>正常)、文本颜色(标题、次级重要信息、置灰文字、链接文字)

流程

  • 核心任务流程:从头到尾是否能顺畅走通
  • 全景图:全站页面分布和组织情况,页面之间的跳转关系
  • 框架图:关键界面的框架梳理,体现优先级关系
  • 异常流程:退出、撤销、重置、返回、不通过、过期失效
  • 返回:从哪里来是否可以回到那里去
  • 保存:复杂任务流是否支持保存或自动保存;意外退出前保存提示
  • 复杂状态之间的变化关系:子流程梳理辅助说明

三、按页面流逐一梳理界面内容细节

接着,以页面流仔细梳理每一个界面的内容细节。枚举了最基本的几种内容形式

文本内容

  • 文本长度:是否有限制?
  • 文案内容:是否完整、通俗易懂、有趣
  • 超过负载时如何显示?
  • 核心词汇是否统一(如各种用户角色名称)
  • 重要、复杂的操作内容是否有清晰的解释说明?
  • 浏览到内容底部的情感化表达

控件

  • 按钮类型:主按钮、次按钮、幽灵按钮、虚线按钮是否按需区分使用(一般一个界面或视窗中只有一个主按钮)
  • 按钮状态:默认、经过、点击、置灰、选中、加载中(提交按钮);其中不同状态下按钮的置灰,是否有说明为什么不可用?以及按钮激活条件是什么?
  • 链接:点击后颜色是否有变化
  • 选择组件:单选、多选、tab选,是否有默认选中项
  • 输入框:输入及时校验,有错误时定位;有特殊输入条件限制的输入框是否有明确说明

表格

  • 基础表格:内容项过多时,考虑将次要身份鉴别类信息隐藏,鼠标浮动到对应字段后浮窗显示
  • 表格排序:默认排序和切换排序,核心字段的默认宽度
  • 表格操作:考虑在当前表格内完成(页内编辑);批量操作时对于互斥的选项处理
  • 对齐:一般文字左对齐,数字右对齐
  • 折叠、展开 :主要内容在列内显示,更多内容点击展开显示
  • 分页:表格内容翻页展示还是无限加载?若分页每页显示多少条内容

弹窗

  • 遮罩:是否有背景遮罩
  • 操作:主行动点是否突显,有无取消操作
  • 核心、毁灭性操作是否有二次确认提示?
  • 足不出户:避免滥用 Modal 进行二次确认,考虑使用覆盖层直接操作,并支持撤销
  • 无线modality:按照规范使用相应modality

四、交互与反馈

上一步主要是一个产品看起来怎么样;而这一步是这个产品用起来会怎么样,用户如何跟产品交流?在满足产品基本功能的基础上,如何更大的优化用户体验?

A状态到B状态

A.触发时

  • 触发源:操作按钮在当前界面中是否明确
  • 触发区域:操作按钮是否易操作易触达
  • 未释放状态:考虑内容过多或展示过快时支持长按停留内容;是否可以取消,例如发送语音消息,此时是否允许用户取消发送;

B.触发后

  • 结果反馈:是否有反馈,反馈是否备注清楚,选择轻(tip/小红点)、中(Toast)、重(提示框)提示优先级别是否恰当;常见的结果类型有成功、失败、空(搜索)、无权限;触发的控件是否有状态变化
  • 加载状态:状态改变的等待时间是否超过3S左右,如果太长是否需要加入加载状态
  • 转场动效:是否需要添加有趣的转场动效
  • 撤销:是否支持撤销操作

刷新和加载

  • 刷新:自动还是手动刷新?每次刷新加载多少条内容?刷新失败如何提示?
  • 无线刷新:顶部下拉、底部上拉,安卓有刷新按钮
  • 加载:复杂页面是否有副列表加载?预览、保存、提交的完成时间若超过3S是否有加载的过渡状态?新加载内容是否有高亮底纹显示?

通知机制

  • 回流:多端任务流是否需发送通知(钉钉、邮件、旺信、短信等)拉用户回到平台?发送通知的触发状态是否交代清楚
  • 消息推送:是否需要消息推送C用户,调用系统通知还是第三方还是其他方式
  • 推送策略:是否备注通知的推送时间、表现形式、失效策略

五、特殊情景再复查

此外,还有一些特殊情况要考虑,多是一些很容易疏忽的细节,需要对于这些特殊因素再次复查是否遗漏

硬件设备

  • 横竖屏:是否支持横屏显示,横竖屏时布局及功能是否完整
  • 分辨率高低:分辨率情况下是否会有适配问题,例如5s等小屏手机下内容展示及操作区域是否足够?
  • 硬件、系统版本:不同手机的物理按键、系统等不同,是否需要备注
  • 应用版本:新增功能是否影响老版本,是否需要升级
  • 硬件交互:定位、蓝牙是否打开?需要调用GPS、相机的使用权限吗?如何让用户更加愿意授权?

模式

  • 编辑模式:编辑模式下出现意外情况是否提示保存或自动保存已填信息
  • 夜间模式:是否需要考虑夜间模式(有没有光线较暗的场景)
  • 无图模式:数据流量环境下是否提示切换无图模式
  • 低电量模式:是否减弱部分视觉效果,停用富文本内容的自动刷新与下载
  • 沉浸模式:如全屏模式、VR模式,考虑退出操作的便捷性和信息提示弱打断

网络状态

  • 没有网络(无网)
  • 网络超时(断网)
  • 网络太慢(弱网)
  • 网络环境变化:从WiFi到数据流量环境时是否需要切换视图
  • 加载失败:是否自动重新加载?

异常

  • 异常操作:连续多次点击给予反馈、统一设备登录多个账号验证码、统一IP;连续破坏性操作n项内容时是否需要身份验证
  • 数据相关:进入页面后服务器获取不到数据;搜索无结果状态;数据加载时间较长时预设默认图片、状态、内容框架;
  • 错误提示页:404页面、即将上线、页面失效、服务下线、系统繁忙,考虑出错页面内容情感化表达以减弱用户的受挫感

账号权限

  • 未登录:登录和未登录按钮权限差别,需要登录后才可操作的功能是否备注
  • 用户权限:需要读取权限吗?如何描述读取内容让用户读?不同权限管理

其他

  • 是否需新手引导页
  • 是否需要进行埋点,以便分析用户行为?
  • 技术可行性
  • 必要的动效提供

总结

其实,交互自查的核心目标是:工作效率和质量的一并提升。这决定了自查表应该是不冗余的,在高效迭代的产品进程中能够快速发挥作用,通过自查表可以减少技术返工,不能因为要检查而拉长设计交付的时期。但是现在自查表还是过长,后续我会根据在实际项目中的检验不断精细打磨,欢迎大家指正。最后附上梳理好的交互自查表:

编辑于 2017-01-24

文章被以下专栏收录