美文网首页PM&&DesignDesign设计
以科学态度看,为什么“简单”的网站超级赞?

以科学态度看,为什么“简单”的网站超级赞?

作者: bluejazz | 来源:发表于2016-11-02 14:02 被阅读1144次

    翻译:David Lee

    在谷歌2012年8月的一项课题中,研究人员发现,用户在1/20-1/50秒内即可判断网站设计的漂亮与否,并且,与更简洁的设计参照物比对,视觉复杂程度高的网站得到了一致差评。

    此外, “原型化”程度很高的网站 ——既那些与同类型网站有相似布局——且设计简洁的网站在整个研究中被评选为最漂亮的。

    换句话说,这个研究发现,越简单的设计,越好。

    但……这是为什么?

    在这篇文章里,我们会解释,为什么认知流畅性和视觉信息处理理论,会成为网页设计简洁化的决定性因素,另外,更简洁的设计如何为产品带来更多的转化。

    我们还要研究一些已经使用简洁设计的网站案例,看看他们是如何提高转化率的,从而为你在简化自己的设计时提供一些指导。

    什么是原型网站?

    如果我说“家具” 什么图像会在你的头脑中闪现? 如果你跟95%的人差不多,你会想到椅子。如果我问什么颜色代表“男孩”,你会说“蓝色”,女孩 = “粉色”,车 = 轿车,鸟 = 更知鸟,等等……

    原型——当大脑需要归类所有你感受过的事物时,在头脑中所创造的最基本图像 。无论是家具还是网站,你的大脑都会创造一个样板来定义这些事物的外观和感觉。

    在互联网领域,原型被分解到更细分的类别中。对于社交网络,电子商务网站和博客,大脑中都会有一个完全不同但独一无二的图像来描述它…… 当这些独特的网站缺少了图像中的某些信息时,有意无意间你就会拒绝它。

    比如说“针对20多岁时尚年轻人的在线服装商城”你可能立刻会想象这样的东西:

    按照“在线服装商城” 的原型进行了设计,同时它与一个销售嘻哈服装的电商原型图也有很多共性。 我们所看到网站背后的原型

    这些网站都是独特的,也不存在互相抄袭。相反,它们只是顺应了你期望中电子商务网站的样子而已。


    认知流畅性是什么意思?

    认知流畅性字面背后的基本意思就是,大脑喜欢想到一些容易想到的事情……

    这就是为什么你会喜欢浏览一些网站……他们遵从你的本能,你很自然的知道所有的内容在哪,也能知道下一个操作该做什么。

    “流畅使得我们的思维处于你根本感受不到它在工作的状态下,无论什么情形下当需要考虑很多信息时,它就会影响我们” —Uxmatters.com

    “认知流畅性”其实源自于另一个概念,也就是被大家所熟知的曝光效应,它的基本理念就是指,某件物品越多的曝光给你,你就越喜欢它。

    同样,这个原则也适用于互联网。

    比如,博客右边栏上的选项就让人很“熟悉”,电商网站上,一个吸引眼球的大标题,加上特写高清大图,又或者在屏幕左手边最顶部的公司标志。

    如果你网站的来访者已经熟识了某些同类网站的必备特征,并认为它是这一类型网站的标准,那么偏离这些标准会导致他们下意识的把你放入“不好看”的行列中。

    以下是一些电商网站。看看你能否注意到他们的相似之处。

    注意:无论如何,别把我说过的话当做“做的和别人一样就行了。”如果你一不留神,很有可能因为这种做法受到损失。

    在同类别的网站中,知道什么样的设计是“原型”非常重要,但是更为重要的是,找到证据支撑设计决策才能让最终结果有所提升。

    有很多设计师都会做糟糕的选择。如果不做任何研究,你也很有可能重蹈覆辙。比如,很多网站使用自动切换的图片来显示产品,但是多次研究中表明自动图片切换降低了转化率

    面对你的基本预期时都发生了什么——一项案例研究

    看看上面的三幅图, 你内心对一个电子商务网站的期待差不多就是这样了。 即时你从未访问过这些网站, 但好的设计就会让你感觉到它内在的“可信度”。

    因为高水平的流畅体验,一个网站会让人感到非常熟悉,来访的用户就不需要花费太多精力去检视整个网站,而是专注于他们所要做的最重要的事。

    然而,当体验不流畅的时候,你立刻就能感觉到。 访问这家在线零售商,Skinnyties.com,之前他们的网站看上去一点都不像做电商的,直到2012年十月份重新设计之后才有所改观。

    改版前:

    改版后:

    对一些关键点的处理方式,导致了两个版本的巨大差异:

    遵循了“原型”电子商务网站的布局主题

    留白让页面更加“开放”

    一张特写只展示一件商品,并且使用了高清的图片和对比强烈的颜色。

    点击这里查看针对这次重新设计的完整案例分析,如这篇文章所示,你完全有可能在给网站做升级的同时,让你的网站更好地“适应”通用的原型标准。

    这次再设计仅上线2.5周后所带来的惊人结果

    当然,这次再设计本身做的还不错,但也并不是那么有开创性。它只是准确的迎合了人们对于一个流行的在线服装商店的期望。它是“开放的”, 响应式的,并在所有的产品页面使用了统一的设计语言。

    我们与旧页面对比就会发现,显而易见,正是缺少了这些通用的元素导致用户不会在这个旧页面上付费。

    面对复杂的网站,我们会经历什么样的视觉信息处理过程?

    连接中的这项研究课题,由哈佛大学,马里兰州立大学,科罗拉多州立大学共同完成,研究人员针对“美观”这个课题,对不同地域的人群进行研究,发现了强有力且在数学上极为严谨的证据 —— 比如,具有博士学位的测试者不喜欢特别花哨的网站—— 当然,如果我们讨论的是面向大众视觉魅力,这就没什么参考价值了。

    我们能得到的唯一普遍真理是,视觉复杂程度越高的网站,视觉吸引力就越低。

    如果你想参加测试,点击这里

    为什么从科学角度讲,简单的信息更容易被大脑处理

    “视觉复杂程度”低的网站之所以被认为更漂亮,很大一部分原因在于不复杂的网站不需要眼睛和大脑费力的去编译,存储和处理这些信息。

    最初,你的视网膜会将真实世界的视觉信息转化为电脉冲。然后,这些脉冲会通过特定路线进入对应的感光细胞,然后光和颜色信息被传输到大脑。

    在页面中,光和颜色的变化越多(视觉上复杂),就需要眼睛做更多工作以便将信息送入大脑。

    “…眼睛接收视觉信息,然后将这些信息编译成电子化的神经活动,正是这个过程完成了大脑中的“存储”和“编译”。这些信息可以被大脑的其他部分加以利用,关联其他脑部活动,比如记忆,洞察和注意力。”- Simplypsychology.org

    每一个元素都在传达微妙的信息

    设计一个网站时,你必须记住,每一个元素都至关重要——字体,标志和颜色选择——都转达着关于品牌的微妙信息。

    当这些设计元素都没做到位的时候,自以为是的设计师会为了弥补这种不足而添加随便找来的元素和图像,然而这增加了网站的视觉杂乱程度,还导致整体的美感下降。

    我们应该先考虑视觉信息的处理过程,再去优化一个页面——尤其是要简化信息从眼部传入大脑的这个过程 — 这就需要用尽可能少的元素表达足够多的信息.

    虽然这篇文章只是讲述他们品牌设计的个案,MailChimp标志再设计的反思.

    但我们能从中看到,当他们决定让自己的品牌成长时,他们并没有添加类似于“我们自从2001年步入电子邮件领域,已经获得了300万忠实用户,这就是为什么我们很酷,X&¥#@……”之类的信息。

    相反,他们让字体的书写很严密,去掉了网站顶部标题上一句简单的“让发送邮件更美好”——并且针对核心产品,添加了一个更为简洁的说明动画。

    虽然这只是其巨大放量策略的一部分,但结果还是令人震惊,自6月份新logo第一次启用,带来了超过100万的新用户增长。

    “临时记忆” & 转换率圣杯

    正是因为视觉信息更快捷的传输到了大脑,我们才能看到简洁所带来的成果。

    普林斯顿大学,心理学家George A Miller的一个著名的研究中指出,平均计算,一个成年人的大脑能在短期内存储5-9“堆”信息,称之为临时记忆.

    临时记忆是指,你大脑中的一部分,在一个短暂的过程中临时存储并处理这些信息。 正是临时记忆帮助你集中注意力,减少分心,最重要的是,引导你去做出决定。

    目前为止,我们所说的一切都是为了减少干扰以便让“临时记忆”能够顺畅的工作。

    一个“复杂程度低,原型化很高的网站“中,只有一些为数不多的内容需要临时记忆尝试去处理,比如品质保证,产品描述,价格或者出价这样的信息。当临时记忆可以专注在真正需要处理的问题上时,试错和解决问题的速度就会更快。

    小的偏离导致了天壤之别

    当你的网站不符合一个人的预期时——价格高于预期,配色和对齐都做得很糟糕,网站加载速度不够快,照片的像素不够高——临时记忆就会去处理这些信息而不是真正重要的事情。

    这是因为,临时记忆会唤醒永久记忆,并用我们已知的方法去完成任务。当永久记忆不能为处理信息提供足够的帮助时,整个过程被打断,临时记忆会取而代之继续完成任务。

    这就是为什么最至关重要的是,你必须要了解,对网站用户来说,所有内容的曝光等级如何 ——不仅局限于你同类别中的网站,对于所有的网页设计来说——你都需要这么做,如果你想通过好的设计来“黑掉”他们的临时记忆。

    他们读过的博客,经常购物的网站,他们的浏览器,年龄,性别和地理位置, 所有这些线索都会影响到他们对你的第一印象及熟悉程度。

    结论

    当用户不能依靠过往的经验去使用你的网站时,他们并不觉得这是一种创新。他们只是离开,同时还在想,为什么不把那些信息和按钮放在“应该在的位置”。如果你想卖点儿东西,这种做法可不是个最佳选择。

    加分项: 简洁的网站需要做的7件事儿

    1.研究你的用户还有他们最常用的网站。找一些上述网站设计调整方面的案例研究,还要了解这些设计是如何让他们在关键数据上取得进步的。

    2.用这些“有用的”零件为你自己的网站搭建一个大框架。

    3.当你做设计布局时,要遵从认知流畅性的相关规则。把所有内容放在用户习惯于看到的位置上。

    4.仅依靠你自己的配色,标志,字体去和用户交流,信息的呈现要清晰并且巧妙。不要添加随便找来的东西或者图片,除非这能传达给用户他们真正关心的信息。

    5.尽可能的保持简洁—— 用1张大图替代1堆小图,1个表格替代3个——尽力利用留白去设计。

    6.反复确认,必须确定你的网站符合大众对于价格,美感,加载速度的期望。

    7.记住 “原型” 并不意味着你网站的每一个部分都要符合条条框框的要求。

    别把你的网站看成像一片雪花一样独一无二的艺术品,你应该把它当做一切最好设计的大合集。

    你的用户会因此爱死你。

    相关文章

      网友评论

      • 27f113087320:以此,魅族锤子一加手机都模仿了:apple:的主页风格

      本文标题:以科学态度看,为什么“简单”的网站超级赞?

      本文链接:https://www.haomeiwen.com/subject/komvuttx.html