[译文]字体影响用户体验

多年前,麻省理工学院的研究人员已经证实字体影响我们的感受:差的字体使人无意识的反感,好的字体使我们感到高兴。

如果字体能够影响我们的情绪,那同样会影响用户体验。

几周前,我决定探究字体对用户体验的影响究竟有多大。

通过一系列的对比测试,仅仅在改变字体的情况下,我的网站流量提高了38%。

在开始详细讲述我的测试前,先解释下为什么字体对用户阅读有如此大的影响。

字体影响读者的情绪

字体通过两种方式影响我们的情绪。

认知偏见

首先,我们会自然而然的赋予某些字体及字体形式一定的内涵。好比我们对身边事物的看法经常受到认知偏差和生长文化的影响。例如,在美国,无衬线字体经常被用在政府书文上,而在英国,无衬线字体常被用在小报上。

用户感受到的信息经常会因为文章字体的变化而变化。

下面是我公司博客的两张截图,同一篇讲述如何用Wordpress建站的文章,但是用了两种相差较大的字体。

可以注意到,由于使用字体的不同,相同的内容传递着不同的信息。

The site`s normal fonts

[译文]字体影响用户体验

Comic Sans font

[译文]字体影响用户体验

第二张Comic Sans 字体看上去远没有第一张可信、专业。这不是字母的线条、间距或字母的其他特性造成的,而是Comic Sans字体联想到孩子气。

可读性

事实上,一些字体本身比其他字体更具可读性。如果阅读一段文字时,我们的眼睛和大脑负荷越重,那我们对字体的感觉就更糟糕。

衬线字体最早用在印刷上,因为衬线有利于眼睛更快速的区分字母。

电脑刚问世时,分辨率还很低,衬线字体又必须用矢量创建,而矢量在早期的低分辨率屏幕上无法很好的显示。这使得早期的设计师默认使用位图创建的无衬线字体。

在过去的几十年间,屏幕分辨率不断的发展。现在近距离也很难看见屏幕上的像素点,像Georgia这样的衬线字体也越来越流行。

字体测试

测试开始前,我最想知道:哪种字体最适合我的网站?

我在我的一篇文章上进行了3种字体的对比测试:Georgia、Arial、 Verdana。

我们通过文章的点击次数结合页面的跳失率和页面停留时间等行为来评估每种字体的表现。

以下是测试字体的文章片段,你可以预测下这3中字体的测试结果。

Georgia

[译文]字体影响用户体验

Arial

[译文]字体影响用户体验

Verdana

[译文]字体影响用户体验

我预测Georgia字体最适合我的网站,因为他可读性很强。Verdana最不适应我的网站。

和我预测的一样,Georgia确实最适合我的网站,但是Verdana字体不是最差的那个。使用Verdana字体时文章的点击量比使用Arial字体时多29.1%。

[译文]字体影响用户体验

同时,使用Georgia字体时,平均页面停留时间更长,这表明用户阅读文章的内容更多。这点已经通过热点图得到证实。

字号测试

在证实了Georgia最适合我们的网页后,我们同样想知道,几号的字体最适合用户阅读。

我觉得字号越大,也具有可读性。(好吧,我又预测错了)

首先我测试了14px、15px、 16px这组字号。

在网站上使用上述相同的方法测试,结果显示,14px的字体最适合阅读。

[译文]字体影响用户体验

PS:字号每加大一个 像素,行距也相应加高了一个像素。

这个结果让我很吃惊,我之前阅读过的相关研究告诉我,用户阅读文章时,更大的字体能够吸引用户的注意力。并且很多可读性很高的网站都使用了20px以上的字号。

为了二次确认我的测试结果,我测试了另一组字号:10px、14px、18px、21px。

结果再次证明,14px的字体最适合阅读。

这次试验让我知道,不论分组测试哪种试验,结果都会告诉你:对某些人奏效的事情未必对其他人奏效。对我们的博客使用的字体,或是发表的文章来说,14px的字体可能是个很好的选择。

字体优化的魅力

根据测试优化字体后,我们网站的用户体验有多大的提升?

自从我们整个网站使用14px的Georgia字体后,我们网站的平均跳失率(Bounce Rate)从88.0%下降到80.9%,7.1%的优化。

每个页面的平均访问量从1.21上升到1.43,18.18%的优化;页面的平均停留时间提高了10分钟。

[译文]字体影响用户体验

所有的这些都由分组测试(也叫A/B测试)得出的,并不是我个人观点。使用类似VWO或Optimizely这类分组测试工具,能够检测出哪种字体最适合你的读者,哪种方案更合适。

原文:http://sixrevisions.com/user-experience-ux/fonts-ux/

译者:Missoften

原创文章,作者:ioued,如若转载,请注明出处:https://www.iamue.com/8862/

(0)
iouedioued
上一篇 2015-08-27 12:37
下一篇 2015-08-27 12:44

相关推荐

  • 用户模型概念与建立方法

    Persona交互设计用户模型建立: 一、什么是用户模型? Persona([pə:'səunə]):(Persona是用户模型的的简称)是虚构出的一个用户用来代表一个用户群。一个persona可以比任何一个真实的个体都更有代表性。一个代表典…

    2015-06-12
  • 【原译】致终将逝去的“网页设计”

      高质量的模板,成熟的设计模式、自动化、人工智能及移动技术是目前我们已知的网页设计的结束标志。 网页设计(终将)死去是无关紧要的。 网页本身不再是互联网体验的中心,这也是为什么设计师需要继续下一项关…

    2015-06-29
  • 你见过最人性化的设计是什么?

    见识了这么多人性化的设计,可你见过人性化到让你鼻子一酸热泪盈眶的设计么!!? 日本的牛奶纸盒。 看上去没什么大不了的,我们这的也一样。 打开的地方,在开口处,为了防止顾客弄错而打开错误的一侧,标示着“开…

    2015-12-14
  • 别看用户的嘴,要看用户的腿。

    用户访谈回来的信息是不是有效的?我们陷入了深深的思考🤔。 作者:浮躁君,不会编段子的段子手 微信公众号:浮躁说(ID:xiaofuzao521) 题图 Photo by Kristina Flour on Unsplash 基于CC0 license 全文共 3126 字 …

    2019-04-08
  • 按照用户画像设计、销售产品,为啥还是错?

    作者:董枳君@商学院 根据不完整信息和固有经验确定的目标用户错位是谁的错? 从单纯的“服务战”升级到了考验运营能力的产品“销售战”,首先创业者要学的是如何找到目标用户,利用大数据圈定用户。这期《我是创始人》…

    2017-06-15
  • 为什么Less is More可以成为一句经典?

    在设计产品的时候要把所有的方向都想到去尝试,然后根据各种设计组合根据反馈进行取舍,加新的想法是容易的,决定留哪个不留那个是最痛苦的。

    2016-06-15
  • 大作为的省略号...

    每当我告诉身边的人省略号(…)是我见过的最为牛逼的字符时,绝大部分人都以为我疯了。 在你也这样认为我之前,请容我认真解释一番: 在过去的数十年间,用户界面设计师不断以多种方式使用省略号来向用户传达重要的…

    2016-10-28
  • 设计团队沉淀:做好 Style Guide (即设计规范)不容易

    说起 Style Guide (即设计规范),大部分人的第一反应就是 Material Design 和 iOS Human Interface Guidelines,我自己就是靠读这两份文档逐渐入门设计领域,国内外的设计师、开发者们自然也是对它们了然于胸。来…

    设计理论 2015-08-31
  • 从iOS 10设计指南变化看设计的新趋势

    改变:越来越像给设计师用的「设计指南」

    2016-09-07
  • 下一个转场,动画见

    好的动画转场能够提升用户体验,今天翻译的文章将说明动画与用户体验的关系,以一些精彩的动画转场案例。以下是译文: 在设计数字产品时,为用户提供无缝体验是广受欢迎的目标。 现代设备和软件已经实现了在屏幕上…

    2015-07-06