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

让人人都懂点儿设计设计史论全文字数 :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

相关推荐

  • 如何识别和避免“暗黑用户体验”

    作者:Emily Stevens | 翻译:沙喵〜 审校:Moli用户体验设计是一门创造独特奇妙体验的学问——但设计的产出并不都是像彩虹一样美好灿烂的。即便是本质上强调用户友好的设计产业也会有黑暗的一面,而这些黑暗的欺骗性的设计模式比你想象的更为普遍。去年,用户体验设计公司Sigma点名指出,好几家知名零售商利用欺验性的暗黑用户体验设计从用户那儿赚了更多的钱。出现在耻辱榜上的有电商巨头Amazon、快时尚电商Boohoo.com(英国)...

    2018-03-20
  • 交互设计前期分析(一)

    在以前还是交互设计师新手时,总会遇到这种情况,给出了一份方案,被产品经理驳回:“虽然能用,但是不够好,要不要参考其他竞品再想想。”接着再东看看西看看,接着给出第二版方案,仍然被说缺了点什么,于是一版接一版地改,最后勉强定了一个差不多的方案。为什么会导致这样的情况呢?今天我们来说第一个存在的原因。如果做交互设计,没有理解产品的业务需求,那么做出来的设计就算是美观、漂亮,也不能成为好的设计,因为没有实现业务诉求。而且,对业务诉求的分析,会影...

    2018-04-17
  • 物联网UXs(用户体验)的设计模型

    如在文章《物联网相关产品的用户体验设计与其它产品设计之间的差异》(http://www.toutiao.com/i6414599431076708866/)所描述的那样物联网(IoT)的设计将面临着一些挑战和复杂性,这些挑战您可能不会在“常规”的Web服务(只有软件)中遇到。在实际设计中您将需要考虑一些不同的也许是新的设计领域,而所有这些都将用于塑造UX(用户体验)。物联网产品的两个最明显的和有形的设计形式是:一是UI (用户界面)或者...

    2018-05-01
  • 李斌:用户体验是商业变革的核心 ▏笔记

    混沌大学2017年商业创新第29课与做“车”相关领域的互联网人中,你很难再找到一个经历比李斌更加丰富的人。作为易车网的创办者、蔚来的操盘手和摩拜单车的天使投资人,李斌已经在汽车领域创业18年。对于创新的商业模式,李斌认为核心在于重新定义用户体验。伟大的商业模式变革,都不是从商业模式出发的。李斌老师在混沌大学授课授课老师|李斌易车网、蔚来汽车创始人、董事长,兼任摩拜单车董事长过去20年互联网获得的巨大成功告诉我们,用户只会为好的体验买单。...

    2018-04-06
  • 最新软件安装包目录【18年4月】

    悦台新媒体欢迎关注我们图文美编部关注软件导航电脑办公室内/外设计平面设计机械设计影视动画建筑设计地理信息网页设计屏幕录像编程类电子绘图数据库数据统计理科工具软件目录【电脑办公】电脑系统(U盘安装)PE制作WIN7WIN8WIN10XP电脑系统(直接安装)WIN7WIN8WIN10Officeoffice2003office2007office2010office2013office2016Projectproject2007projec...

    2018-04-09
  • Axure优雅装逼指南:开启原型高颜值形态

    作者寄语 / 一直想写的Axure小技巧分享,终于动手写了。望能对亲有所帮助,文笔粗糙请谅解。内容目录:啥是高保真原型?简单说明原型Axure可以画出什么水准的高保真?给示例,开启装逼模式特殊的技巧:核心内功:目标清晰/理解设计规范画图习惯:像素对齐/用浅色/上素材啥时候上高保真?:适用场景 and 不适用场景啥是高保真原型?啥是原型,从事互联网研发体系的同学,肯定非常熟悉,特别是产品岗同学。如果不是,那如下简单讲原型和高保真原型的:原...

    2018-04-28
  • UED沉思录

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

    2018-03-15
  • 作品集总结|本科建筑跨专业申请交互设计?Dream School还是皇艺?这可能吗?

    PS-ONE#20180504建筑背景,申请交互设计跨专业申请结果如何?本科建筑,转专业申请交互设计Master?并且Dream School还是世界第一的RCA皇家艺术学院?在经历了PS-ONE历时8个月的内部评审后她如愿以偿了吗?。。。。。。8个月后爱丁堡大学,get拉夫堡,get交互设计,是细节非常复杂的专业涉及到的知识点、设计思维,对转专业申请者来说,是很苛刻的所以拿到爱丁堡、拉夫堡这样强势院校的Offer已经是很不错的结果了但...

    2018-05-04
  • 用户体验让生活更美好

    我们赤裸裸的来到这个世界,最后赤裸裸的离开,来人世走一遭就是来体验来了。图片来源:亚朵官网-Life is Atour周四晚上拉着应用体验部的穆老师在产品交互问题上聊了一个多小时,深受启发,再结合上周末去天津游玩,入住了梁宁老师在得到里推荐的非常注重用户体验的亚朵酒店,所以我觉得今天有必要在这里和大家聊聊用户体验的话题。图片来源: Scorch先声明用户体验设计不是视觉设计或UI设计,后者只能算是前者的组成部分。“用户体验”一词是Don...

    2018-04-02
  • 集创堂交互设计课程(零基础)详解

    零基础课程5月2日开课,咨询请加微信:yyy8010557经过将近一年的反复打磨,集创堂交互设计课程(零基础)终于出炉了!从内容上来说,这套课程采取了基础设计能力+交互设计思维+项目实战+设计软件学习全方位培养的模式,学员毕业后直接具备实际工作能力;从师资上来说,除了集创堂纯色、潇潇、青木三大导师外,网易云课堂的Nina、拥有六年教学经验的蜡笔强力入驻,课程直接对标网易云课堂;从时间上来说,长达七个月的浸入式学习,听课+作业+实战+讨论...

    2018-04-17