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

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

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

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

在项目之外寻找灵感

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

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

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

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

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

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

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

把故事变成现实

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

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

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

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

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

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

迈出下一步

为了设计更多故事驱动的用户界面,你需要到办公室以外去寻求灵感。关注自然,还有那些将复杂结构归结为简单感性理解的优秀视觉艺术家。

想了解其他引人注目的视觉设计故事,也可以看看这本免费的电子书《为人眼进行的Web UI设计》(英文电子书,可从在此处找到下载),从中可以了解到33个设计案例详细的拆解。

 

关键字:用户体验, 用户, 种子, 森林


本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部