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

让人人都懂点儿设计设计史论全文字数 :4689 | 阅读 时长:12分钟今天史论君为大家分享一篇来自interaction design foundation的文章原文作者:TEO SLANG    |    翻译:于于于Jessica编辑:Sujay Wu转载后台回复 :史论君把不好的设计和好的设计的反面例子一起看,不仅有趣,而且为设计师们提供了重要的经验教训。它们突出了设计人员要避免的陷阱,并让我们理解如何将设计理论转化为在现实世界...

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

让人人都懂点儿设计

设计×交互 | 在做交互的时候,我们可以从不好的设计与好的设计中学到什么?
设计史论
全文字数 : 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微博,下放广告需要点击量支援

原创文章,作者:交互精选,如若转载,请注明出处:https://www.iamue.com/36315/

(0)
交互精选交互精选
上一篇 2018-04-07
下一篇 2018-04-07

相关推荐

  • 『设计|交互设计』2018年交互设计趋势解析

    本文转载自:设计前沿2018年交互设计趋势解析2018视觉趋势Pantone 2018流行色:紫外光色Pantone 官方翻译为「紫外光色」,紫外光色是强烈挑动思绪与深思的紫色调,传达独创性、创造力及前瞻性思维,为我们指向未来。彩通:18-3838 紫外光色颜色代码:#5f4b8bRGB:R 95,G 75,B 139CMYK:C 71,M 73,Y 7,K 8从2017年下半年开始,紫色配色的作品开始很多,所以2018年这个色也是一个...

    2018-04-25
  • 行云流水般的交互体验:当智能头机邂逅百度音乐

    音乐,作为一直延续的人类共有的精神食粮。从爱迪生发明第一部留声机到后来的黑胶唱片、再到磁带、CD、MP3经历了整整140年,储存和传输音乐的介质从磁性变成了光学;储存歌曲的数量越来越多,体积也越来越小。但是笔者有一个长期被困扰的问题:作为运动爱好者和音乐发烧友,在跑步锻炼时常常需要将iPod或者Sony Walkman笨重的机身绑在胳膊上,然后再插上耳机、选歌、调节音量等等至少4、5步操作才能听到想听的歌;还常常因为线头缠绕,越解越乱。...

    2018-01-30
  • 用户体验才是王道

    出生在委内瑞拉的亚历山德拉(ALEXANDRA VASQUEZ),在美国的波士顿大学毕业后不久就结婚了,婚后的她与德国籍的先生定居在柏林。和许多年轻女孩一样,对于新成立的家,亚历山德拉有许多憧憬,急着想布置有个人风格的家居特色。〝我去了大卖场,买了所有成家的基本家具,从床、沙发到餐桌。当这些东西送到我家时,我意识到我的家一点也不温暖,看起来像是一个商场的陈列间。它缺乏属于我和先生的个性以及属于自己生活的种种细节。〞〝意识到了这点后,对于...

    2018-02-03
  • Axure RP - 专业的原型设计工具

    俗话说的好,不会画原型的设计师不是好的产品经理。产品经理的一大技能就是可以熟练使用原型工具,画出优秀的产品原型。Axure RP是一个专业的快速原型设计工具,是美国 Axure Software Solution 公司旗舰的产品。产品经理能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。它比一般创建静态原型的工具如 Visio、Omnigraffle、Illustrator、Photoshop、Dreamweaver...

    2018-03-16
  • 【设计竞赛】2018UIA-霍普杯竞赛开题!扎哈事务所新任掌门人帕特里克 · 舒马赫担任主席

    编者按 :期待已久的2018UIA-霍普杯国际大学生建筑设计竞赛题目新鲜出炉啦!扎哈 · 哈迪德建筑师事务所(ZHA)负责人帕特里克 · 舒马赫担任本次竞赛主席并拟定题目。帕特里克 · 舒马赫Patrik Schumacher扎哈·哈迪德建筑师事务所负责人竞赛主题演变中的建筑Architecture in Transformation竞赛题目城市共生:定制化社区模块Urban Co-living: Customizing Modules...

    2018-02-02
  • 美甲店如何做好用户体验?【下】 | 互联互生

    上周的一篇文章我们说到了“用户体验”对于美甲店铺的重要性,文章中我提出了一个“峰值和终值的一个概念”,以及举了几个服务性的行业的例子,它们是如何利用“多数被遗忘,偶尔特漂亮”这个心理给用户带来不一般的体验感。今天这篇文章我们重点来谈谈咱们美甲店可以怎样在“用户体验”上有一些创新。好客服的法则随着网络越来越普及和重要,大部分美甲店主都开始注重自己的店铺在网络上面的评价,我们就先拿大众点评这个平台作为例子。一个店铺在大众点评上面肯定有很多的...

    2018-05-06
  • Adobe放大招!Sketch有的功能都上了!

    (本文内容来源知友:不知语冰,感谢~)关于 Photoshop的UI-DNA工具很久就有传闻了!昨天据MICU了解,这个强大的工具终于开放测试啦~~虽然说很多设计师比较推荐sketch,可是这回了不得!sketch有的功能,PS都能实现了!也许有很多同学还不太了解 UI-DNA 是个什么样的工具,说白了,就是 Photoshop 上拥有更强大的属性编辑功能。现在来说说UI-DNA都有神马强大的功能。打开Photoshop 中的UI-DN...

    2018-03-02
  • 【优秀作业展示】交互设计基础(一)

    《交互设计基础》是学习交互设计的重要课程,在大三上学期开课。任课教师是工业设计系的华梅立老师,通过老师的认真指导和对该课程的学习,大家对交互设计有了进一步的了解,在老师的引导下,同学们对高铁取订票界面设计进行了深入的分析和再设计,并选取了感兴趣的小方向进一步拓展。接下来就看看学完本课程后同学们的优业。优秀学生作业第一期周亦辂产品设计1511高铁取订票界面设计色彩选取字体:冬青黑体字号:18、21、24、28、30、32、36风格:利用从...

    2018-04-04
  • 交互设计(一)表单设计

    此文来源于网络

    2018-04-04
  • 百度UED:运营设计那些事儿

    数十万互联网从业者的共同关注!作者:百度搜索用户体验中心 授权早读课发表,转载请注明出处。在现如今的社会中,每天都在进行着一场场没有硝烟的商战。运营设计则是至关重要的一部分。那么怎么才能做出一个好的运营设计或者一个相对比较成功的运营设计呢?我们要知道设计的目的。设计的目的是什么?设计核心在于能够让用户在有限的时间内Get最有价值的信息,找到所得,从而实现转化。知道设计的目的了,在项目中自然形成了一些思路流程。1、需求分析需求分析分为:产...

    2018-01-31