译文 | 如何通过讲故事来简化用户体验设计

2016-04-10 12:36:00

作为一个用户体验设计师，我越来越多地接触到与数据可视化相关的工作。数据本身可以在视觉上引人注目，但它需要遵循某种语言和故事来使人感到印象深刻。

多年来，讲故事的艺术已经成为我搭建设计基础的架构。每一个好的故事都有一个主人公，他有某种形式的追求。故事里的每一种追求，总伴有一个必须杀死的怪物。描述好你的问题和用户，然后打造一个故事，会帮助大家更好地理解工作过程。

我将通过我最近在跟的一个项目来解释这一过程，这也可能会在你自己的用户体验设计项目中有所帮助。

在项目之外寻找灵感

视觉语言与以人为中心的设计基础十分相近。

人类在创造我们今天使用的字母之前就创造了视觉语言。壁画是人类最早的的交流方式。所有好的提示工具都是相似的，图纸就是这样，能很好解释问题本身和解决问题的方法。那些早期的图纸并不是为了作为一种原始形式的室内设计而出现的。洞穴里的壁画讲述的是时事性的新闻故事。绘画的人在尝试警告其他人潜在的危险以及他们共同的生存技巧。从本质上讲，洞穴壁画就是可视化数据。

这个故事帮助我总结出了如下的，用户完成任务所必需的交互功能描述:

用户必须飞越整个森林。
用户必须能把红色隔离出来。
用户必须区分种子和其他森林的组成。
用户必须在种子变成一种植物之前找到。
用户必须理解树,植物,叶子和种子之间的关系。
用户必须了解生长模式以建立时间表。
用户必须找到可以在地面上跟随的路径。

显然,所有这些都是真正用户在产品中执行的任务的小说版本。但通过使用一个故事作为比喻,可以设计一个有着共同语言的主题体验。这在与团队和客户沟通产品的关键特性时特别有效。用我们共同的故事来比喻，我们所有人都能共享相同的心智模型。

基于我们的隐喻，真正的用户任务应该翻译成:

用户需要一个整体的网络视图。
用户需要能隔离出网络中的目标。
用户需要能隔离出网络的关键属性。
用户需要通过日期过滤网络活动。
用户需要浏览网络的指引。

把故事变成现实

我研究了很多可视化网络的例子并在Buzzfeed上找到这个情节线索树形图。它成为了我正在研究的网络安全应用的完美视觉模型。

作为一个结合地铁图形式的树形图，它使得用户可以很容易地理解高层级的信息。而且它符合森林的隐喻，更加意义非凡。我们能看到根代表的是客户关注的焦点，而叶和树枝则代表整个森林(网络)。颜色的不同编码标识出了什么是最重要的，以及其来源是什么，不管是用户组、用户类型还是设备。我们能够像看一幅易于消化的图片那样，看清所有高层次的关系。

这个模型会允许用户直接查看整个森林(整个网络)，红色的种子(安全隐患)，以及他们如何走进森林，还有森林是否还在生长(入口和目的地的路径)。

当用户飞过这个平面森林的时候，关键领域很容易识别出来。正如你在下面这个低保真模型里看到的，我用颜色突出了红色种子在找到长入土壤的路径(安全漏洞)，以及种子开始通过根和叶长成一株植物(传播病毒)之间的时间。红色种子代表一个风险，但种子长成植物的过程是一个更大的风险。种子的不同颜色直观地告诉用户应该先调查哪个种子。

我承认这个原型不是很漂亮，但它大致上阐明了功能——而这正是我们所需要的。

一旦用户选择一个种子展开调查，路径就会变得明显。森林的其他元素仍然可见，但不会使用户分心。事实上，所有不必要的层级都被拨开了，只揭示到达红色种子的路径及其当前的发展现状(这是用户最关心的)。