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

    
2013/09/06
    

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


Z型

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

Origami


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

September 06 2013 at 0556AM


Flipboard


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

写真 2

tumblr

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

写真 1


F型

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

NewImage

横組みのWebサイトなどは基本的に「F」の字に視線が動きます。
画像出典:F-Shaped Pattern For Reading Web Content


Twitter

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

September 05 2013 at 0854PM

LINE NEWS


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

写真 3

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


まとめ

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

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

Find Job! Startupを購読する

職種から求人情報を探す
Webエンジニア・Webプログラマ |  Webデザイナー・HTMLコーダー |  グラフィックザイナー・クリエイター |  Webディレクター・Webプロデューサー |  スマートフォンエンジニア |  ネットワークエンジニア・サーバーエンジニア |  フロントエンドエンジニア
スキルから求人情報を探す
PHP |  Perl |  Ruby |  Python |  Java |  JavaScript |  C言語 |  C++ |  MySQL |  PostgreSQL |  iPhoneアプリ |  Androidアプリ
企業名から求人情報を探す
 |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |  A |  B |  C |  D |  E |  F |  G |  H |  I |  J |  K |  L |  M |  N |  O |  P |  Q |  R |  S |  T |  U |  V |  W |  X |  Y |  Z
Copyright (C) 2015 mixi recruitment, Inc. all rights reserved.