第一印象很重要:为什么出色的视觉设计必不可少

已发表: 2021-07-22

人们做出快速判断。 形成对一个人的第一印象只需要 1/10 秒。 网站也不例外。

用户需要大约 50 毫秒 (ms)(即 0.05 秒)对您的网站形成意见,从而决定他们是留下还是离开。

这个数字来自特定的研究。 在第一项研究中,参与者对呈现 500 毫秒的网页的视觉吸引力进行了两次评分。 在后续研究中,他们将曝光时间缩短至 50 毫秒。

在整个过程中,视觉吸引力评级从一个阶段到下一个阶段高度相关,50 毫秒和 500 毫秒条件之间的相关性也是如此。 因此,可以在 50 毫秒内评估视觉吸引力,这表明您有大约 50 毫秒的时间给您的网站留下良好的第一印象。

这种第一印象取决于许多因素:结构、颜色、间距、对称性、文本量、字体等。 这个帖子:

  • 详细研究网站和第一印象。
  • 向您展示如何创建视觉设计以改善第一印象。

注意:以下所有网站截图仅用于说明目的

对网站和第一印象的研究

用户在 17 毫秒内形成设计意见。

几年前,谷歌在自己的研究中证实了 50 毫秒这个数字。 事实上,根据他们的研究,一些意见在 17 ms 内形成,尽管对某些设计因素的影响不那么明显。

他们研究的主要发现是,视觉复杂度低且原型性高(设计对特定类别网站的代表性)的网站被认为非常有吸引力。

原型主页的squaresquare示例
人们对网站应该是什么样子抱有期望。 无论设计多么富有想象力或引人注目,偏离这些都是一种风险。

关键要点:使您的网页设计简单而熟悉。 遵守约定。 人们对电子商务网站应该是什么样子有一个固定的想法。 如果您采用创新的、非常规的布局,人们就不太可能喜欢它们。

注意:在我们的综合报告(专门针对电子商务的 247 条指南)中查看大量电子商务指南和测试想法。

眼睛停留在网页的关键区域需要 2.6 秒。

用户的眼睛需要 2.6 秒才能落在对他们的第一印象影响最大的网站区域。

研究人员在学生扫描网页时监测他们的眼球运动。 研究人员随后分析了眼动追踪数据,以确定学生需要多长时间才能专注于页面的特定部分——例如 菜单、徽标、图像和社交媒体图标 - 在他们转到另一个部分之前。

他们发现第一印象越好, 越长参与者留在页面上。

  • 前 21 个电子商务 A/B 测试理念

    由 CXL

    通过测试有效的方法来改善您的第一印象。 以下是从研究中得出的前 21 个电子商务测试想法。

  • 此字段用于验证目的,应保持不变。
网站第一印象的眼球追踪研究示例
该研究将网站分为六个部分,然后监测学生受试者的眼球运动。 (图片来源)

最吸引观众兴趣的六个网站部分是:

  1. 该机构的标志。 用户在继续之前花了 6.48 秒专注于该区域。
  2. 主导航菜单。 几乎与徽标一样受欢迎,受试者平均花费 6.44 秒查看菜单。
  3. 搜索框。 用户专注于 6 秒多一点。
  4. 网站的主图。 用户的眼睛平均注视 5.94 秒。
  5. 该网站的书面内容。 用户花费了大约 5.59 秒。
  6. 一个网站的底部。 用户花费了大约 5.25 秒。

关键要点:良好的第一印象会导致更长的访问时间。 确保这里列出的六个元素看起来很棒。

第一印象与 94% 的设计有关。

英国研究人员分析了不同的设计和信息内容因素如何影响在线健康网站的信任度。 研究清楚地表明,网站的外观和感觉是第一印象的主要驱动因素。

干净的网站设计示例
英国的一项研究发现,大多数网站评论依赖于对网站设计的看法,而不是其内容。

在测试参与者给出的所有反馈中,94% 是关于设计的:

  • 复杂的;
  • 繁忙的布局;
  • 缺乏导航设备;
  • 无聊的网页设计;
  • 色彩的运用;
  • 弹窗广告;
  • 网站介绍缓慢;
  • 小字;
  • 文字太多;
  • 企业形象;
  • 搜索能力差.

只有 6% 的反馈是关于实际内容的。 视觉吸引力和网站导航对人们对网站的第一印象影响最大。

同时,糟糕的界面设计与网站的快速拒绝和不信任有关。 当参与者不喜欢设计的某个方面时,很少会在主页之外探索整个网站。

斯坦福大学可信度专家在 Consumer WebWatch 的研究中发现了类似的结果。 他们发现,人们他们是如何评价一个网站的信任,以及他们如何真正做到这一点是不同的。

数据显示,与网站内容相比,普通消费者更关注网站的表面方面,例如视觉提示。 例如,近一半的消费者 (46.1%) 评估网站的可信度,部分是基于视觉设计的吸引力,包括布局、排版、字体大小和配色方案。

关键要点:伟大的设计让人们信任你并留下来。 糟糕的设计会造成不信任并让人离开。

对于第一印象,视觉吸引力甚至胜过可用性。

一项研究检查了视觉吸引力和可用性对用户性能和网站满意度的影响。

用户在网站上完成了不同的任务,这些任务的视觉吸引力(高和低)和可用性(高和低)各不相同。 结果表明,第一印象最受网站视觉吸引力的影响。

用户对具有高吸引力的网站给予较高的“可用性和兴趣评级”,而对具有以下特点的网站给予较低的“可用性和兴趣评级” 低的上诉。 用户对低吸引力网站的看法并没有受到网站可用性的显着影响,即使在成功体验该网站之后也是如此。

关键要点:投资于设计。 这是吸引用户的最重要的因素。有趣的是,出色的视觉设计将带来更高的可用性评级,而实际可用性则不那么重要。

积极的第一印象可以提高整体满意度。

在一项旨在研究产品预期对主观可用性评级的影响的实验中,参与者在可用性测试之前阅读了对新型移动设备的正面或负面产品评论。 对照组什么也没读。

用于研究具有正面产品评论的启动的移动设备。
研究中使用的设备。 积极的产品评论可以让用户获得更积极的体验,即使他们未能完成指定的任务。

该研究揭示了积极预期对主观实验后评级的惊人影响。 阅读正面评论的参与者对设备的实验后评分明显高于负面素数组和无素数组。

即使在困难任务条件下,当用户大多数任务失败时,正素数的这种促进作用也能保持。

关键要点:如果用户“立即”喜欢您的网站,他们会为您解决一些小问题。 这种启动也可能以另一种方式起作用:A n 否定的第一印象会降低对您网站的整体满意度。

因此,如果您想给人留下好印象,最好从哪里开始?

如何通过视觉设计给人留下良好的第一印象

1. 用你的设计区分你的网站(和你的公司)。

你是时髦的、愚蠢的、性感的、精明的、聪明的、经典的还是什么? 你和竞争对手有什么不同? 您是否通过网站上的排版、图像和设计尽快传达这一点?

在避免“创新”设计(这可能会让消费者望而却步)与寻求独特的视觉风格之间存在平衡。 很多时候,同一垂直行业的公司在他们的设计美学中采用“我也是”的方法。

有时,竞争站点非常相似,如果您从站点的标题中删除徽标,则几乎不可能将一个站点与另一个站点区分开来。

据我观察,这主要有两个原因:

  1. 关于设计美学的内部对话转变为关于功能的对话,而不是开发独特的视觉识别。
  2. 比赛采用了“看起来像是在工作”的功能和美学。

当然,当新网站启动时,每个人都忙于互相击掌,没有注意到新设计几乎是一个主要的复制品 竞争者, 或者您完全忽略了询问现有客户为什么他们喜欢在您的公司购物。

如果您想为您的视觉传达添加更多特色但不知道从哪里开始,请查看 Zaltman 隐喻引出技术并将其应用于您的定性调查。 这可以帮助您设计第一印象,在不疏远访问者的情况下传达您品牌的核心价值。

来自Taylan Demirkaya 的营销研究中ZMET 技术

“品牌标识”不仅仅是一些需要洗牌的软糊糊的东西。 Cheskin Research & Studio Archetype 早在 1999 年就发现,与电子商务公司建立信任的六个最重要因素是:

  • 牌;
  • 导航;
  • 履行;
  • 推介会;
  • 最新技术;
  • 安全标志。

这点考虑一下吧。 如果第一印象是您的网站与其他网站没有区别,那么为什么有人要浏览您的产品页面,更不用说在竞争中选择您了?

这是一个例子:我在谷歌上搜索了“皮夹克”,看看在随机搜索中,视觉差异和整体第一印象是否会成为问题。 这是前三个结果:

这三个网站有什么区别吗? 不是真的,即使他们没有完全相同的人口统计。

过了好一会儿在搜索结果中滚动之前,我发现任何网站,看上去并不像以上这样的,终于结结巴巴的Bomboogie的。 不可否认,该页面与其竞争对手不同:

与其他网站不同,该页面立即呈现出一种不同的感觉——这不是一家制造精致、高级时装的公司。 他们的夹克“灵感来自飞行员使用的夹克”,网站看起来很重要。

多年前,当我第一次做这项研究时,我发现的最独特的网站是 Schott。 虽然我会放弃他们的图像滑块、汽水盖导航和许多假纹理,但设计有一种魅力,给人留下了强烈的第一印象,尤其是考虑到它是一个老品牌。

肖特

你可以感受到人物和情感,并了解他们是否值得信赖,这就是整个第一印象的内容。

然而,设计趋势也赶上了他们,现在他们看起来更像其他所有网站:

Shopify 创建了一个包含 100 种精美电子商务设计的列表,其中包含具有独特第一印象的公司。

关键要点:您可以(并且应该)传达独特的品牌标识,而不会过于创新以致混淆或惹恼用户。

2. 激发网站访问者创建一个更强大的第一 印象。

一项关于第一印象在旅游网站中的作用的研究发现,与灵感相关的元素对旅游网站的影响最大 第一印象s。

这表明吸引人的视觉刺激是让人们在网站上停留更长时间的重要工具,从而将更多的访问者转化为购买者。

智利旅游网站上鼓舞人心的自然景观

可用性是形成第一印象的第二大驱动因素,其次是可信度。

总而言之,这告诉我们旅行者希望从目的地(图像)中获得灵感。 他们不想把精力浪费在搞清楚事情(可用性)上,他们想确保旅行提供商是合法的(可信度)。

关键要点:如果您要推销一个梦想(例如去智利度假的想法),鼓舞人心的摄影作品是主要的第一印象创造者。

3. 确保折叠上方区域晃动。

多年来,首屏问题一直备受争议。 研究表明人们在滚动时没有问题,事实上,他们更喜欢滚动划分内容分成很多页。 这和第一印象有什么关系?

9 网站信誉杀手

通过亚历克斯·伯克特

了解如何创建一个能激发信任而不是怀疑的网页,这有助于购买而不是阻止购买。

  • 此字段用于验证目的,应保持不变。

这是考虑首屏问题的新方法:它需要成为您网站的最佳部分。 第一印象在 0.05 秒内形成。 用户不会在那个时候向下滚动。

因此,他们在滚动的情况下立即看到的内容决定了他们是否曾经向下滚动。 考虑到这一点…

特别注意您的导航。

清晰的网站导航示例

许多热图研究表明,导航通常是网站的第一个和最常查看的区域之一。 但是除了典型的类别之外,您还应该包括什么 ?

根据 Business Insider 关于人们放弃购物车原因的一项研究,25% 的人表示“网站太复杂”(即导航难以使用),接近 60% 的人表示“隐藏成本”(即运输成本) ) 作为他们没有 pa 离开的主要原因.

图表显示了为什么购物者没有在电子商务商店付款就离开
隐性成本和复杂的网站是用户不付费离开网站的两个关键原因。

在 eConsultancy 的另一项研究中,访问者询问是否从不熟悉的电子商务网站购买时指出,“专业设计”、“网站包含知名品牌”和“联系信息可见”都影响了他们购买(或不购买)的决定)。

与您不认识的零售商一起购物的研究结果。

做得好,网站的导航可以包括一些或所有的东西,如果没有的话,会阻止访问者购买。

看看我最喜欢的网站之一 ThinkGeek 的导航中传达了多少信息,而无需进入该网站的内容:

网站导航传达了许多有价值的信息。

无需打猎太多,很容易找到:

  • 对时间敏感的促销活动;
  • 多种方式深入网站(类别、兴趣、搜索);
  • 新产品、顶级产品和独家产品,以及他们携带的产品的提示(礼品、T 恤、电子产品、礼券);
  • 奖励计划;
  • 在售产品;
  • 他们的“免费送货”门槛;
  • 客户支持可用性(通过“实时聊天”和“帮助”按钮)。

将其与 Zara 之类的极端示例进行比较,您就会明白为什么这很重要:

极简导航的例子

案例研究:Alight 增加了 16% 的网站搜索量和 25% 的购买量

老下车

Alight(现在的 CurvyHQ)知道他们的网站感觉过时了。 这家大码女装零售商使他们的网站导航更加现代。

他们增加了搜索栏的大小,删除了信任符号,将“销售”和“新”类别纳入粉红色导航区域,并阐明了他们的价值主张,以及其他一些小更新。

更新了带有搜索栏的主页导航

结果是网站搜索量增加了 16%,整体购买量增加了 25%,所有这些都是通过使导航成为强烈第一印象的一部分。

第一印象——在网站上或在 NBA——可以持续数年。

经济学家 Barry Staw 和 Ha Hoang 的研究调查了选秀顺序对 NBA 的影响。 他们在球员被选中后观察了五年的职业生涯。 五年足以在很多方面证明自己,所以草稿应该没有作用,对吧?

错误的。 根据这项研究,球员获得的上场时间与他们的选秀顺序相关。 即使在控制了球员的场上表现、伤病、交易状态、位置和其他因素之后,球队也会给予高选秀球员更多的上场时间并留住他们更长时间。

选秀编号的每一次增加(即被选为第九名而不是第八名)都会减少多达 23 分钟的上场时间。 令人难以置信的是,选秀顺序继续预测球员在 NBA 的第五年的上场时间,这是研究中衡量的最后一年。 首轮选中的球员职业生涯也更长; 他们比其他人多打了 3.5 年。

给人留下清晰、强烈第一印象的主页示例

另一项研究调查了第一印象的持久性。 它发现与第一印象相矛盾的新体验会“绑定”到它们产生的环境中。 然而,第一印象仍然支配着其他环境。

我们的大脑将违反预期的经历存储为“规则的例外”。 规则(即第一印象)被视为有效,除了它被违反的特定上下文。

关键要点:如果第一印象是负面的,那么多年来用户可能会对您产生偏见。

结论

视觉吸引力很重要。 很多。 我的建议:永远不要试图在设计上省钱。 我一次又一次地看到“简单”的设计大修如何导致显着的转换提升。

人们在几毫秒内形成他们对您网站的看法。 您网站上的第一秒可能比接下来的所有秒(如果有的话)更重要。 确保一秒钟给人留下良好的第一印象。