Tortoise Shell

Webサービスの会社で働くデザイナーが、デザインやライフハックについてゆるく書き連ねるブログです。

快適なUIが保っている4つの秩序とは?

仕事でWebアプリケーションのUIに携わる中で、気づいたことがあります。

それは、快適なUIでは「4つの秩序が保たれている」ということです。

これは、わたし自身が普段の業務の中で実感したことや、本で読んだことなど、様々な体験から得た教訓です。

今回はその「4つの秩序」について考えたことをご紹介します。

配置の秩序

快適に使えるUIでは、レイアウトの秩序が保たれています。

そのため、使っていくうちに「こういう操作はこのあたりでできる」という感覚をすぐに学習することができます。

もしも、アプリの中でボタンの位置がバラバラだったらどうなるでしょう。

「あれ、保存ボタンってだいたい左上についてたのに、どこだ…?」と思われてしまいます。

配色の秩序

快適に使えるUIでは、配色の秩序が保たれています。

色の均衡と意味合いがきちんと設計されていることで、アプリケーションを素早く感覚的に操作できるようになります。

もしも、アプリの中で色のつけ方がバラバラだったらどうなるでしょう。

「あれ、この画面の削除ボタンだけ色が違うぞ…クリックして大丈夫なのかな…?」と思われてしまいます。

導線の秩序

快適に使えるUIでは、導線の秩序が保たれています。

画面遷移などに規則性を持たせることで、「だいたいどの画面でも、こういう流れで操作ができる」ということが伝わります。

もしも、画面遷移に規則性が無かったらどうなるでしょう。

「あれ、この画面だけ手順が違うな…なんだかめんどくさいぞ」と思われてしまいます。

挙動の秩序

快適に使えるUIでは、挙動の秩序が保たれています。

ユーザーの操作に対して自然なフィードバックを返してあげることで、「確かに操作できている」という安心感と自己帰属感を与え、集中して操作ができるようになります。

もしも、アプリ内でアニメーション効果がバラバラだったらどうなるでしょう。

「あれ、このボタンを押したら変な動きをしたぞ…大丈夫かな。ちゃんと実行されてるのかな?」と思われてしまいます。

まとめ

以上、「快適なUIが保っている4つの秩序」についてご紹介しました。

どうして秩序が保たれていると快適なUIになるのでしょうか。

それは、スーパーやコンビニでのレジの混雑具合を想像すると分かりやすいと思います。

きちんとした列ができるように足のマークのシールを床に貼っていたりして工夫しているお店では、客がどのように並んだらよいのか自然に分かるので、混乱することなくスムーズに会計が進んでいきます。

何の工夫も無いお店では、一直線に並んでから枝分かれしてレジに行くのか、それともレジごとに並ぶかなどといったルールが分からないので、客が混乱してしまいます。

秩序をもたらすことで、スムーズな行動ができるようになるのです。

おすすめ本

UIデザインの秩序を学ぶならコレ。

デザイニング・インターフェース 第2版 ―パターンによる実践的インタラクションデザイン

デザイニング・インターフェース 第2版 ―パターンによる実践的インタラクションデザイン

  • 作者: Jenifer Tidwell,ソシオメディア株式会社,浅野紀予
  • 出版社/メーカー: オライリージャパン
  • 発売日: 2011/12/24
  • メディア: 大型本
  • 購入: 5人 クリック: 65回
  • この商品を含むブログ (12件) を見る
 

おすすめ記事セレクション