神刀安全网

字体影响用户体验

(開場白:不知道大家有沒有感覺,就是當一件事情有了責任之後,總是會更認真去做。)

多年前,MIT的研究人員已經證實: 字体影响我们的感受–差的字体使人无意识的反感,好的字体是我们感受到高 兴。

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

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

通過一系列的對比測試,只是在改變字体的情況下,我的網站流量提高了38%。

在開始詳細描述我的測試前,先解釋下為什麼字体對用戶閱讀有如此大大影響。

字体影响讀者的情緒:

字体通過兩種方式影响我們的情緒。

一、認知偏見

首先,我們會自然而然賦予某些字体及字体形式一定的內涵。好比我們對身邊事物的看法經常受到認知偏差和生長文化的影响。eg:在美國,无衬线字体经常被用在政府書文上,而在英國,无衬线字体常常被用在小报上。

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

下面是我公司博客的兩張截圖,同一篇講述如何用wordpress建站的文章,但是用了兩種相差較大的字体。

可以注意到,由於使用不同字体,相同的內容傳遞著不同的信息。

the site`s normal fonts

字体影响用户体验

the 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字体後,我們的網站的平均跳失率從88.0%下降到80.9%,7.1%的優化。

每個頁面的平均訪問量從1.21上升到1.43,18.18%的優化,頁面的平均停留時間提高了10分鐘。

字体影响用户体验

所有的這些都有分組測試(也叫A/B測試)得出的,並不是我個人觀點。使用類似VWO或Optimizely這類分組測試工具,能夠檢測出哪種字体最適合妳的讀者,哪種方案更合適。

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » 字体影响用户体验

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
分享按钮