用格式塔原理分析页面中的用户体验

我一直认为心理学和设计是包含用户体验的。每当我们的目标是解决需求的时候,我们的专业就需要有同理心。随着我继续深入研究心理学进入设计领域时,我偶然发现了格式塔原则。

那么,什么是格式塔原则?

格式塔心理学是一种将人的思想和行为视为一个整体的思维学派。当试图理解我们周围的世界时,格式塔心理学建议我们不要只关注每一个小部分。

相反,我们的头脑倾向于将对象视为更大整体的一部分,并将其视为更复杂的系统元素。这个心理学院在人类感觉和感知研究的现代发展中发挥了重要的作用。

这次发现格式塔原理的旅程让我充分理解如何将这些原理融入到我的设计中。因此,在本文中,我将与您分享如何将这些原则作为我设计解决方案并应用于我的网站和应用程序中:

1.接近

当物体彼此靠近放置时,这些物体被视为一个整体而不是单独的个体。

以下是我们如何在设计中使用接近法则解决问题的一个例子:

图0:用格式塔原理分析页面中的用户体验

标题和链接相距甚远

正如我们所看到的,类别标题(在线预订和邮轮)和链接(了解更多)彼此分开,这使得它们看起来像浮动元素。如果我们将创建一个线框,它会看起来像这样:

图1:用格式塔原理分析页面中的用户体验

线框

整个组件脱离了上下文,因为没有将图像,标题和链接关联在一起。因此接近法则是我们的解决方案。把三个单独漂浮在外层空间的元素,作为一个整体组件。

图2:用格式塔原理分析页面中的用户体验

中心对齐的标题和链接

在我们使用接近原则的设计解决方案中,我通过使用中心对齐来缩小标题和链接之间的距离。通过这种方式,我们能够将3个元素(图像,标题,链接)结合在一起,这有助于我们解决缺失的上下文问题。

2.相似性

当对象彼此相似时会出现相似性。人们通常将它们视为一个群体或模式。资料来源:graphicdesign.spokanefalls.edu

在下面的设计问题A中,我指出了蓝色的文字颜色。原因在于,在用户交互中,Heavy Data User 和 Flexible Maximizer 是相似的 – 它们在界面中实际上都是标签。

图3:用格式塔原理分析页面中的用户体验

设计A

那么,是什么让这两个元素彼此无关呢?

答案很多。但是更简单的说明,没有任何东西将这两个元素绑定在一起,这使得它们看起来很分散。正如我们所看到的那样,很明显,界面的品牌颜色是绿色的,但突然间一个蓝色的文字颜色从无处跳出。因此,相似法则的规律在于:

图4:用格式塔原理分析页面中的用户体验

作为我们的解决方案,我通过将文本颜色设置为绿色并调整按钮的左右填充来创建相似性,以便它更接近另一个按钮 Flexible Maximizer.。

这个设计问题A可以通过重新设计来进一步改进(这实际上需要重新设计),这样可以更加简化用户的体验。但现在,让它在制作中改动一小步来到达相似性原则 – 方法2:

图5:用格式塔原理分析页面中的用户体验

设计B

现在在方法2中,我们来观察它的基本部分 – 类型系统,它们是:

标题: 40px Regular

正文: 20px Regular

文字链接: 20px Regular

乍一看,我们可能会认为这只是一个我们可以忽略的普通类型系统。但是当我们看得更近时,问题发生在正文文本和文本链接之间,它们都共享相同的文字系统(20px Regular),这可能导致用户混淆并且缺乏用户信任。当他们浏览网站时,他们可能会犹豫,他们正在交互的是正文文本还是文本链接,那么就需要进行反复试验。

好的,那么我们如何解决这个问题呢?

图6:用格式塔原理分析页面中的用户体验

作为我们的相似性解决方案,我们需要稍微调整Type系统:

标题: 40px Regular

正文: 20px Regular

文字图标链接: 20px粗体

我们通过使文本链接加粗,并且添加了一个图标,这样就增加了对比度。通过进行这些更改,我们在整个文本链接中创建了相似度,并加快了用户的认知加载速度。

超出主题的快速提示:在创建一个Type系统时,请选择具有各种权重的字体(细,轻,常规,粗体等)。我们的目标不应该是具有较少权重的各种字体大小以获得更好的对比度,而是要具有几种不同权重的字体大小。

3.焦点

焦点是关注领域,强调或找到构图中的差异,以捕捉并保持观看者的注意力。

在焦点问题上,我们将展示两个设计问题:

图7:用格式塔原理分析页面中的用户体验

从电信网站

在上面的例子中,元素的布局实际上没有问题。但是我们拥有的信息层次结构 – 主要操作和次要操作共享相同的按钮系统。

我们可以看到,这个界面的目标是让用户下载应用程序,并且FAQ是一个支持文档,让用户更好地理解他们的应用程序。

因此,我们的解决方案是:

图8:用格式塔原理分析页面中的用户体验

设计解决方案A

利用焦点原则,我将View FAQs按钮界面更改为边框按钮,为下载应用程序按钮提供所需的聚光灯效果。我还交换了他们的订单,主要行动在右边和次要在左边。其原因在于古腾堡图(Gutenberg Diagram)。它说:

基于这个定理,右边的两个点(在“Z”的第一个点及其最后点)是游客期望采取行动的地方。因此,在这里,您的号召性用语属于正确还是左侧,在这里确实没有问题。它应该始终朝向屏幕的右侧。

欲了解更多信息,你可以在这里这里查看 😀

我们通常可以看到的常见的按钮设计问题也仅仅是为了增加主题外的一些东西,为不同功能创建一种按钮界面(填写注册按钮,取消,加载更多内容,阅读更多内容等)。

难道创造一致性不好吗?

是的,我们都知道一致性在UX设计中扮演着重要角色,但我们称之为功能一致性。如果我们将创建相同类型的按钮设计来满足不同的功能,则会导致用户不一致的体验,并且可能会影响我们客户的业务目标。

脱离主题快速提示:按钮设计一致性=按钮功能。

现在转向Approach 2应用程序:

图9:用格式塔原理分析页面中的用户体验

两个按钮具有相同的视觉层次结构

这种设计也会出现同样的问题。“确定”和“取消”按钮共享相同的设计风格,这要求他们彻底阅读按钮标签,以便他们能够知道提交和取消的内容。

使用焦点,我们减少了阅读标签的时间,这导致我们设计解决方案B:

图10:用格式塔原理分析页面中的用户体验

我们互换了按钮并将按钮副本从OK更名为Submit,以使其更加上下文,并通知我们的用户,一旦他点击按钮,就会发生一个动作。

4.共同区域

共同区域的原则与邻近度高度相关。它指出,当物体位于同一封闭区域内时,我们认为它们被分组在一起。来源:用户测试

图11:用格式塔原理分析页面中的用户体验

Spotify,迪士尼,Netflix等功能不会与其类别一起分组,并且似乎是浮动元素。为了使它更简单,创建一个线框将看起来像这样:

图12:用格式塔原理分析页面中的用户体验

从上面的线框中可以看出,它比4个整体组件更可能是单个元素。因此,作为解决方案,共同区域原则:

图13:用格式塔原理分析页面中的用户体验

我们新的线框与共同区域原则

在线框中,我们使用框边将所有特征包含到它们各自的类别中,以便将它们视为一个而不是单个元素。以下是实施:

图14:用格式塔原理分析页面中的用户体验

除了边界框之外,我们用Plan Net 999替换了* Free Netflix六个月,并在Netflix元素的右上角用一个信息图标(彩色黄色图标)替代了功能列表的空间,一旦点击,会出现一个工具提示。

总结,这是4格式塔原则,可以节省您的设计时间。还有更多的格式塔原理可以用作您的解决方案。

希望你也受用

祝开心

本文翻译来自Medium感谢Psychology + design: Gestalt principles you can use as design solutions

关于商业设计价值的一些思考

这不是一篇实操型干货,但却是一篇值得深思的好文章,思想的深度决定未来的高度,希望有所收获。

我们有一个项目昨天停掉了,这种事情时有发生,有时候不得不面对。每当与客户陷入僵局,就需要围绕商业目标去思考决策。尤其是在设计阶段的停工,这本身就是项目中最敏感的问题。对我们来说,意识到问题是什么以及未来如何避免至关重要。

今天,我们将要讨论设计的商业价值,以及如何在营收能力和设计追求之间取得平衡。

设计实践的基础

我们称设计为“敏感问题”,因为它总是带有一点主观性。即使是最实用的工具产品,也需要一些适当的设计与包装。然而,“功能性包装设计”是有意义的,其目的是为企业带来利润。

在项目流程中,设计之前和之后的工作,几乎没有与设计相关的方面。

因为这样的原因,一些客户觉得设计只是作为一个支持部分。一位设计师的工作对他们而言,在团队中只能算是锦上添花,而并不是必要的。如果只是支持,就可以移除。如果可以移除,就是不重要的。而不重要,就意味着不被尊重。

然而,没有设计,就没有正确的引导和吸引力。设计很微妙,一个好的网站,使用起来就是让人很愉悦并喜欢继续使用。那么,在商业对话中,为什么这些有价值的工作似乎就变得微不足道了呢?我相信它是关于设计如何切入商业的方式问题。

唱片艺术家每卖出一张唱片就能获得8%到10%的版税,而为该唱片设计与包装的设计师只能得到一次报酬。这是因为设计师的作品被认为是一次性的创造力爆发,只是产出了静态的图像。然而,却没有人讨论创作的过程,包括无数个小时的修改、迭代、访谈、隐喻研究、专辑研究等等。

话虽如此,但如果一个设计师要求为每一张以他们作品为特色的专辑支付版税,则会被人认为是敲诈勒索。对于一个音乐家来说,这种收费是完全有商业意义的,但设计师却不能这样做。

这是一张互联网设计部门的层次图,灵感来自于Keith Granel的图表《商业设计:平衡创造力与利润》。

关于商业设计价值的一些思考

随着设计师职业生涯不断向上,他们承担的业务需求会慢慢多于实际的设计需求。这导致一种情况就是,具备商业头脑的设计师会从项目中解放出来,只参与艺术指导,而设计原型和界面的设计师却可能完全不关心业务。有时候,项目经理可以来平衡这里的工作,但这不是一个可靠的解决方案。

唯一的解决办法就是,在团队中建立一个良好的环境,团队成员之间互相汲取灵感与经验。这个环境可以从一个任务声明开始,遵循公司的标准,工作流程,并不断尝试。

仅仅上市是不够的,在世界经济越来越不可预测的情况下,企业有时不得不在一年中做生存模式和增长模式之间的转换。

如果设计只是被处理为一种补充功能,那么它对于公司来说要么就最先被砍掉,要么就是最后才加上。

为了打破这种恶性循环,设计需要变成业务的一部分,而不只是美化,好看。无论发生什么,生意都是给有准备的人。当需要时,它具有承压能力和灵活性。如果设计行业能在逆境中生存下来,那么设计师们肯定会坚守岗位。

设计的业务价值

为了制定业务价值,我们必须清楚地了解成功对每个相关人员意味着什么。如果我们聚焦于业务设计,是不是意味着我们会放弃设计执行?或者我们推动并说服客户相信设计可以给他们带来转变?

商业主导的决策被认为是首要的,这使得设计主导的决策成为次要的。

然而,如果你仔细观察,就会发现两者之间的区别并不明显。我们接下来要说明的想法已经被Damien Newman完美的解释过了,被称之为“设计曲线” :

关于商业设计价值的一些思考

当开始设计需求时,我们需要熟悉业务,我们需要学习研究功能和产品乃至于整个行业是如何运作的。因此,在设计开始之前,业务目标决定了整体的设计效率。

在产品的业务逻辑变得清晰之后,就可以对需求进行梳理了,这样用户就不必跟我们一样经历那种纠结的过程。这其实就是设计概念的由来,但这个概念本身并不具备执行力,它必须变得富有魅力,才能让人们开始关心并让他们知道自己能做什么。

然后,我们将这个概念转化为“设计”,这并不是凭空而来。那么,业务是什么时候结束的,设计又是什么时候开始呢?

设计与业务并不冲突,只是转化为一种可执行的方式。

这不仅仅是关于数字产品。一旦设计师做出了更好的界面,他们就能将其提升更好的用户体验。而一旦他们完善了单个产品的用户体验,他们就可以为整个行业、经济,甚至国家的整体体验做出贡献。设计师不仅要成为一名设计上的专家,而且要让利益相关者接受设计这个角色,还有很长的路要走。

设计如何影响经济

传统意识上来看,设计被认为是设计驱动产业的重要组成部分。就像,优秀的网页设计只适合网页设计师来做。所以,如果你所在的企业远离创意和文化产业,设计就变得不再重要。这其实是一个过时的观念,不符合当前的时代背景。

Forrester的一项研究表明,那些在UX上花大力气投资的公司,其获客,留存,日活成本都得到了降低,同时还增加了市场份额。设计增加了营业额,相当于在UX上每投资1美元,企业就可以获得100美元的回报。

当沃尔玛重新设计网站后,其访问量增加了200%;Truck Works公司重新设计了品牌,其收入增长了49%;宜家将其网站的购物流程进行人性化体验升级后,其收入增长了12%;JavaPura咖啡机在重新设计半年后,收入大幅增长了21%。

这导致几乎一半的互联网和硬件初创企业将其快速增长归功于设计。企业规模越大,营业额越大,设计在企业经营中的地位就越高。

为了说明设计对经济的影响,可以看下面这张图,图片灵感来自于设计委员会:

关于商业设计价值的一些思考

如果设计不能带来利润,那就只能被当做装饰。装饰有它自己存在的价值,可能不是直接的收入。然而,好的设计价值不会被分解,它是健康且坚实的。

将设计视为企业管理的主要资产的公司,在新产品引进、市场份额和国际增长方面都比竞争对手做的更好。

这类企业管理的问题在于,它只能通过反复实践来实现,而设计的商业化经验是不同于在设计院校学到的知识。

展示设计价值

由于缺乏商业分析、度量和术语方面的知识,设计师很难解释设计带来的价值。有时,基于信任就能解决问题,但大多数情况下,设计师必须展示他们的作品,并为他们所做的设计决策给出理由。

大的设计公司已经发展出他们自己的设计展示方式,这是相当难得的,而小公司必须用事实来支持他们的决定。更重要的是,这些事实必须代表不同的业务结果,这就是设计中A/B测试可以发挥作用的地方。

如果设计不依赖于事实数据,它就会开始给人一种搞艺术的感觉,这种感觉总是主观的。

我们的项目之所以会停止是业务价值和主观决策之间混淆的直接结果。度量设计是一种商业实践,它将确保我们正在做的工作走向正确的方向。

关于商业设计价值的一些思考

Report Builder for NLP Platform by Gregory Muryn-Mukha

设计的人文价值

并不是所有的东西都可以被测量。人们赞美或贬低设计的原因,是由于业务它在带来经济后果的同时,也激发了人们的情感。如果我们随波逐流地去衡量情感价值,我们最终将远离最初让我们达到这个目标的设计和商业目标。

Peter Senge说:

“单纯以利润为目的公司,就像那些没有思想的人,过于片面。”

设计和开发们的理想愿望,经常被产品的欲望,技术,财务或其他什么所限制。设计师这样做不只是为了钱。

设计师更注重目的而不是金钱。

——Dennis Hambeukers

商业活动意味着需要优化资产投入以获得最大的产出。这不是设计师该做的,恰恰相反,设计师们经过无数次迭代交付一个结果,这个结果不仅让客户满意,还能让世界变得更美好。或许优化了一个按钮,就帮助到某个人,让他用起来感到愉悦。

设计驱动的业务能力来自于创造价值的目的,而不是销售价值。

DDVB设计公司的Leonid Feigin在他的一次YouTube演讲中讲述了一个故事(https://www.youtube.com/watch?v=Cg1w42zg4sM&t=2060s)。这个故事发人深省,让你并不愿再提起它。

有一天,一个品牌客户来找他们,这位客户非常难得地找到设计团队来帮助他们。客户是一家非营利性的儿童姑息治疗中心,姑息治疗是对患有重症疾病的人的一种帮助。对他们来说,是帮助孩子和他们的父母。在业务上没有太多要求,DDVB接受了这个任务,下面是他们的设计。

关于商业设计价值的一些思考

这是一只里面有洞的大象,这个洞是一头小象的形状,这个洞隐喻的是无法治愈和填补的人,生活在这个洞里。

DDVB创建的形象讲述了一个悲惨的故事,但它也带来了希望。该中心帮助绝症儿童,是以他们父母而存在的。在那里工作的人分担着无穷无尽的痛苦,我在写这篇文章的时候也是带着一份情感。我相信当你读这篇文章的时候,你也会有所感触。

这不是你可以用ROI(译者注:投资回报率)来衡量的设计。设计并不总是服务于商业领域,并不是所有的东西都是商业的,设计就是为了不断提醒我们这一点。设计是你看待世界的方式,这个世界是有温度的。有时候为了为人民做些事情而牺牲商业价值是值得的,因为爱。

原文:https://uxdesign.cc/the-4px-baseline-grid-89485012dea6

作者:Ethan Wang

译者:彩云sky,公众号:彩云译设计

本文由 @彩云sky 原创发布于人人都是产品经理。未经许可,禁止转载

题图来自Unsplash,基于CC0协议

结果导向设计方法论——学会定义产品最终体验

从互联网时代开始,产品设计场景化的思路被提出来,即要综合考虑三方面的因素时间、地点、人物。

但是对日需完善的体验设计来说,简单的场景化思路很多时候会让场景之间的切换缺乏流畅的连接,使得单个场景相对独立、薄弱。此时需要提出一种更加完善的设计思路,从目标与结果出发,先定义产品的最终体验,再去思考达到该体验会涉及到的功能点/机会点,拓展功能反推每个场景,相互关联组成闭环体验。

继续阅读

调查问卷的设计:如何绕开用户的心理阻碍?

调查问卷得到的结果都跟实际情况不一样怎么办?本文分享了绕开用户心理障碍的方法。

一、起因

在一次产品市场研究的分享后,学员问:为什么每次调查问卷得到的结果都跟实际情况不一样?存在很大差异。经过一些列的沟通,定位核心问题源于调查问卷的问题设计。

现场给出学员三大方法: 继续阅读

一张交互设计画布:有助设计师从全局看待一个需求

公司决定让视觉设计师兼任部分交互设计工作,相关同事问我能不能做一些培训。第一节课我不打算讲Axure、xmind怎么用,因为软件完全可以自学,也不打算科普交互设计是什么,就好像解释篮球是什么并不能教会他们打篮球。我希望能教给大家一些东西,能马上运用起来真正解决问题。交互设计画布正是这样的好工具,它能帮助设计师从全局看待一个需求,找到真正的问题,综合所有因素提出可行的解决方案。下面开始我的表演!

 

一. 交互设计核心要素

首先从一个实际的问题开始。

小明是外地人,28岁,能熟练使用智能手机,第一次来北京,他想去得实大厦见一个朋友,但上午10:00到西二旗地铁站后不知道怎么走,如果你是一个地图App的设计师,请设计一个步行导航功能帮助他顺利的到达得实大厦。 继续阅读