GUI設計:ヒューマンインタフェースの基礎知識3

ヒューマンインタフェースの基礎知識

更新日:2022年5月20日(初回投稿)
著者:東京農工大学 名誉教授 北原 義典

前回は、ヒューマンエラーの原因とその対策について解説しました。今回は、GUI(グラフィカル・ユーザ・インタフェース)を取り上げます。GUIは、アイコンや絵柄などを使用して視覚的に分かりやすく情報を表示し、主に指やマウスなどのポインティングデバイスで操作を行うユーザインタフェースで、現在ではパソコンをはじめ、スマートフォン、ATM、カーナビなどの多くの情報機器で主流となっています。このGUIの設計は、インタラクティブ性を左右するものであり、設計の中枢ともいえます。GUI設計のポイントを考えてみましょう。

1. GUIを設計する

使いやすい、あるいは使いたくなるGUIとは、どういうものでしょうか。皆さんが、スマートフォンなど情報機器を使う側に立てば、思い浮かぶものがあるでしょう。スムーズに動作する、マニュアルを見なくても操作できる、分かりやすい、見やすい、多少の操作ミスでもフリーズしないなど、さまざまなものがあります。これらを大別すると、GUI設計の基本的かつ重要な要件として、作業効率性、ユーザー受容性、頑健性・安全性の3つにまとめることができます(参考文献:北原義典、イラストで学ぶヒューマンインタフェース 改訂第2版、講談社、2019)。

・作業効率性

ユーザーが、その情報機器やアプリ(以下、システム)を通じて、あるタスク(作業)を遂行することが最重要目的であるので、GUIの設計に要求される最優先課題は、タスクを効率よく完遂することである。

・ユーザー受容性

GUIは、使い方を覚えやすい、ユーザー負荷が少ないなど、ユーザーに受け入れられやすいインタフェースになっていることが重要である。

・頑健性・安全性

ユーザーは、設計者が想定していない操作をすることがあり、その際には簡単にエラーを生じてはならない。また、ユーザーの操作ミスを事前に防ぐ工夫を施すことが重要である。さらに、ユーザーがエラーを起こしてしまった場合にも、早く回復し、安全を確保するように設計しなければならない。

GUI設計に当たって、設計者が意識しておくべきことは、第1回で説明したインタラクティブ性を持つUIの設計原則を意識した上で、ユーザーが頭の中にシステムのメンタルモデルを構築しやすいインタフェースにするということがあります。メンタルモデルとは、ユーザーが自身の頭の中に描くシステムの像のことをいいます。画面を見て、自分の知識をもとに、このスライダースイッチを右にずらすと音量が大きくなる、ここをクリックすれば戻るといったことが類推でき、実際に操作するとそのとおりに動作します。このような経験を重ねていくうちに、自身の中にシステムに対するメンタルモデルが構築されていきます。

システムが自分の類推と異なった動作をすると、ユーザーにはストレスがたまり、それが蓄積されるとなかなか使い方を習得できず、使用を諦めてしまうことすらあります。逆に、早く容易にメンタルモデルが構築されると、使いやすいシステムであるという認識がなされるようになります。これは、結果として作業効率性にもユーザー受容性にも関わってきます。このように、メンタルモデルが早く構築されるインタフェースは、GUI設計の基本といえます。今回は、上記の作業効率性とユーザー受容性について重点的に解説します。

2. ユーザーがタスクを効率よくこなせるために

GUIにおいては、効率よくタスクを完遂できる設計が第一に求められます。そのためには、図1のように、画面が自然な流れを促すデザインであること、説明不要で使えるデザインであること、一貫性をもたせること、視認性を高めることの4つがポイントになります。

図1:作業効率性にかかわる設計ポイント

図1:作業効率性にかかわる設計ポイント

1:自然な流れを促すデザイン

クリックや情報入力など、操作の順番順序を、人間の視線移動特性に合わせて上から下、左から右に向かうよう配置します(図2)。自然な流れでユーザーが作業を行うことができるような配慮です。ただし、他よりサイズが大きかったり色が付いていたり、動くものがあったりすると、ユーザーの視線は最初にそこに向くことに注意しましょう。

図2:自然な流れ

図2:自然な流れ

2:説明不要で使えるデザイン

ユーザーが、使い方を学ぶチュートリアルや操作マニュアルなどをなるべく使わず、見ただけで使い方が分かるようなデザインにします。そのためにメタファやナッジを活用したり、アイコンを取り入れたりします。ただし、アイコンには、ユーザーによって何を意味するかの認識が異なる多義性があるため、注意が必要です。

メタファは、身の周りの身近なものに例えたインタフェースのことであり、PC操作画面を机上に例えたデスクトップメタファ、ネット販売システムをショッピングモールに例えたモールメタファなどがよく知られています。ナッジは、ユーザーに対し無意識的な行動誘導を行う戦略のことで、男性用便器の的(まと)のオブジェ(利用者が的を当てる感覚で用を足すためトイレの汚れがかなり減り、結果的にトイレの清掃にかかるコストが大幅に削減された)や、駅のホームに描かれた足型や平行ラインが好例です(図3)。GUIにおいても、つい押してしまいたくなるボタン、ついつまみを滑らせたくなるスライダーなどが、ナッジといえます。

図3:ナッジの例

図3:ナッジの例

3:一貫性を持たせる

どの画面においても同じ種類の情報は同じ位置に配置するようにし、順序や形、サイズ、色などにも一貫性を持たせた表示を行います(表示の一貫性)。また、使用する用語とその意味、文字のフォントなどにも一貫性を持たせます。加えて、アイコンやマーク、記号とその意味にも一貫性を持たせる必要があります(用語とアイコンの一貫性)。さらに、どのウィジェット(インタフェース部品、例:ウィンドウやテキストボックス)をどう操作すればどう動作するという操作フローや、ウィジェットタイプによる操作性にも一貫性を持たせる(操作の一貫性)などがあります。このように、さまざまな要素に一貫性を持たせることで、ユーザーがシステムのメンタルモデルを構築しやすくなります。

4:視認性を高める

ものをまとまりをもって知覚しようとする人間の特性(ゲシュタルト)を利用して、まとまりをつけたり、はっきり見やすい文字のフォントを使ったりします。また、重要度の高い情報は左上方に、補助的な情報は下方にします。さらに、特に重要なメッセージは、目立つ色にしたり、点滅(ブリンク)させたりして、識別しやすくします。

視認性や識別性など、分かりやすさを高めるには、表示の工夫が必要です。例えば、以下によって、視認性を高めることができます(図4)。

図4:視認性を高める表示の設計原則

図4:視認性を高める表示の設計原則

1:地と図を明確に

私たちは、面積が大きく周囲に広がっている方を地、一定の形状を持ち地とは分離して見える面積の小さい方を図と認識する傾向にあります。一般に、輪郭線が閉じていて意味を持った図形に見えるものは、図として認識される可能性が高くなります。従って、背景の地は面積をできるだけ広くとり、単色で目立たない色にします。逆に、ウィジェットやメッセージといった図は、地に対して明確に分かるように、輪郭線を閉じたものとし、地に対し色や明度の差をつけるようにします。

2:並びをそろえる

配置するウィジェットの縦横を、他のウィジェットの縦横とそろえるようにします。また、大きさもできるだけそろえるようにします。このように、整列させることにより、ウィジェット集合の周りに心理的な輪郭線が知覚され、まとまり感、統一感が出ます。

3:まとまりを持たせる

ウィジェットなどをまとまりとして見せる、分離して見せるなどの必要があるときには、近いもの同士はまとまって見える(近接の要因)、閉じ合うもの同士はまとまって見える(閉合の要因)といった視覚的ゲシュタルト特性を利用して、まとまりを持たせるようにします。

4:表示量を少なく

私たちが瞬間的に、短期記憶に蓄えられる項目数は7つ前後であることを考慮し、覚えておかなくてはならない表示項目や、まとまりの数は数項目にとどめます。また、不要になった情報は表示しないようにします。

5:際立たせる

重要なメッセージを表示する場合には、背景の地に対して、色相や明度の差を大きくつけます。その他、浮き立たせる、動きをつける、点滅(ブリンク)させるなどして、際立たせるようにします。また、重要度の高い情報は左上方に、補助的な情報は下方に表示します。

3. ユーザーがシステムを受け入れやすくするために

続きは、保管用PDFに掲載中。ぜひ、下記よりダウンロードして、ご覧ください。