ここからメインコンテンツ

ユーザビリティ・コラム

ここからメインコンテンツ

第2回 視認性(visibility):主に画面のデザインに着目

前回に引続きGUI(Graphical User Interface)デザイン・設計の中心要素である「時間」と「空間」について考えてみる。今回は「空間」について。ここで考える空間とは、実際に皆さんが日常使っている「操作画面」のことを指している。最近では駅の券売機やコピー機、銀行のATMなど広く普及して皆さん当たり前のように使っている。
「操作画面( = 空間)」はユーザーとコンピューターをつなぐものである。


ここで操作画面のデザイン・設計について考えてみる。基本は「人間と機械との橋渡し」である。その中には「人が操作する」「機械から人に情報を返す」という2つの側面がある。この2つの側面がうまく伝わらないとユーザーはその機械を使いこなすことができない。現在では様々なところに「操作画面」のある機械が設置されており、不特定多数のユーザーに簡単に操作できて分かりやすい操作画面のデザイン・設計が重要になってきている。


では、ユーザーが簡単に操作できて分かりやすい操作画面とはどんなものか? ごちゃごちゃしていない、機能をそのまま出していないなどが挙げられる。操作画面を構成する要素としては「画面内のレイアウト(マッピング)」「カラーの適切な利用」「文字の大きさ」「アフォーダンス(操作を誘う形)」などがある。これらのキーワードを把握し、それらの要素と想定されるユーザー特性を見極めてデザイン・設計することが第一歩になる。そこで、この4つのキーワードについて例を用いて考えてみたい。

(1)レイアウト

「レイアウト」とは操作に必要な全ての情報を整理してグループ化し、配置の仕方をルール化することである。グループ化することにより情報にまとまりとしての意味を持たせ理解しやすくすること。また、配置の仕方をルール化することにより画面間のデザインの一貫性が図られ、操作の流れをユーザーに伝えやすくすること。この2つがうまくユーザーに伝わるかどうかが操作画面の設計において肝心なことである。
---図-1.

図-1 組み合わせの例(パソコンからの列車予約システム)

図-1 同じ要素をレイアウトしただけでもいろいろなパターンが考えられる。
ユーザーの特性や製品の特徴・目的などを考慮してレイアウトすべきである。

(2)カラーの利用

カラーを利用する際には「色に意味を持たせる」ことを考える必要がある。一般的にいわれているのは「赤 = 終了・危険」「青 = 開始・安全」「黄色 = 注意」といわれている。これは信号機と同じイメージが使われている。また、色を使って情報のまとまりやボタンの意味などを効果的にユーザーに伝えることができる。

図-2

図-2


-図-2 終了が赤、スタートが青、ヘルプが黄といったカラーを応用している画面。またそれぞれの「○○コーナー」というボタンを押して各画面へ移動するとそのボタン色が画面に引き継がれるようになっている。

(3)アフォーダンス(操作を誘う形)

図 3 を見てwebショッピングをしている場面を思い描いてみる。購入するものを決定した後どちらのボタンが押したくなるか? 上のボタンは立体的に表現されていて押すことの操作を誘って(アフォードして)いる。下のボタンは周りのグラフィックにとけ込んでしまう恐れがある。

図-3 どちらのボタンが押したくなるか?

図-3 どちらのボタンが押したくなるか?

(4)文字の大きさ

文字も操作の画面デザイン・設計の重要な要素となる。重要な文は比較的大きな文字を使うことやユーザーの身体的な特性に合わせるなど配慮が必要である。
4つの要素について解説してきたが、これらはユーザーとコンピューターの間を取り持つ大切な要素である。
以下にガイドラインを記載する。画面設計の際の参考に使うとよいだろう。


デザイン・設計ガイドライン

  • (1)レイアウト:

    • 視覚的に操作部と表示部の違いをはっきりさせること。
  • (2)カラーの利用:

    • 意味的な内容の違いを示すために、適切にカラーを用いていること。
  • (3)アフォーダンス(操作を誘う形):

    • ボタンなどの持つ形状からどのように操作ができるのかをユーザーに対して操作を自然に誘導している(誘う=アフォードする)属性のこと。
  • (4)文字の大きさ:

    • 通常の視距離で画面内の情報を確認できること。