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

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

相关推荐

  • H5时代的多行文本框

    说起输入框,大家都耳熟能详了,今天跟大家谈一谈H5时代的多行输入框!首先一起回顾下输入框在PC端的应用:

    2017-06-04
  • UED沉思录

    Q:设计前期至输出时常见问题及解决思路以下分享,全是血淋淋的教训积累与总结。当然也是这段时间在AJK优秀Leader的带领下成长出来的。Q:设计师存在的表象问题?设计方案缺乏理论系统化因需求而丧失设计原则页面结构较为混乱,映射设计思路不清晰页面设计细节打磨程度较低页面制作时参数命名不严谨输出适配的兼容欠考虑Q:设计的根本目的是什么?解决问题Q:设计需要具备哪些能力?洞察力「发现身边的好设计」分析力「分析需求、解决痛点的思路」匠人精神「设...

    2018-03-15
  • 用户运营 | 《破茧成蝶 用户体验设计师的成长之路》读书笔记

    1. 设计师如何参与一个具体的项目需求分析,了解需求,清楚我们要做一个什么样的产品,目标用户是谁,要达到什么效果,具体有什么内容、功能…然后我们开始进行设计,在草图上梳理信息架构,设计任务流程,设计界面,确认没有问题后再用专业的软件工具把设计方案呈现出来。经过设计评审后,设计师要去跟进后续的视觉、前端、开发、测试环节,确保最后的产出物和自己的设计方案一致。2. 在项目中设计师容易遇到的问题团队成员的专业能力外界因素的影响团队凝聚力3. ...

    2018-04-25
  • 交互分析:什么时候该用新窗口打开(target=_blank)?

    是否从新标签打开页面看起来也许并不是特别起眼,甚至可以说是一个很小的细节。但是正是这种小细节往往决定了你网站的用户粘性,是否可以在竞品中胜出。

    2017-08-04
  • 制作在线UX作品集的四个步骤

    本文作者将帮你系统梳理一下创建一份作品集的全部步骤,让你明白UX作品集的常规创建流程。

    2017-05-02
  • 撕逼时,要不要说“我觉得…”?

    你可能也碰到过类似的场景,一个撕逼的场景:“考虑到用户的使用场景,用户到这个页面,更关注信息B,而不是A,我觉得,这个页面,更应该突出信息B…”。反驳的声音说:“你觉得,只是你的个人感受、猜测而已,真实的场景和情况,并不是你觉得的那样…”

    2017-05-21
  • 交互设计的三个半原则

    一些设计的基本原则往往是通用的、甚至可以说放之四海皆准的,例如优先级、一致性、界面的隐喻等等,好的设计都需要考虑到这些问题,甚至再更广的范围内也同样适用,而不仅仅是交互设计范畴。一个设计师&产品经…

    2017-08-01
  • 同样是券商,为什么你家APP用户体验不好?原来还有这一招...

    券业新力量 | 服务所有券业人的梦想当前浏览器不支持播放音乐或语音,请在微信或其他浏览器中播放As Long As You Love MeBackstreet Boys - Backstreet's Back导言洞察用户喜好,吸引用户,留住用户,让用户满意,是所有服务业的本质。本文以行为数据切入,从三大方面、两个案例,全方位解析如何利用行为数据提升证券App用户体验。用户体验(User Experience)最早被广泛认知和提及,是在上...

    2018-03-30
  • 手机端官网设计:适配还是不适配,这是个问题

    Pc端使用平台:手机端使用平台:红米2增强版 自带浏览器 MIUI6.6.2.0(KHJCNCF)|稳定版

    2017-05-31
  • 符合用户认知的交互才是最自然的交互

    为什么有时候只用看一眼就知道这两个东西是什么,如何操作?其实这就是物品所具备的预设用途。物质心理学—研究人和物相互作用方式的心理。一件物品实际上能用来做何用途,或被认为能有什么用途。一个白色的东西加一个按钮在上面,并且一按就会有“奇迹”发生。

    2017-05-06