iPhoneアプリのUIデザインは重要です。
よいUIは使いやすくそれだけで好まれることもありますが、UIが悪ければ使ってすらもらえないこともあります。

使いやすいUIを作るにはセンスが問われるわけですが、センスとはあいまいなものです。
センスからあいまいさを取り除き、なぜそれが良いデザインなのか、どこがいいのかを追求すると、それは学問となります。
学問としてデザインを学ぶとセンスが必要なくなるだけでなく、ぶれることなくいつでもよいデザインを作ることができるようになります。

UIを学問ととらえたときにいくつか重要な事柄があるので、何回かに分けて紹介したいと思います。

ドナルド・A・ノーマンのよいデザインの4原則

ドナルド・A・ノーマンのよいデザインの4原則というのがあります。

  • 可視性
  • よい概念モデル
  • よい対応付け
  • フィードバック

この4つをわかっているだけでもかなり使いやすいUIデザインができるようになります。
今回はこれを簡単に紹介したいと思います。

可視性

UIデザインの一番の基礎は「見えること」です。
初めて開いたWebサイトで、何もないところをクリックするということはまずしません。
普通の文字を書いているところをクリックもあまりしません。
私たちがクリックするのは「文字の色が変わっていて下線が引いてある文字」や「四角や丸でかこまれていて、いかにも押せそうなボタン」です。

また、可視性というのは動作も含みます。
「文字の色が変わっていて下線が引いてある文字」はリンクで、クリックするという共通概念があります。
リンクをクリックではなくて、ダブルクリックしたりする人はめったにいないと思います。

つまり、可視性とは見ただけで、どこをどう操作したらよいのか・何が起きるのかがわかるということです。

iPhoneアプリでは、

  • 基本的にはタップ以外の動作を使わないこと
  • どこをタップしたらよいのか一見してわかること
  • タップ以外の動作を使うときは、その動作が使えることを何かしらであらわすこと
  • 操作時に何が起きるのかわかりやすい文章・画像を使うこと

というのが重要になります。

よい概念モデル

よい概念モデルとは、ユーザーの想像するシステムのイメージと実際のイメージが一致することです。
つまり、どのような仕組みで動いているのかがわかりやすいということです。

ユーザーが仕組みを推測できるというのはルールがきちんと決まっていないといけません。
例外があるのもだめです。ユーザーはそれが例外なのか、ルールの一部なのかわかりません。

ルールがきちんと決まっていると、そのルールを基に推測を立てることができます。
新しい場面に出くわしても、そのルールに基づいて結果を推測することができます。
結果を推測できるというのは「可視性」が上がることにつながります。

iPhoneの場合、ナビゲーションバーやタブバーなどをガイドラインに沿って使うことで、iPhone全体のよい概念モデルを取り込むことができます。

逆にガイドラインに沿わないアプリはそれだけで概念モデルが少なくなってしまいます。

つまり、

  • ガイドラインに沿ったアプリを作ること(iPhoneとしての概念モデルを崩さないこと)
  • ユーザーが推測しやすいルールを作ること

が重要です。

よい対応付け

たとえば、4つの動作をするのには4つのボタンがあるとわかりやすく、よい対応付けとなります。
しかし、これが2つのスイッチを組み合わせて動作をさせるようなことになると、ユーザーが混乱しやすく、よい対応付けとはいけなくなってしまいます。

これは、同じ動作で複数のパターンが生まれることが原因です。
1つの動作に1つのパターンならばよい対応付けといえると思います。

アプリでは、基本的に1つの動作につき1つのボタンにしておくのがよいかと思います。

フィードバック

フィードバックとは、何か動作をしたときにその結果がどうなったかわかることです。
これは結構一般的なので、理解している人も多いのではないでしょうか?

ボタンをタップしたときに青く光ったり、立体だったボタンがへこんだりするのがフィードバックです。
このフィードバックをきちんと行うことで、ユーザーは「ボタンが押された」というのをきちんと認識することができます。

もしフィードバックがなければ押されていないのかなと思い何度もボタンを押してしまいます。

画像での表示以外に、音でのフィードバックがあるときもあります。
音でのフィードバックは画面でのフィードバックより注意をひきやすいです。

iPhoneアプリとしては

  • 最低限、外見でわかるフィードバックを全部の動作につける
  • できればフィードバックとしてさらに音を付ける

がいいと思います。

今回のまとめ

  • 可視性
    • 基本的にはタップ以外の動作を使わないこと
    • どこをタップしたらよいのか一見してわかること
    • タップ以外の動作を使うときは、その動作が使えることを何かしらであらわすこと
    • 操作時に何が起きるのかわかりやすい文章・画像を使うこと
  • よい概念モデル
    • ガイドラインに沿ったアプリを作ること(iPhoneとしての概念モデルを崩さないこと)
    • ユーザーが推測しやすいルールを作ること
  • よい対応付け
    • 1つの動作につき1つのボタン
  • フィードバック
    • 最低限、外見でわかるフィードバックを全部の動作につける
    • できればフィードバックとしてさらに音を付ける

当たり前のこともいくつかありますが、その当たり前ができていないアプリも多かったりします。
いちど自分のアプリをチェックしてみるといいかもしれません。

 

One Response to センスのいらないUIデザイン(1) よいデザインの4原則

  1. [...] こちらも合わせてどうぞ! センスのいらないUIデザイン(1) よいデザインの4原則 – 2011年10月6日 [...]

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>