サービスのUIをつくる際、見た目を優先して要素を適当に配置してしまうと、分かりにくいインタフェースになってしまいます。 情報の種類に応じてグルーピングしたり、重要度に応じて強調度を変えることが、よいUIのために重要となります。 これを論理的に行なう方法について解説します。
手順
次の4つの手順でUIを設計していきます。
- 要素を書き出す
- 重要度をつける
- 要素の種類に応じてグルーピングする
- 重要度に応じて強調させ、また同じグループの要素をまとめて配置する
2で重要度をつける際、本当に必要でない要素は削除します。 こうすることで、重要な情報をより明確にユーザに届けることができます。
ケーススタディ
UIを論理的に設計する例として、Twitterのツイートを表示するUIを考えてみます。
まず、表示する要素を書き出してみると、次のようになります。
- プロフィール画像
- 名前
- ユーザ名（@から始まる文字列）
- 本文
- 投稿日時
- リプライボタン
- リツイートボタン
- いいねボタン
- フォローボタン
これをグルーピングし、重要度を低〜高の3段階でつけると、次のようになります。
- 中：ユーザ情報
- プロフィール画像
- 名前
- ユーザ名
- 高：本文
- 低：投稿日時
- 低：アクションボタン
- リプライボタン
- リツイートボタン
- いいねボタン
- 中：フォローボタン
ツイートを表示するUIなので、なにより本文を強調し、次にその本文を誰が投稿したかといったユーザ情報を目立たせます。 アクションボタンはその行動をとろうとするときに場所さえ分かればよいので、そこまで強調する必要はありません。
……といった論理から、以下のようなUIができたと推察されます。
Twitterのツイートを表示するUIは、情報が適切に設計されており、とても分かりやすいです。こういうUI設計を参考に、いいUIをつくっていきたいですね。
— Simplie (@simpliejp) 2016年5月3日
おわりに
グルーピングや重要度による強調などを行なうと、メリハリがついて分かりやすいUIにすることができます。 UIを設計する際は、ぜひ参考にしてみてください。