デザイナーと一緒に学ぶ「可読性」の心理学

今、「インターフェースデザインの心理学」という本を読み進めているのですが面白いテーマにぶつかりました。

今日も今日とて殴り書きしていきます。

インターフェースデザインの心理学 第2版

画面上のものは紙に書かれたものより読みにくい

画面が光を発していますし、再描画(リフレッシュ)されています。紙に書かれた文章を読む場合は、像が静的で(リフレッシュがなく)、紙は光を発するのではなく反射しています。コンピュータ画面の像のリフレッシュと発光は目を疲れさせます。

なるほどなーと思いました。これ、自分の中でも論争が起こっているのですが、紙の本VS電子書籍問題。これずっと戦ってます。一時期は紙の本派だったのですが、上京して狭い部屋に引っ越してからは、紙の本は場所をとる、ということで電子書籍派になりました。

でも、やっぱり紙の方が読みやすい…!あと、紙の方が記憶の定着が良いらしいんですよね。紙の本だと書かれている場所として物理的に把握するので記憶しやすいんだとか。

紙の本派の私にとってはなるほどなーっていう内容でした。

黒背景より白背景の方が読みやすい

これもこの本で言及されていました。確かに白背景の方が読みやすい…。

研究でも、白背景に黒文字の方が読みやすいとする結果があります。

白背景に黒文字は最大のコントラストと最適な可読性をもたらす一方、黒背景に白文字は非常に高いコントラストを持つものの、白背景に黒文字よりも読みにくく眼精疲労が大きい。暗い背景に明るい色のテキストはすべて眼精疲労を引き起こすと明記されています。

Applying Color Theory to Digital Displays :: UXmattersWeb magazine about user experience matters, providing insights and inspiration for the user experience communityuxmatters.com

とはいえ、ダークモードの普及で黒背景で読む方も増えましたよね。これは好みの問題なのでしょうか。

コードはなぜ黒背景の方が読みやすいのか

これは白背景の方が読みやすい、という方もいると思うので、かなり個人的な感想です。

Nielsen Norman Groupも「研究結果は結論が出ていない」としています。

白背景の方が読みやすいと言われている反面、なぜコードは黒背景の方が読みやすいのか、と私は考えました。なぜだ。

色々思いながら出た答えは、黒背景の方がシンタックスハイライトが映えるからなんじゃないかなあと思います。これは完全に個人の意見ですが。

基本私はライトモードなのですが、エディターやGithubでコードを見るときはダークモードにしています。シンタックスハイライトが見やすいからです。

まとめ

紙か電子かで彷徨い続けている私ですが、やっぱり紙、ええやん!ってなりました。 モニターの背景色は白か黒かは基本白の方がいいということがわかりました。

あと大切なのは文字と背景には十分なコントラストを。これはデザインにおいて大事です。

エディターにおいては、研究結果は結論が出ていませんが、個人的には黒を推します。

読みやすさは、単に文字が見えるかどうかではなく、媒体、光、背景色、記憶の仕方、用途によって変わるものなんだなと思いました。