编辑后离开场景交互设计思考

2017-05-31 16:08:00

然而到后来我什么都没有
当你离开的时候
—— 蔡健雅
《当你离开的时候》

《当你离开的时候》，一首来自Tanya的歌，将离别时的不舍与无奈娓娓道来。然而本篇并不是一片音乐介绍，并不会细说那些恋人分手时的伤感情怀。在这里我想聊的是交互设计中当用户完成编辑任务，离开当前页面或浮层时候的一些事儿。

我从实习开始，最初接触到的功能模块就是“设置”。在产品的设置模块中，当用户完成设置编辑任务便会离开当前页面或浮层，跳转到另一个页面。编辑完成之后离开，这种行为看起来自然平常，可是经常也会发生一些意外，比如：电商商户王尼玛兴致勃勃地花了一个小时，在某电商后台中编辑了一长溜店铺资料，然后看到右上角“新消息”的入口上突然出现一个小红点。“有戏！”王尼玛手贱地点击了一下“新消息”，然后什么都没有保存页面就这么跳转过去了……

生命中的一小段又被喂了狗的感觉。

当然，没有保存的错误跳出放在当下有交互设计的电商公司应该都不会出现了，毕竟编辑后离开场景的安全性应该也算是常识了。编辑功能不仅仅在设置页面存在，内容编辑、筛选项编辑、预订商品内容编辑等等都牵涉到编辑功能。编辑完成之后离开页面或浮层，会牵涉到用户已编辑内容的保存问题。再扩展一些，编辑后离开还牵涉到用户什么时候可以退出，以及退回位置和退回后状态变化的问题。虽然都是小问题，但是如果不仔细考虑，很容易在产品框架阶段就埋下低级错误隐患，后来改起来就很费时费力了。

这里就用户编辑后离开这个场景，梳理一下基本的设计原则。

1. 防错性与可见性：避免错误跳出

防错性是编辑后离开场景下交互设计的首要问题。“永远不要让用户觉得自己是傻子”，作为交互设计师，我们应当理解用户很多时候就会是不动脑地去操作，然而这不等于我们要用交互去让他们认识到自己的傻。“我刚刚好傻啊，怎么没有保存”、“我怎么那么傻，手贱点了那个按钮”，如果用户总是在我们的界面上觉得自己被愚弄了，不能做任何报复的他们只能放弃使用来和平地表达抗议。

避免用户出错，就要避免用户莫名其妙地离开了编辑状态。比如一个编辑页面上不要有编辑无关功能的入口，因为我们无法阻止用户的好奇心。

同时，保存按钮的高可见性也会防止用户莫名其妙地点击别处。

如果一定会有别的入口，那么我们可以考虑边编辑边保存。这看起来固然是一个安全的好方法，但是这样做带来的缓存负担以及用户希望撤销编辑时候的尴尬我们也不能不考虑。

2. 安全性：离开保存，弹窗提示

当我们确实无法采用减少入口或边编辑边保存的方式防止用户犯错的时候，我们应该至少给他们一个提醒：“Hey buddy，你这么做是在搞事情。”

提醒浮层突兀且尴尬，但是并不失为一种有效的安全措施。特别是当我们希望显得自己对用户很友好的时候，这里是交互设计师们尽情发挥情感化文案设计的场所。当我们希望挽留用户，或者鼓励用户多写点啥的时候，这也是一块好的交流地。

当然，首先用户要愿意理你。

3. 可预见性与反馈

确保用户编辑行为的安全无虞之后，交互还需要确保的一点是不要让用户迷失。如果离开后来到一片和之前完全没有联系的新页面，难保用户不会问出人生三大问题。因此编辑之后离开到达的页面应当是可预见的，而不是让用户去理解沧海桑田。

当然，很可能的，用户在编辑完成离开后，之前的页面因为编辑产生的结果已经完全不一样了（如编辑店铺页面），或者因为编辑提交的结果而到了下一步页面（比如编辑支付内容然后提交）。这个时侯，反馈的重要作用就体现出来了。在页面内给用户清晰地反馈，让他们知道经历了蜕变或旅途后他们已经到达一个新的地点。有时候这样的反馈还可以加点小惊喜。

4. 流畅性：用户想看结果，而不是等待

编辑完成离开后，一般用户最关心的就是编辑得到的结果。在这个时候，任何炫酷却拖拉的动效都可能是糟糕的。用户体验应当是流畅的，动效的存在应当给用户建立适当的认知模型。但是编辑过程的特殊性在于，编辑本身是产生结果的，编辑后离开有既定的认知预期，就是看到结果。此时的动效就像魔术师的戏法，干净利落的可以让用户得到投入后收获的喜悦，而冗长的动效只会让用户想去揍那个魔术师。指示可以有，但更重要的是流畅。

其实编辑后离开是一个很小的交互设计点。但在我遇见过的设计中，从小公司的初创产品到大厂的成熟产品，都出现过这样的问题。也许有的页面编辑重量确实不大，但是一点点细节上的不安全或者不爽慢慢就会演变为对于整个用户体验的不认可。而且交互设计师的追求就应当是把握每个细节的用户体验，难道不是吗？

1922

20170528 @ Home