交互学堂
专注分享专业知识

设计×交互 | 在做交互的时候,我们可以从不好的设计与好的设计中学到什么?

设计×交互 | 在做交互的时候,我们可以从不好的设计与好的设计中学到什么?

让人人都懂点儿设计

设计×交互 | 在做交互的时候,我们可以从不好的设计与好的设计中学到什么?
设计史论
全文字数 : 4689 | 阅读 时长12分钟


今天史论君为大家分享一篇来自

interaction design foundation的文章

原文作者:TEO SLANG    |    翻译:于于于Jessica

编辑:Sujay Wu

转载后台回复 :史论君

把不好的设计和好的设计的反面例子一起看,不仅有趣,而且为设计师们提供了重要的经验教训。它们突出了设计人员要避免的陷阱,并让我们理解如何将设计理论转化为在现实世界中有效的解决方案。美国作家、研究人员和可用性专家Jared Spool曾经说过:“好的设计,如果做得好,就会变成隐形。”只有当它做得不好的时候,我们才会注意到它。“

所以,让我们看看五个明显糟糕的设计的例子,让我们了解到设计是如何成功的,并从中提炼出一些经验,这样我们就可以为我们的用户创造出伟大而又无形的体验。”

Information overload

信息过载

不好的设计:洛杉矶的停车标志

几十年来,洛杉矶的停车标志一直是信息过载的缩影。因为交通规则很复杂,因此需要在一个小范围内传递大量信息,所以他们总是很难理解。

这些迹象有多令人困惑?从传统上看,从2010年代的这个例子来看:

设计×交互 | 在做交互的时候,我们可以从不好的设计与好的设计中学到什么?

这个例子已经很简单了。

假设你是一个周二早上9点在这条路上开车的司机。你能在这个地方停车吗?听起来像一个简单的问题需要大量的心理处理来回答。作为设计师,我们经常面临的情况是,我们必须设计大量的信息,以显示在一个小空间中。洛杉矶的停车标志可能是一个极端的例子,但很多时候为移动应用设计的车意味着面对同样的问题。停车标志和设计人员都有出路吗?

好的设计:Nikki Sylianteng的停车标志

设计一个显示所有信息的标志,同时也很容易理解,这听起来像是一个不可能完成的任务。但这正是布鲁克林设计师Nikki sylig所做的。

设计×交互 | 在做交互的时候,我们可以从不好的设计与好的设计中学到什么?

Nikki提议的停车标志最终在洛杉矶使用,作为试运行的一部分。

Nikki的设计之所以好用,部分原因在于它是以用户为中心的:Nikki意识到,司机只是想知道他们是否可以在某个地方停车。是的或不,这是所有司机需要的,这是所有的停车标志显示。她的设计也利用了视觉,而不是文字,来传达信息。结果是令人难以置信的直观:绿色为OK,红色为禁止停车。它甚至是专为色盲设计的,没有停车的条纹。现在当你看这个标志时,你会知道在周二上午9点。禁止停车。这些条形图显示了什么是在gls – simple中。

 

了解用户需要什么,然后设计基于。这有助于减少信息过载。有大量的信息传达给用户吗?试着用视觉代替文字。

Mystery Meat Navigation

神秘的肉导航

不好的设计:LazorOffice.com

“神秘肉导航”(MMN)是1998年由文森特·佛洛德斯(Vincent Flanders)发明的,它是一个神秘的“肉导航”(MMN),它指的是在用户点击它或将光标指向它的时候,链接的目的地是不可见的。“神秘肉”一词指的是在美国公立学校的自助餐厅里食用的肉类,因为它们的确切类型已经无法辨认了。MMN是不好的,因为它降低了导航元素的可发现性。这增加了用户的认知负荷,因为他们现在不得不猜测如何导航或者点击什么。虽然大多数的MMN是在旧的网站上发现的,但是在现代的网站上却非常普遍。以Lazor公司为例,它是一家制造预制房屋的设计公司。

设计×交互 | 在做交互的时候,我们可以从不好的设计与好的设计中学到什么?

LazorOffice.com的主页上有一个MMN图像网格。正如你所看到的,这张表几乎没有显示出该去哪里。取而代之的是,9张图片只是坐着,让我们中的一些人在思考一个谜,而不是与页面互动。在他们主页的折叠下面,一个图像缩略图的网格正在等待。他们是可点击的吗?如果你把鼠标移动到图像上,它会变成一个指针。但是当你点击图像时会发生什么呢?“点击找到!“从来都不是一个好的用户体验解决方案。”很有可能,你的用户会放弃他们的导航,在竞争对手的网站上找到替代方案。

好:互动设计基金会网站上的课程卡。值得庆幸的是,MMN问题很容易解决。关键是要意识到你必须清楚地标注链接。简单地在鼠标悬停上添加“视图项目”将提高Lazor Office的可用性。

设计×交互 | 在做交互的时候,我们可以从不好的设计与好的设计中学到什么?

我们的课程卡和链接一样不神秘。对于交互设计基金会的课程卡,我们不仅在每张卡片的底部都有“View course”来表示将要发生的动作,而且我们还拥有一个“Go to course”的悬停状态。许多网站遵循类似的惯例,你也应该这样做,以最大化网站的可用性。教训:最佳实践总是标签你的链接!你不喜欢吃神秘的肉——同样,你的用户也不喜欢点击神秘链接。

 

Adding Friction to User Actions

增加用户操作的阻力。

不好的设计:iFly50.com

作为设计人员,我们应该特别小心地增加用户操作的阻力,除非是为了阻止用户执行该操作。然而,有时候,我们甚至可能无意中增加了用户操作的阻力(主要是由于美观或新奇的原因)导致了有害的用户体验。其中一个例子是iFly50.com,它是由KLM为iFly杂志的周年纪念而创建的。iFly 50是一个垂直滚动的网站,展示50个旅游目的地,在一些目的地(比如下面的一个),底部的一个按钮要求用户点击并保持几秒钟的时间查看更多的照片。

设计×交互 | 在做交互的时候,我们可以从不好的设计与好的设计中学到什么?

iFly 50希望它的用户每次想看更多的照片时,点击并保持几秒钟。在每一个动作中增加几秒钟的摩擦力会导致更糟糕的用户体验。想象一下,如果你没有立即点击加载一个页面,你现在只需点击并保持两秒钟,就可以在你的浏览器中点击每一个链接。在几次点击之后,你就会完全放弃对网络的探索。很多时候,我们的设计师都倾向于使用最新的交互样式或动作,但当你的设计可能会增加用户操作的摩擦时,你总是保持谨慎,这是非常重要的。大多数情况下,尝试和测试的约定(例如,简单的单击或滑动)都可以很好地工作。

好的设计:iOS上的弹性滚动。

有趣的是,谨慎地增加用户操作的摩擦力会导致设计的伟大。苹果在其移动操作系统iOS中最受欢迎的发明之一是创建弹性滚动,在某些情况下(比如在网页的末端)滚动变得越来越困难。


设计×交互 | 在做交互的时候,我们可以从不好的设计与好的设计中学到什么?

在iOS的弹性滚动中,在某些情况下故意增加摩擦。您可以在上面的操作中看到这一点,当用户滚动到页面的末尾时,会增加摩擦力。添加了摩擦力来指示不再允许滚动的情况:效果是一种直观的体验。

 

尽量避免在用户操作中添加任何类型的摩擦,并且在没有其他选择的情况下仔细地执行。

 “Clever” Design that Ignores Usability

忽略可用性的“聪明”的设计


不好的设计:Bolden.nl

有时,巧妙的设计会对用户体验产生不利影响。让这个错误变得更危险的是,我们的设计师喜欢巧妙的设计。它们是微小的图形奇迹,给我们的脸上带来微笑。可悲的是,大多数人都不是设计师。更可悲的是,并不是所有聪明的设计都是好的设计,尤其是当它们创建可访问性、可发现性或可用性问题时。以荷兰战略设计和开发工作室Bolden的网站为例:

设计×交互 | 在做交互的时候,我们可以从不好的设计与好的设计中学到什么?

你能说出他们的主页想说什么吗?没有?那是因为你必须把鼠标移动到页面的角落,以便正确地看到消息。

设计×交互 | 在做交互的时候,我们可以从不好的设计与好的设计中学到什么?

这是一个聪明的设计吗?是的,当然有。但这是糟糕的设计吗?绝对的!这是为设计师设计的,而不是为用户设计的绝佳案例。

该网站严重降低了它的标题的可读性,因为它的设计者决定交付一个新颖的设计。不管是谁设计的,也会漏掉文字,告诉用户他们应该把鼠标移动到角落,这意味着新闻标题的发现依赖于偶然事件。此外,即使标题被揭示,文本和背景的对比也很差,因为你仍然可以看到重叠的文本。这些都加起来创建了一个用户不友好的网站。

 

好的设计:CultivatedWit.com

CultivatedWit.com是一个伟大的反例,说明聪明的设计不需要对可用性施加压力。

设计×交互 | 在做交互的时候,我们可以从不好的设计与好的设计中学到什么?

Cultivated Wit的主页显示了一个插图猫头鹰。在人工智能的主页上,当你的鼠标移动时,猫头鹰眨眼的说明:

设计×交互 | 在做交互的时候,我们可以从不好的设计与好的设计中学到什么?

惊喜!当你把光标指向它时,猫头鹰向你眨眼。注意空格的明智分配。这里的关键区别在于,这并不是网站的重要组成部分,所以即使用户没有发现这个聪明的设计元素,它也不会降低可用性。此外,他们有一个清晰的向下箭头,暗示有什么东西在褶皱下面。向下滚动,你会看到

设计×交互 | 在做交互的时候,我们可以从不好的设计与好的设计中学到什么?

网站也可以很聪明,不需要牺牲用户体验。这一版本(可读性强,对比度好)创造了一种与Bolden想要达到的效果一样的感觉——而不是减少网站的用户体验。唯一的小问题是,“加入我们的电子邮件俱乐部”应该更清晰可见,但作为一个整体,经过精心设计的智慧网站是一个很好的例子,它提供了一个聪明的设计,而不会造成糟糕的用户体验。

 

聪明的设计应该总是尽可能的简单,并且/或在实际用户上进行测试。有时候,巧妙的设计会适得其反,损害可用性。

Superfluous animations

多余的动画

不好的设计:paypal在Dribbble上的概念收据

动画是交互设计的一个重要元素,但它们应该始终服务于一个目的。他们不应该为动画而做。不幸的是,设计师们倾向于对动画情有独钟,部分原因是动画制作太有趣了,以至于我们可能不知道什么时候该停下来。Vladyslav Tyzun关于贝宝电子邮件收据的动画概念,发布在Dribbble上,是一个错误的动画例子:


设计×交互 | 在做交互的时候,我们可以从不好的设计与好的设计中学到什么?

动画是漂亮的,但是是多余的。

总而言之,查看交易细节需要花费巨大的3.5秒。

一个简单的淡入的收据会更优雅,而且因为它占用的时间更少,对用户也更好。

当设计者似乎无法获得足够的动画时,这个问题就变得很危险。

到2016年,Vladyslav的动画将获得500多个赞和8000个点击量。

这显示了一个错误的欣赏,设计师们为了动画而转向动画。

深入了解设计师倾向于更直接的表现,并在你投入动画之前抓住自己,这将为你节省很多时间和避免很多麻烦。

记住,用户来到网站是为了目的——我们想让他们知道他们在短时间内是什么样子,而不是在画廊的大巡游中留住他们。

好的设计:Stripe Checkout的动画。

然而,当我们有目的地做动画时,结果会很好。

当用户收到验证码时,查看Stripe Checkout的动画:


设计×交互 | 在做交互的时候,我们可以从不好的设计与好的设计中学到什么?

Stripe使用动画来让事情看起来比实际更快:它为用户提供了更新(比如“发送”),尽管他们可能还没有收到短信。

这可以防止用户在等待时感到沮丧,并保证短信马上就会出现。

来自W3C的邀请网络动画专家Rachel Nabors提出了在设计动画时要记住的五个原则:

有意动画(Animate deliberately):在创建动画之前,先考虑每个动画。

它需要超过12条原则(It takes more than 12 principles):迪士尼动画电影的12条原则,但不一定适用于网站和应用。

实用和必要,然后美观(Useful and necessary, then beautiful):美学应该把后排座位让给UX。

快4倍(Go four times faster):好的动画是不引人注目的,这意味着它们跑得很快。

安装一个关闭开关(Install a kill switch):对于大型动画,例如并行效果,创建一个退出按钮。

 

一定要让你的动画具有目的性:太多的动画会扼杀一个产品的用户体验。外观漂亮必须发挥它的重要性和功能。

看看糟糕设计的例子是不是很有趣?

值得庆幸的是,它也具有教育意义。

以上是五个好的和坏的设计案例

了解您的用户需要什么,然后传递这些信息。

如果你有很多信息要传达,试着用视觉代替文字。

总是标签你的链接!

用户不喜欢神秘链接。

避免在用户操作中添加任何形式的摩擦,除非它们是为了阻止操作。

测试你的聪明设计,并谨慎地包括它们。

动画就像诅咒。

如果你过度使用它,它会失去所有的影响。

设计×交互 | 在做交互的时候,我们可以从不好的设计与好的设计中学到什么?

设计史论载入中…


设计史论资料册2.0仍在火热销售中

淘宝搜索:设计史论资料册2.0

不仅有书还有很多电子大礼包

并且用户可被邀请加入设计史论知识星球

设计×交互 | 在做交互的时候,我们可以从不好的设计与好的设计中学到什么?

设计×交互 | 在做交互的时候,我们可以从不好的设计与好的设计中学到什么?

点击“阅读原文”关注Sujay Wu微博,下放广告需要点击量支援
赞(0) 打赏
未经允许不得转载:IAMUE » 设计×交互 | 在做交互的时候,我们可以从不好的设计与好的设计中学到什么?

交互学院

在线学习交互设计课程1元秒杀Sketch入门课程

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏