iPhoneアプリの視線誘導デザインパターン

美しいものには型がある。
視線が自然に動くUIを採用したアプリは使っていて心地良いのです。
今回はiPhoneアプリの視線誘導デザインパターンをお届けします。

Z型

紙媒体発、まだWebがない頃から提唱されていた視線誘導のパターンです。まずはこの視線誘導デザインパターンを覚えましょう。

Origami

UIが話題のOrigamiはZ型。商品名→写真→値段→購入ボタンへとスムーズに視線誘導されます。

Flipboard

雑誌がモチーフのFlipboardも基本的にZ型配置。目を落としていく先は登録ボタンです。

tumblr

tumblrもZ型。本文を読んだ後にはリアクション（どれくらいのユーザに反応があったか）が目に入り、リブログやスキ！といったコンバージョンに結びつきます。

F型

紙媒体はZ型でしたが、Webの視線誘導に着目したのがUI研究の大家、Jakob Nielsen博士。博士の研究で近年明らかになったのが「F型」と呼ばれるパターンです。実例で見ていきましょう。

Twitter

Twitterは膨大なタイムラインから情報を取捨選択するF型の視線誘導です。
まずアイコンが目に入り、その後にTweetが目に入ります。一番目に入る（必ず見ている）のは左端だけで、右端の文章になるほど読み飛ばされる傾向にあります。

LINE NEWS

LINE NEWSなどのニュースアプリは代表的なF型UI。タイトルを斜め読みしていくユーザの目の動きはF型になります。
左端の画像、タイトルの数文字だけしか読んでいないことのほうがユーザは多いようです。


ここで重要なのは「E型」ではないということ。「F型」は突き詰めると「E型」になりそうな気がしてしまいがちですが、大抵の場合、ユーザは最後まで情報を見てくれません。

まとめ

視線誘導の「型」を知っておくとアプリデザインに活きることが多いはず。ユーザは目線をどう動かすのか、そして自分たちは何をコンバージョンとしているのか（ユーザにどういう行動を取ってもらいたいのか）、常に意識すべきでしょう。

UI研究には終わりがありません。ガジェットの登場、技術の進歩により視線誘導は変わっていきます。しかし人間の根本的な部分、物理的制約は変わりません。ぜひとも視線誘導を意識した無理のないアプリのデザインを心がけましょう。