让你事半功倍的交互体验自查清单

标签: 原型设计 交互设计 用户体验 | 发表时间:2015-01-29 13:16 | 作者:麦东东
出处:http://www.woshipm.com

东东推荐:刚画完的原型自我感觉良好,当到了评审的时候发现在用户体验槽点非常的多。如果你遇到上面的情景,那么这篇文章对你绝对有用。事不宜迟,请看下文。

wz00

体验清单起因

去年底看朋友出国前用‘穷游清单’给自己列清单,她说列的清单可以帮她在出行前检查一下是否有遗漏东西,避免因遗漏东西使整个旅行变得很糟。既然旅游清单可以使旅游提前避免问题发生,是不是我们在工作中也可以采用这种方式使自己的产出物交付前保证万无一失。

在平时设计过程中会遇到这样的问题:考虑某个模块流程了,却把特殊状态给忘了;改的版本多了,漏掉了原备注的内容,自己却没看出来。记得带实习生的时候就遇到过交付的原型同一个界面,在这个功能里顶栏有标题,在另外一个功能里顶栏没有标题,让检查一遍也没有发现问题所在。

经过这段时间思考、整理和实践,按照《用户体验要素》所提到的体验设计框架总结了一套体验清单设计方法。虽然用户体验要素这本书是以网页设计为主,但所提到的用户体验层次,在移动端设计中依然有效;只是移动端设计中需要考虑更多的场景、硬件设备、特殊因素、交互方式等问题。今天分享给大家移动端体验清单的设计方法,方便大家平时在做完交互稿后进行自查。

体验清单如何设计

为了适用于大多数移动端应用,这套方法是按照需求(战略层、范围层)-流程及内容(结构层、框架层、表现层)-特殊因素的思路来设计的,主要分为三步:

第一步:明确用户在什么场景下完成什么操作;

第二步:从框架流程再到内容细节,如:框架导航、流程、布局、转场、反馈、文字等;

第三步:重点关注特殊因素,如:网络、硬件设备、数据网络、模式、空值、交互方式等;

平时常用奇妙清单来规划自己一天的任务,就尝试用该App来制作移动端体验清单,使用之后感觉挺便捷的。下面就以奇妙清单为工具来举例子:

一、明确完成什么操作及主场景

不同的产品、需求对应的用户场景和操作流程是不同的,每次在自查前先明确需求,然后明确用户是在哪些主场景下完成什么任务;主场景有什么?操作是哪些?罗列在清单里。简单举个例子如阅读小说,子任务添加场景,备注写完成什么操作,如下图:

wz02

二、按照操作流程及界面内容,从流程到细节逐一梳理

按照要完成的任务梳理一下流程,随手画一下流程图。流程图可以让我们对原型流程有一个整体把控,防止出现逻辑问题。自查的过程中从具象到细节,先保证大流程没问题,再细化细节问题。

wz03

框架导航

  • 框架结构 是否合理、能承载产品功能结构
  • 导航 广度、深度是否适中,易操作,拓展性好

流程

  • 操作流程 从头到尾是否能顺畅的串下去
  • 返回 从哪里来是否可以回到那里去

从状态A到B

A.操作时

  • 触发源 待操作按钮在当前界面中是否明确
  • 触发区 域待操作按钮是否易操作

B.操作之后

  • 加载状态 状态改变的等待时间是否超过2S左右,如果太长是否需要加入加载状态
  • 反馈 是否有反馈,反馈是否备注清楚
  • 转场动效 是否需要添加有趣的转场动效
  • 成功与失败、空值 是否考虑且有相关的提示
  • 提示类型 选择轻(tip/小红点)、中(Toast)、重(提示框)提示优先级别是否恰当
  • 中间过程 是否可以取消,例如更新应用、导入本地文件,此时是否允许用户取消

布局内容

  • 信息层次 是否清晰,重要的信息是否优先显示
  • 相关信息 是否可合并,没有重复信息
  • 功能操作 是否易操作,重要、频繁触发的功能按钮是否在手机的可操作区域
  • 文字 是否通俗易懂、有趣
  • 界面内容 是否完整,例如:顶部标题、按钮里的文字等

三、特殊因素再复查

移动端产品的环境、场景复杂,硬件设备多样;需要考虑的因素很多,很容易疏忽某些细节;所以需要对于特殊因素再次复查是否遗漏。下面是一些常见的特殊因素:

硬件设备

  • 横竖屏 是否需要锁屏,横竖屏时布局及功能是否完整
  • 分辨率高低 分辨率情况下是否会有适配问题,是否备注清楚
  • SD卡 文件导入本地时,没有SD卡、SD卡储存已满、储存位置等情况是否考虑并备注
  • 硬件、系统版本 不同手机的物理按键、系统等不同,是否需要备注
  • 应用版本 新增功能是否影响老版本,是否需要升级

模式

  • 夜间模式 是否需要考虑夜间模式(有没有光线较暗的场景)
  • 编辑模式 编辑模式下出现意外情况是否提示保存或自动保存已填信息

网络

  • 网络超时
  • 网络太慢
  • 网络环境变化 从WiFi到2/3G网络环境时是否需要切换视图(有没有从室内到室外的场景)
  • 无网络
  • 缓存 有无缓存内容,区分是否清楚

账号相关

  • 随便看看/未登录 需要登录后才可操作的功能是否备注

通知机制

  • 消息推送 是否需要消息推送,调用系统通知还是其他方式
  • 推送策略 是否备注通知的推送时间、表现形式、失效策略

硬件交互

  • 定位 定位是否打开
  • 相机 相机是否允许使用
  • 其他硬件设备 双屏幕互动、二维码登录等操作时,与其他设备互联、同步、完成操作是否引导、备注
  • 等等…….

wz04

以上是移动端体验清单的设计方法及考虑因素,每个移动端应用都有自身特有的场景和特定影响因素,除了你需要考虑以上列举的,还会遇到一些未知的因素;对于新因素要分析后进行添加。不是所有项目都需按照这个清单逐条去检查,有的项目可能没有框架导航就可以直接忽略;有的只是一个小的优化,需要着重考虑空值、网络特性、特殊情况等。有的人善于把握大框架的东西细节考虑不全,就主要检查细节问题。这份清单可以因实际项目、人而定。

总结

产品开发中有QA测试环节,交互设计完也需要一个自检的环节,减少在设计评审和开发过程中消耗。建议使用奇妙清单制作项目的体验清单,并将这套自检方法应用到实际工作流程中,在项目迭代过程中不断完善形成自己的清单表;随着时间推移考虑的问题会越来越细,做的交互方案也就越来越完善,工作的效率也会逐渐提升。

本文作者:@墨子巨;转载自: 互联网早读课


互联网从业者必备微信公众号:woshipm,如果你已经关注了,证明你已经很牛逼了。

相关 [交互] 推荐:

WebView JS 交互

- - ITeye博客
WebView加jquery做页面会怎么样呢. // 创建WebView对象. // 把programList添加到js的全局对象window中,. // 这样就可以使用window.programList来获取数据. * 定义js回调java函数. // 绑定键盘的向上,向下按钮事件触发相应的js事件.

交互设计师如何做交互?

- Jerry - UED TEAM,用户体验设计,web前端开发
尽管很多谈及交互的书上都已经回答过了:. 发现用户需要,建立明确需求. 还是有很多对交互设计有兴趣的朋友会问我这个问题,并希望我能回答得详细,具体到我工作中的每个细节. 其实交互设计需要做什么,会随每个交互设计师的工作内容差异而不同,具体到每个项目也会有区别. 下面分享下我是怎样做交互,方式不一定是最合适,希望大家多指点,共同学习进步.

我怎样做交互

- Cary - 网易用户体验设计中心博客
尽管很多谈及交互的书上都已经回答过了:. 发现用户需要,建立明确需求. 还是有很多对交互设计有兴趣的朋友会问我这个问题,并希望我能回答得详细,具体到我工作中的每个细节. 其实交互设计需要做什么,会随每个交互设计师的工作内容差异而不同,具体到每个项目也会有区别. 下面分享下我是怎样做交互,方式不一定是最合适,希望大家多指点,共同学习进步.

交互设计-简单

- DayuLu - 腾讯CDC
  交互设计是近几年流行的一个词语. 现在市场上有许多资料来介绍什么是交互设计,如何做交互设计等. 从场景,任务,用户,操作等分析. 但由于受实际情况的限制,往往不能很深入. 所以笔者结合实际工作体验与大家分享下,具体做设计时候是怎么考虑的. 如果要说什么是一个好的交互设计,个人浅见就是简单. 本文以下内容都是围绕简单2字进行展开.

JavaScript与HTML交互——事件

- - 博客园_首页
JavaScript和HTML的交互是通过事件实现的. JavaScript采用异步事件驱动编程模型,当文档、浏览器、元素或与之相关对象发生特定事情时,浏览器会产生事件. 如果JavaScript关注特定类型事件,那么它可以注册当这类事件发生时要调用的句柄. 事件流描述的是从页面中接收事件的顺序,比如有两个嵌套的div,点击了内层的div,这时候是内层的div先出发click事件还是外层先触发.

交互设计初体验

- - 微博UDC
9月初,我来到新浪微博UDC部门交互设计岗位实习. 在接近四个月的学习时间里,我对交互设计行业有了深一步的了解,认识到了交互设计师的一些具体职责. 鉴于之前接受的知识大多来自书本或网络上的文章,在校期间参与项目的机会并不多,因此,我对此次实习做了一些总结:一方面,希望鞭策自己,在以后的工作中有所进步;另一方面,也希望能帮助刚步入交互设计行业的同学更快的适应工作,更好地学习交互设计.

Android与js交互实例

- - CSDN博客移动开发推荐文章
Android 中可以通过webview来实现和js的交互,在程序中调用js代码,只需要将webview控件的支持js的属性设置为true. Android(Java)与JavaScript(HTML)交互有四种情况:. 1) Android(Java)调用HTML中js代码. 2) Android(Java)调用HTML中js代码(带参数).

NodeJS与Mysql的交互

- - CSDN博客推荐文章
把Mysql Module装到 NodeJS中.   JS脚本 mysqlTest.js. //加载mysql Module  .   //要创建的数据库名  .     //要创建的表名  . 作者:qxs965266509 发表于2013-8-17 9:47:35 原文链接. 阅读:0 评论:0 查看评论.