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

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

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

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

通过一系列的对比测试,仅仅在改变字体的情况下,我的网站流量提高了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

相关推荐

  • 体验的情感之谈

    来源:Johny Holland Magazin 当体验设计的范畴在不断延展的时候,也正是其面临着一种设计挑战的时候,即体验设计师希望给用户传递一种可独立于情境或频道、具有相关性(延续性)和一致性(稳定性)的设计。 如同在…

    交互设计 2015-10-20
  • 如何保持交互与视觉的协调性

    转自微信号: 作者:小云子  我是UE / woshiue 我不想贬低文字的重要性,但也不想忽视视觉。两者是同等重要的交互设计元素。文字就是交互,但那些视觉元素(比如图标、菜单、图像等)才是用户实际上操作的东西。虽然…

    2015-03-30
  • [译]被忽略的机会,电子书类产品仍有很大提升空间

    [alert_info] 原作者: Chiara Lino 英文原文: Unexploited design opportunities: Ebooks still suck for studying IAMUE作者: 黄韦  专栏:https://www.iamue.com/author/Wayne [/alert_info] 仅仅把纸质书转化…

    2016-02-25
  • 【干货】面向内部用户使用的系统,如何做好用户体验

    文:Hypo 需求管理部资深产品经理  微信号:点下万事成 用户体验是人们对于针对使用或期望使用的产品、系统或者服务的认知印象和回应。通俗来讲就是“这个东西好不好用,用起来方不方便”。下面就结合自己的一些工作…

    用户体验 2015-11-22
  • 嘘!手机能听出你声音里的情绪

    对我们大部分人来说,每天心情有点变化是很正常的。女人的一天常常是喜怒哀乐随机出现,当然一般也就自己调整过来了,不至于要死要活。但有一类人例外,躁郁症患者。 事业不顺、丢了工作、失恋等等,当生活的不幸降…

    2014-12-13
  • 怎样做一份让工程师泪流满面的标注

    在搬着小板凳坐工程师 buddy 旁边送果汁送零食的日子里,我受 Google Material Design 的启发,折腾出一套自认提高双方沟通效率的标注规则,心情挺好还为此做了模板,最下面有源文件的下载地址。 是的我曾经也很寄…

    图形用户界面 2015-08-11
  • 为什么Less is More可以成为一句经典?

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

    2016-06-15
  • 图解2015用户体验行业调查报告

    2015年7月19日,由国际体验设计协会(IXDC)主办的亚洲最具影响力体验设计盛宴“国际体验设计大会” 在北京•国家会议中心圆满闭幕。在17日的大会主题演讲上,IXDC副会长胡晓分享了《2015用户体验行业调查报告》,报告…

    2015-09-25
  • 下一个转场,动画见

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

    2015-07-06
  • 【译】尼尔森组织针对微信的专项研究

    总结: 用户研究发现中国人如此依赖于微信主要是因为: 1)其强大的整合能力笼络了一批便利实用的功能特性; 2)具有简洁统一的用户界面。尽管外界的炒作已经风生水起,微信仍在使用传统的图形用户界面进行交互,而…

    2016-09-01