UIデザインはデザインではなく統計だ!

UIデザインの基礎知識

まるでブームの様に、UIが着目されています。そして、多くの人がUIのノウハウを身に付けるために努力を重ねていると言って良いでしょう。
そんな中で、Pinterestなどを使ってUIの参考画像を閲覧したり、UIの秀逸サイトを「UIトレース」と言われる習作に取り組んだり、そのデザイン表現に興味が集中していますね。
しかし、どんなにデザイン表現を勉強したところで、UIの本質というのは「見た目の世界」だけには収まらないほど奥深いものがあります。
今回は、「そもそもUIってなんですか?」というところから、見た目だけに留まらない「UIのもっと本質的な部分」をご紹介しましょう!

インタフェースとは、ユーザーとコンピュータを繋ぐもの

まず、「UI」とは「ユーザーインタフェース」の略ですが、では、インタフェースってなんでしょうか?
普通に日常的にインタフェースってことばを使っていますが、あえて説明しろと言われても、なかなかひと言では説明しにくいですよね。

英語の辞書で調べてみると、「界面」や「接触面」「中間面」などと、意味不明な訳語が並んでいます。
はて、どういうこと???
UI(ユーザーインタフェース)なるものが、初めて世に認知されたのは1970年代まで遡りますが、たかだかまだ50年の若造です。
そして、ヒューマンインタフェースやマンマシンインタフェースと言われるインタフェースでくくられる前で考えると、電話交換機の時代まで遡って、それは18世紀のことになります。

いずれにせよ、コンピュータや機械に対して、

1. 人間がやりたいことを命令する
2. コンピュータや機械がその命令を受け入れたのか?を表示する
3. 実行可能なのか?実行中なのか?を逐次表示する
4. トラブルが発生中の場合は何も表示されなかったり、その状況を表示する

といったように、お互いの「意志」や「状態」を明確にするためのコミュニケーション手段として、インタフェースがあると考えるのが最もわかりやすいでしょう。
現在のコンピュータを例にして言えば、その命令はマウスキーボード、またはマイク(音声)を使用し、コンピュータ側は現在の状態をモニター(画面)や、ランプメーター、またはスピーカー(音)で返してきますね。
これが、テレビや電話、クルマであれば、リモコン、ダイヤル、ボタン、スイッチ、ハンドル、ペダル・・・という器具を使うというあんばいです。

時代は文字からグラフィックによるインタフェースへ

こうした進化の中で、いち早くコンピュータの小型化に取り組んでいたIBMに搭載されたOS(オペレーティングシステム)に採用されたのが、このことで莫大な資産を築き上げたマイクロソフト社のMS-DOSです。
このシステムでは、キーボードにより命令文を入力することでコンピュータを動かしますが、これをキャラクターユーザーインタフェース(CUI)と言います。
すべてコンピュータが理解できる用語を使用するので、熟練度が高くないとコンピュータを扱うことができませんでした。

これに対して、アップルがApple IIというコンピュータを発売した2年後のある日、Xerox社のパロアルト研究所をスティーブ・ジョブズが見学に訪問しました。
世界初のマウスを使い、グラフィカルな画面を操作するワームというマシンの性能に目を付けたスティーブ・ジョブズによって、初代Macintoshのインタフェースとして、世界で初めてマウスを使ったパーソナルコンピュータが誕生。
これによってまったく知識のない子どもでも直感的にコンピュータを操作できる環境が整いました。それが、グラフィカルユーザーインタフェース(GUI)です。
我々が、日常的に口にする「UI」というのは、まさにこの「GUI」を指しています。

UIデザインは、デザインであるようでデザインではない!

冒頭でもお話ししたとおり、普通にUIデザインといえば、ボタンの表現方法だとかフォームの作り方だとか、ローテーションバナーの動かし方だとか、ハンバーガーメニューの演出やメニューの格納方法だとか、他社のデザインを参考にされている方も多いことでしょう。
そして、「あ、この表現はおもしろいね!」「カッコイイからアレンジしよう」などと、アイデアやイマジネーションを膨らませていることでしょう。
しかし、ちょっと待ってください!
今、みなさんが見ているそのUIデザインは、表面的な「事象(結果)」であって、その機能に至るプロセスや要因、目的や手段など、目に見えていないことがたくさん隠れているということにお気づきですか?

まさに、その「目に見えていない部分」のさまざまな戦略や情報価値は、表面的なデザインだけでは確認することはできませんが、推測は可能なので、その点でその部分も含めて参考にすることは大いに重要なことなのでオススメします。
しかし、インタフェース設計における情報デザインに最も大切なことは、その見た目や派手さ、主観的な趣味・嗜好に沿うか沿わないかではありません。
大切なことは、使いやすいか?わかりやすいか?間違えにくいか?ストレスを感じないか?なのです。

人間が過去に実証してきた、膨大な量の「立証された統計データ」を参考にしない手はない!

●人間がどんな時に情報を見つけやすいのか?
●どんな状態だと情報を見落としやすいのか?
●どんな表現方法を使うと間違いが起きにくいのか?

これまで学問として研究されてきた、「認知心理学」「人間工学」「人間行動学」などの中に、WEBサイトにおける情報デザインに役立つ情報が多々あり、そういった過去に蓄積された統計情報を参考にすることで、無用なデザイン表現やムダな要素に惑わされたり、堂々巡りすることなく効率的で確実性の高いサイト内誘導導線を表現できると言えるでしょう。

そう考えれば「どんな表現方法が良いか?」の前に、どんな組み合わせが適切なのかという統計的知識を持っておくことが大切ではないかと、強くオススメする次第です!
その上で、

1. 既存のデザインの問題点や実現できていなかった課題を抽出し、
2. その改善策や改善方法を吟味した上で情報デザインを設計・構築し、
3. それを元にデザイン表現で包んで上げる

それが、本来のUIデザインなのではないでしょうか?

利用環境や利用条件を考慮すると、デザインは必然的に変わる!

一見すると、同じようなものでも実は、用途や目的によってまったく異なるデザインになることは日常の中にも大量にあふれています。

例えば、電話と電卓。同じ10キーを使うのに配列が違いますよね。
いっそのこと合わせてくれればミスタッチしないのにと、嘆きの声が聞こえてきそうですが、そもそも別々に進化してきた電話と電卓は、やはり配列が違うのには理由があります。

特に電卓は、カシオ計算機が卓上計算機の開発を果たしたころからこの配列なのですが、数字の「5」をホームポジションとして指を10キーの上に置いてキーを叩く際、「0」「1」「.」「=」「+」などは利用頻度が高いため、もっとも打ちやすい位置に配置することが理想であることから、下から数字が並べられています。
一方電話の場合は、もともと電話はダイヤル式からプッシュ式に進化した際に、TU-T(国際電気通信連合の中の電気通信標準化部門)の勧告によって決められたものですが、電話は「1」がもっとも短い回転で「0」がもっとも長い回転をするようにダイヤル式では作られていました。
また、人間は文字の固まりを見る際左上から見始める習性があることから、左上に「1」を配置し、「0」で終わるように下に向かって並べられています。

デザインは、常にその用途や目的、環境に基づいて基準が作られ、表層のデコレーションやコーディネートは二の次であるということがわかると思います。


ホーム UIデザインの極意 UIデザインの基礎知識 UIデザインはデザインではなく統計だ!

クライアントを説得できるデザイン理論が身に付く!
UI/UXデザイン講座のご予約はこちら

香西 睦

香西 睦

論理的で客観的なデザイン理論と、ユーザーの視点に立った情報デザインは、Webサイトの課題を見極め、わかりやすいインタフェースを実現!

同じテーマのおすすめ記事

人気コンテンツ

  1. 1

    非注意性盲目(ミスディレクション)

  2. 2

    短期記憶に関するミラーの法則(マジカルナンバー)

  3. 3

    意味記憶

  4. 4

    バーダー・マインホフ現象(頻度錯誤)

  5. 5

    画像優位性効果

最近の記事 おすすめ記事 特集記事
  1. フックモデル

  2. シャルパンティエ効果

  3. [11月4日]福岡DAY2セット|直感的で使いやすいUIデザインが作れる!

  4. [11月3日]福岡DAY1セット|直感的でわかりやすいUIデザインが作れる!

  5. 手続き記憶

  1. 近接の法則

  2. 類同の法則(類似性の法則)

  3. シグニファイア(知覚されたアフォーダンス)

  4. 画像優位性効果

  5. 選択的注意(カクテルパーティー効果)

  1. あらゆる人に直感的でなければいけない、エラー表示と使えないヘルプ

  2. わざわざ入力を面倒くさくしているドロップダウンリスト

  3. ユーザーの「知りたい度」によって変わる、「読み方」と「読む範囲」

  4. カッコいいだけなのはデザインとは言わない。

  5. UIデザインはデザインではなく統計だ!

香西 睦

香西 睦

「だから、そのデザインはダメなんだ。(エムディエヌコーポレーション刊) 」の著者。 論理的で客観的なデザイン理論とユーザー視点の構造設計・情報デザインを用いて、Webサイトの課題を見極め、Webサイトの性能をアップさせる利用者の目線に立ったわかりやすいインタフェースの設計で多くの企業様のお手伝いをしてきました!

TOP