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

原文来自UXPin Studio,原作者是Jessica Lowry,一位英国的用户体验设计顾问,笔者译来与大家共勉“用户乘坐飞机在一个茂密的森林上一边飞行一边寻找地面上的路径,他正在寻找的是一颗红色的种子。这颗红色的种子是被外人引入森林的,目的是用红色种子生长出来的植物来消灭其他植物。损失将会是无法接受的。但是红色种子有好几颗,用户需要在种子长成植物之前定位和移除它们。”


原文来自UXPin Studio,原作者是Jessica Lowry,一位英国的用户体验设计顾问,笔者译来与大家共勉

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

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

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

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

在项目之外寻找灵感

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

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

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

就像在《为人眼进行的Web UI设计》中描述的那样,简洁有力的图像的具有很强的交流能力。但是如何把这种这种力量融入到像素中呢?

最近我需要设计一个交互式的系统地图,其中要转达几个关键因素,包括:

大小、距离、风险、活动、路径、连接

从本质上讲,这样的网络安全应用程序在检测危险时,就如同海里捞针的同时显示出其特定位置。

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

从集群网络数据的例子来看,这些图片看起来是很优雅,但是从交互的角度却非常不切实际。因为这样确实是使网络看起来漂亮了,但一旦需要加入交互式的功能时就很难使用。我看到传统方式设计的互动地图可用性都很差。我需要从另一个地方找到灵感,一些在现有可视化网络数据以外的例子。

为了可视化数据容易阅读,需要将不同的属性独立开来。这就形成了视觉语言的结构。

拥抱隐喻的故事能力

我的灵感通常来自大自然。自然本身就是完美的设计。森林是混乱的,但在其中也是有条理的。

森林的故事不是它巨大的整体视图来理解的,而是亲身在其中看到的视图。相同的原则也会应用到我要设计成地图的系统网络中。

数字本身毫无意义。概述数据可以提抽出更有用的高级信息但这些信息很少可操作的。数据的上下文很重要,而且必须提供数据与之结合。理解其中的连接需要更近一步的观察。

一旦你开始拉近去看,森林就会呈现全新的意义。当你近看一棵树,感知会是全新的。你越仔细观察,越能看到纹理和细节。在微观层面上,森林元素之间的关系便说明了森林生长的过程。

我认为森林中的一切都彼此合作从而生长成一片森林。一个层级和自然法则构成的网络决定了植物如何生长。比如颜色就在生物如何生存和植物为何接近阳光起重要作用。一切都在完美的和谐中生长和消亡。植物死后,它就变成了下一代的食物。

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

我决定采用平面式的体验,因为从用户的认知负荷看来,这样会优于3d图的形式。减少认知负荷就更容易讲好故事。交互式的组件应该帮助用户关注领域里的重点。我研究了不同的树形地图,寻找地图式数据中的正确处理方法。

创建一个故事

把这些元素拼到一起很花费时间。我创建一个故事来帮助我:

“用户乘坐飞机在一个茂密的森林上一边飞行一边寻找地面上的路径,他正在寻找的是一颗红色的种子。这颗红色的种子是被外人引入森林的,目的是用红色种子生长出来的植物来消灭其他植物。损失将会是无法接受的。但是红色种子有好几颗,用户需要在种子长成植物之前定位和移除它们。”

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

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

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

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

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

把故事变成现实

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

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

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

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

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

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

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

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

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

迈出下一步

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

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

 

本文由 @lrioLee(微信公众号[简并]) 翻译发布于人人都是产品经理 ,未经许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/30270/

(0)
CatherineCatherine
上一篇 2017-05-27 21:11
下一篇 2017-05-27

相关推荐

  • 干货推荐|40款独特的移动导航用户界面

    越是简易,你的APP/网站就越出色。移动用户的界面可以有很多种形式和风格。

    2017-05-20
  • 干货贴:To B 系统软件Web端的交互设计总结

    文章分享了作者做了几款系统软件后的一点点总结,希望给大家的产品工作来一些参考。

    2017-05-07
  • 设计思考模式:“删除、组织、隐藏、附加”

    Giles Colborne简约四策略是“删除、组织、隐藏、转移”,由于“转移”在实际设计过程中比较少运用到,所以我根据elya的知乎回答把四策略定义为“删除、组织、隐藏、附加”,elya没有解释她的理解,所以我根据自己理解重新定义。“删除每个页面上一半的文字,然后把剩下的文字再去掉一半。”(《Don’t make me think》中Krug可用性第三定律)“点击多少次都没关系,只要每次点击都是无须思考,明确无误的选择。”(《Don’t make me think》中Krug可用性第二定律》)

    2017-06-04
  • Sketch 49 新增交互原型能力

    看到更新弹窗蛮讶异的,完全没有见到相关消息或Beta版本,官方博客与Medium也毫无动静,太过突然,总之就是这样:“Prototyping: You can now connect Artboards with Links and Hotspot layers to create prototypes of your designs that can be viewed in Sketch Preview,Sketch Cloud,a...

    2018-03-02
  • 谈谈用户体验与风控的平衡性

    先翻翻旧文从反反鸡汤谈过犹不及从受众目标,再谈过犹不及其实今天是这两篇的引申。之前我说过很多创业者容易犯的错误,过度理想主义,把用户当作好人,我说过一个关键词,不能说坏用户一定很多,可能坏用户真的只有1%,但很可能一个坏用户的破坏,可以抵销一百个好用户的创造,这是很常见的创业的困境,因为很小的疏忽,导致极大的损失。所以,一些毫无经验的创业者,要有这方面的意识,至少思想上要有风控这个概念,要知道如何规避和防范坏的事情,不要过于理想主义。但...

    微信热点 2018-05-04
  • 交互设计师的价值与交互设计方案的评价维度

    本文作者将和大家谈谈交互设计师的价值,以及交互设计方案的评价维度,用具体案例与你分享。

    2017-05-15
  • 交互师们,知道如何写一份交互说明文档吗?【精品】

    一. 什么是交互说明文档(DRD)? 所谓DRD即是用来承载交互说明,并交付给前端、测试以及开发工程师参考的文档。 在项目中,交互设计师的主要产出物可能依次是:site map,page flow,wireframes。有的大型项目前期…

    2014-11-25
  • 想成为云计算交互设计师,该具备哪些能力?

    最近有不少设计师会跟我聊到,做云计算的交互设计 与其他设计师有什么区别吗?我其实也不知道怎么回答,能够记起的最后一次 TC 类的项目已经是两三年前在学校的时候了,工作以后一直在做云计算的产品,没有太深入体验做其他的产品,我真的还不太能说出有什么区别。

    2017-08-28
  • 一张图看懂在华为和腾讯工作的区别

    作为先后任职于菊厂(华为)和 鹅厂(腾讯)的高级设计师老毕,对于这两家企业文化迥异的公司,有着深刻的体会(血和泪),今天老司机就带领大家对比一下两家公司的区别。 来源:BAT 企业文化 薪酬结构 应届生薪资 …

    2016-06-17
  • 我们在呐喊实体店已沦为试衣间!日本实体却比电商繁华,为啥?

    当中国企业在惊呼传统商业必死的时候,人家可没这么慌,为什么?因为人家的细节做的足够好,客户体验自然更佳,体验营销做的好啊,就好比:你电商再好,可你有试衣间么?

    2017-06-05