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

原文来自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

相关推荐

  • 交互设计的用户行为模式十二项

      安全探索 方便用户进行探索和尝试,支持多级撤销, 即时满意 让用户立即完成一个任务,给他们信心。 满意即可 人们不愿意付出哪怕一点点多余的思考,给他们他们熟悉的模式元素,让他们熟悉环境,可已立即上…

    2015-01-21
  • 视觉设计不懂业务时如何着手设计?

    信很多视觉设计师 会有这样经历,当接触到一个新的项目;如果是熟悉业务类型产品,设计起来轻松熟络,如果是一个陌生的业务类型,则需去摸索与尝试,找到合适的设计定位与视觉风格。当视觉对交互的业务性质、框架逻辑、层级关系不熟悉时候,视觉效果是画出来了却漏洞百出.

    2017-05-24
  • 2015-2016交互体验趋势

    移动产品篇: 2015年移动应用数量增长依然强劲,但是移动交互体验却在发生着变化。较之去年层出不穷的新颖形式,今年交互体验趋势中,更多的是某一个方面的体验优化与深耕,而较少有创造性的引领者出现。这说明移动…

    2015-04-20
  • 做设计不得不讲究的一个点:平衡

    做设计,最难的不是搞清楚解决问题的最佳答案是什么。而是,站在全局去平衡问题与问题之间的关系,做当下资源条件下相对正确的设计决策。

    2017-05-05
  • 用户体验,比一切事情都大

    一直想写一篇与用户体验相关的文章,因为这里面用很多误区,很多朋友认为用户体验很简单,只要高层强调和重视、把页面设计的好看就可以了。其实,用户体验是一门相当专业的跨学科综合科学。大概从2005年开始,笔者自己很有幸成为国内第一批的用户体验践行者,我们是国内第一批UCD(User Central Design)成员。当时,国际上流行的用户体验是一个五层框架模型,从底层到顶层分别是:战略、范围、结构、框架和表现。我非常清楚的记得我的第一个用户...

    2018-02-28
  • 什么是用户体验设计,用户体验设计标准是什么?

    我理解的用户体验,是让用户付出最小成本满足需求。用户体验无法用一个通用方法整体衡量,只能在理解产品全貌的前提下评测分解属性。我仅结合搜索领域经验提供些参考。个人对用户体验的目标是,做到“自然”。用户体验设计是什么?用户体验(User Experience,简称UE)设计 是用户在使用产品或服务过程中建立起来的一种纯主观的感受。用户体验产生于客户与你的品牌、公司、组织所发生的一切互动。这些互动的对象包含了你的产品、官网、帮助中心、广告、微...

    2018-03-20
  • 写在 [ 交互设计小厨房 ] 一周岁

    时光荏苒,感谢无情岁月!感谢大家容忍这个公众号『隔三差五』抽疯式的更新;感谢太太长期战斗在『丧偶式育儿』的第一线;感谢各位『互联网老炮』容忍洒家在微信群里污力十足的飚车;最后还要感谢这个优雅的排比句。当前浏览器不支持播放音乐或语音,请在微信或其他浏览器中播放金平糖の精の踊り~カチューシャ浜口史郎 - 『ガールズ&パンツァー』オーケストラ・コンサート~Herbst Musikfest 2015~产品厨子的运营总结2017年3月24日,『交...

    2018-03-24
  • 从产品到交互·2015同济设计学考研经验

    【写在前面】 我叫徐晨,来自陕西西安,毕业于兰州理工大学工业设计专业。2015年我参加了研究生入学考试,也如愿考上了同济大学创意学院的研究生。想想当初独自备战,其实都是在黑暗中摸索,曾经也担心自己的复习方…

    2015-11-08
  • 从用户体验角度说说VR版综艺节目

    转载自913VR作者:赵丹上回我写了一些对于体育赛事VR直播的观点,今天我想说说VR版的综艺节目。最近我比较关注的两档综艺节目是《中国新歌声》和《盖世英雄》,一方面是因为我一直是《中国好声音》的拥趸,另一方面我很喜欢“潮”的东西,所以电音概念的《盖世英雄》自然很吸引我。值得注意的是,这两档节目的VR版都是由微鲸VR独家进行录制的,依托CMC丰富的娱乐资源,微鲸VR对于国内众多娱乐IP进行了VR版本的制作,今天我就主要结合这两档节目来说说...

    2018-04-07
  • 交互设计文档怎么写? | 设计基础05

    摘要交互设计师的工作虽不只是画交互稿子,但是好的交互稿不仅能够完美阐释产品内容和设计师的设计思路,还能够在项目各方协调工作中起到重要作用。保证完整的呈现产品需求和设计思路的交互稿,能够让各方工作人员…

    2017-08-04