優れたユーザーインターフェースとは

わかりやすく使いやすいユーザーインターフェースには共通する特徴がある。「デザイニング・インターフェース パターンによる実践的インタラクションデザイン」から抜粋して編集、加筆。
インターフェースとは
「インターフェース(IF=Interface)」とは、英語で「中間面」や「境界面」、「共通領域」を意味する。ITではハードウェアやソフトウェア、ユーザーが相互に情報をやり取りする際に接点となる部分、またはその情報のやりとりを仲介する仕組みを指す。
様々なインターフェース
ユーザー(受信) | ハードウェア(受信) | ソフトウェア(受信) | |
---|---|---|---|
ユーザー(発信) | 会話、メールなど | キーボード、マウス、リモコンなど | CUI、GUIなど |
ハードウェア(発信) | メーター、着信音など | USB、HDMIなど | センサーなど |
ソフトウェア(発信) | アラートなど | プログラミング言語など | OS、APIなど |
- CUI
- キーボードを利用したコマンド入力による操作(キャラクターユーザーインターフェース)
- GUI
- アイコンなどグラフィックシンボルによる操作(グラフィカルユーザーインターフェース)
ユーザーインターフェースとは
インターフェースのうち、ユーザーがコンピュータを扱うために必要な操作方法や表示方法、仕組みを限定して「ユーザーインターフェース(UI=User Interface)」とよぶ。
優れたユーザーインターフェースの特徴
PC上で使用されているユーザーインターフェースで、わかりやすさ、使いやすさに優れているものには次の12の特徴を持っている。
ユーザーへの配慮
- 不安なく使うことができる(Safe Exploration)
- PCやブラウザの操作に不慣れなユーザーは自分の操作で何が起こるかがわからず、不安を覚える場合が多い。ユーザーに不要な不安感を与えないために、「戻る」や「取り消す」といった「なかったことにする機能」を実装することが望ましい。
- 入力内容の控えを残す(Prospective Memory)
- ECサイトであれば注文内容や支払金額、問い合わせフォームであれば問い合わせ内容や問い合わせた時間など、入力した情報の控えを確認できるようにする。ユーザーに確認メールを送るのも良いし、入力内容が参照できるユニークなURLを発行しても良い。
操作の補助
- 変更、中断、復帰ができる(Changes in Midstream)
- ユーザーが情報の入力を開始してから、完了するまでのどのタイミングでも、入力内容の変更や入力操作の中断、そして中断からの復帰ができることが望ましい。
- 同じ作業を繰り返させない(Streamlined Repetition)
- 例えば「注文者の住所」と「お届け先」が同じ場合に、それを簡単に複製できる手段を用意する。ユーザーの時間の浪費や手間を減らすことで、入力ミスや入力中の離脱を減らすことができる。「会員登録」の仕組みも同様の効果が期待できる。
- ひとつのデバイスですべての操作ができる(Keyboard Only)
- キーボード、もしくはマウスだけですべての操作を行いたいユーザーがいる可能性を考慮する。またスマートフォンやタブレット端末なども普及しているため、タッチパネルでの操作などにも対応するとより多くのユーザーが快適に使用できるようになる。
ユーザーの経験を尊重
- 使い方がすぐにわかる(Instant Gratification)
- インターフェースの使い方や、そのページヘの誘導がわかりやすいほうが良い。ユーザーの経験を考慮し、一般的な名称と誘導方法を用いるほうが良い。またユーザーが起こしたアクションに対しては、できる限り短時間でそのアクションに対する応答(例えばメールが送信できたかどうかを表示)をする必要がある。
- 一貫性がある(Habituation)
- 同じWebサイト内では操作やグラフィックに一貫性を持たせる必要がある。またすでに一般的なユーザーインターフェースが存在する項目では、それに準じるほうが好ましい。
- 要素の位置がもつ意味が期待通りである(Spatial Memory)
- たとえば情報入力は上から下に入力していくのが普通であるが、これを逆にするとユーザーは混乱する。同じように「送信」ボタンや「戻る」ボタンなど、フォームで用いられる一般的な要素の位置がユーザーの期待と一致していることが望ましい。
情報量の調整
- シンプルで必要十分である(Satisficing)
- ユーザーインターフェースは「必要十分」でなくてはいけない。これは「最善(=提示できる情報をすべて提示すること)」を意味するのではなく、あくまでも「必要十分」である必要がある。過剰な情報は逆にユーザーを混乱させる。
- 判断を先送りできる(Deferred Choices)
- ユーザーが入力すべき情報は、ユーザーの好きなタイミングで入力できることが望ましい。また入力必須項目を明示したり、重要な項目とそうでない項目との情報順位を区別するとわかりやすい。デフォルト値を設定することも判断の先送りに役立つ。
- 段階を経て入力できる(Incremental Construction)
- 「ショッピングカート」が商品の選択、名前や届け先の入力、配送方法の選択、支払方法の選択、と内容ごとに入力することができるように、やりとりすべき情報が多い場合は段階を経て入力できることが望ましい。一度に大量の情報を入力するのは疲れるが、分割することでユーザーに小さな達成感を与えることができる。
- 他のユーザーのアドバイスを見ることができる(Other People’s Advice)
- 入力例を提示したり、一般的なユーザーが選ぶ選択肢をデフォルトとして提示するとわかりやすい。
参考
記事のデータ
文責 | |
---|---|
公開日 | 2012年8月17日 |
カテゴリー | |
タグ | Web/情報を集める/意図した通りに伝える/技術と手法 |
関連する記事 |