横か縦か、それが問題だ

2014/11/17 20:30~ 数字や項目を比較する場合、横に並べるより縦に並べたほうがいいのは何故なのでしょうか? なんとなく… で片付けるのは勿体無いので、ちょっと考えてみたのだよ。
0
プレゼンたん @presen_tan

さて。「数字や項目を比較する場合、横に並べるより縦に並べた方がいい」のは何故なの?という問いを受けたので、ツイートを作ってきました。

2014-11-17 20:30:24
プレゼンたん @presen_tan

まずは百聞は一見にしかず。気象観測のデータを提示するわ。まず、1/1のデータを、左から右へ追ってみましょう… 眼が疲れてきませんか?端まで読んでも情報が頭に残らないですし、序盤の数値と比較しようにも視線が迷子になるというか。 pic.twitter.com/StshxAJHo2

2014-11-17 20:31:53
拡大
プレゼンたん @presen_tan

次に、気圧の日ごとの変化を、上から下へ追ってみましょう。横向きに視線を動かすのに比べて疲れも少ないのではないでしょうか?序盤の数値と比較したくなっても、スムーズに視線を戻せるというか。

2014-11-17 20:32:11
プレゼンたん @presen_tan

この現象を説明するうえで、[A] 長い行(横向き)を目で追うのは苦痛である、[B] Zの法則、の2つを取り上げたいと思います。

2014-11-17 20:32:22
プレゼンたん @presen_tan

[A] 長い行(横向き)を目で追うのは苦痛である 横向きの情報は、長ければ長いほど見やすさが低下する(視線が迷子になりやすい)と言われています。視線を自由に動かせない=行の最初と最後の情報を対応させるのが難しくなるために、複数の値を比較する際、横に並べるのは不向きなのです。

2014-11-17 20:42:35
プレゼンたん @presen_tan

(身近なところでは、年賀状作成ソフトの住所録データなんかが思いつきますね。項目が多すぎて、自分が今読んでいる「住所」が誰のものなのか、対応しにくくなります。まぁ、あれは値同士を比較するものではないのですが…)

2014-11-17 20:42:45
プレゼンたん @presen_tan

ちなみに、横並びで値を比較する表を作りたいのであれば →「横一列でも目で追いやすい」デザインにすればいいのですね。例えば、横向きの罫線だけ入れるとか、薄い背景色をつけるとか、フォントカラーを変えるとか…。

2014-11-17 20:42:57
プレゼンたん @presen_tan

[B] Zの法則 別ツイートでも取り上げていますが、初見の資料を前にすると、人の視線は「Z」の軌跡を描いて全体像を把握すると言われています。資料上に配置された要素の、ざっくりとした位置関係を把握する上で、無意識のうちに取る視線の動きなんですね。

2014-11-17 20:57:03
プレゼンたん @presen_tan

似た概念である「Fの法則」は、全体の構成を理解した後に「じっくり情報を得るために視線を動かす」時に適応されます。事前に配布している場合を除けばスライドデータは「お初もの」ですので、適応すべきは「Zの法則」になるかと思います。 pic.twitter.com/i83HnhYxHm

2014-11-17 20:58:33
拡大
プレゼンたん @presen_tan

「Zの法則」を表に当てはめると、こんな感じになります。①をざざーっと読む→②をざざーっと読む→③を(ry のように表を見るということになりますね。初見であれば、①→②→③→④のように、縦同士を比較するように視線が動くのです。 pic.twitter.com/W5c6w7dqmp

2014-11-17 20:59:43
拡大
プレゼンたん @presen_tan

(ちなみに、ZとFの使い分けには諸説あるようです。ggって引っかかった代表的なものは、2つ目の図にまとめました)。どちらにしても「資料上部にプライオリティがある」とか「無意識の視線の大まかな方向は下向きである」と言えますね。

2014-11-17 21:00:02
プレゼンたん @presen_tan

こんなところかな~。割と経験則で言われているところなので、理論付けが難しいですね。

2014-11-17 21:00:30
プレゼンたん @presen_tan

(数あるフォントの中でも、Meiryo UIが一番のお気に入り… と作者が申しております)

2014-11-17 21:08:42
プレゼンたん @presen_tan

(Zの法則/Fの法則のツイートのファボ数が過去最高なのですが・・・やっぱり画像付きのツイートは人気なのですね)

2014-11-17 22:06:15