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

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

相关推荐

  • 如何让你的设计方向不跑偏:Vision in Design方法解析

    作者:肖又歌( frog 交互设计师)   很多时候,在设计项目的初期,设计团队只有一个设计的大方向和一些关键词,但是整理不出来思路。抑或是脑子里已经有一个新的点子,但是论据不足,无法充分支持设计的合理性。这…

    交互专题 2017-08-07
  • 欧洲(非英国)交互设计申请攻略

    今天为大家带来欧洲(非英国)地区交互设计专业留学申请攻略,从学校/专业/费用等方便分析每个学校的优缺点,让大家在选择学校时更有的放矢。 1.代尔夫特理工大学/Technische Universiteit Delft 学位:Master of S…

    2015-11-04
  • 基础知识小科普!4个最常见的APP概念区分及比较

    @凌霜设计 :现在关于移动应用的概念有许多:Native App, Responsive Web, Web App, Hybrid App,搞清楚这几个概念的区别和各自的优劣对于设计师来说很重要,这篇文章较为全面地探讨了这几个概念,值得初学者阅读,…

    交互设计 2015-09-15
  • 别让措辞毁了你的设计成果

    本文总结到:措辞在用户体验设计中很重要。注意使用简洁、明了、有力的词语来表达信息。它会彻底改变产品体验和心态。你:“对不起老师,我能去厕所吗?”

    老师:“我不知道……能不能,你说呢?”好友:“嘿,[你的名字]!试试搬起这把椅子。”译者注:这个问题在汉语中应该不存在。原文中的Just一词,如今最常用来表达“刚好”、“恰好”、“差一点”的含义。“你差点就拿下第一名了,继续努力!”“你与第一名已经很接近了,下次反应速度得再快一些。”

    2017-05-07
  • 【交互设计-UX/UE】数据加载

    数据加载是设计中比较容易忽略并且又比较重要的环节,以一种合适的方式告诉用户正在发生什么,将会发生什么,让用户对于加载后的内容有明确的时间预期,减少用户的等待感,尽可能消除焦躁情绪。 一、6种常见数据加…

    2016-08-03
  • IOS 10人机界面设计指南[中文版]

    随着iPhone7的发布,iOS10普及起来已经不远,所以iOS10的人机交互规范大家也需要学习起来了,分享的是迄今为止翻译得最全面的,iOS10人机界面设计指南[中文版],希望能帮到大家,enjoy!

    2016-10-24
  • 为什么你读了1000篇有关如何改变的文章却从未改变?

    发布者: EVEN 此文是 Eric Barker 的文章。 大多数人其实并没有失败—不做就不会失败。 知道不等于执行。 我写了很多有关让事情变得更好的东西。常见的回应是“我懂。”好吧,如果你看 Jeopardy(智力知识竞赛节目)的…

    2015-03-21
  • 交互设计师的价值与交互设计方案的评价维度

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

    2017-05-15
  • 交互设计师的60日计划之第三天

    此次分享的 [button type="info" text="交互设计师的60日计划" url="https://www.iamue.com/tag/interaction-designers-of-60-days" open_new_tab="false"] 来自 Killa.G 让我们一起跟着学习和并学会做自己的总结与…

    2015-08-20
  • 用好的交互设计来管理复杂-“查看更多”

    “查看更多”按钮像一个链接标签的拐杖,在各类网页及App中被通用,网站现在已经大量使用这个通用的标签链接。作为一个独立的标签,“查看更多”按钮,直接描述所表达的含义,用以帮助用户从下一页了解所期望的内容。

    2017-05-18