ユーザーインターフェイスの7原則

IDIA.JP > レポート > ユーザーインターフェイスの7原則
ユーザーインターフェイスの7原則

ロマーナ・ラオによると、ユーザーインターフェイスには7つの原則がある。これらの原則は画面での情報提示方法の基準になるとともに、テキスト量が増えて「読むインターフェース」になりがちなWebサイトを「見るインターフェース」へと回帰させることができる。

ユーザーインターフェイスの7原則

  • グラフィックを使う
  • 情報の持っている構造を使う
  • 焦点と脈絡を提示する
  • 変化をアニメーションでみせる
  • ホームポイントをつくる
  • 直接的なインタラクションができるようにする
  • スポット効果を用いる

グラフィックをみせる

写真やイラスト、アイコンなどのグラフィックは、文字よりも多くの情報を持たせることができる。また、同じ形であっても、色や明るさ、質感、形、大きさ、模様を変えることで保有する情報を変化させることができる。

cf.8種類の前注意的な要素スキューモーフィズム

アイコン
アイコンと内容を一致させることができれば、ユーザーインターフェースの完成度は高まる。
cf.Font Awwsome
ブログのアイキャッチ
多くのCMSで採用されているアイキャッチ画像は、各記事への誘導に高い効果がある。

情報の持っている構造を使う

線形構造、階層構造、マトリクッス構造など、情報が元々保有している情報構造を上手く取り入れる。

cf.7種類の情報構造

カレンダー、時間割
カレンダーや時間割はマトリクッス構造を維持して表示することが望ましい。マトリクッス構造を崩すと、利便性が大きく損なわれる。
サイトマップ
多くのWebサイトが物理的に、あるいは概念的に階層型の構造をとっている。大量の情報は、階層型の構造に納めるとわかりやすい。

焦点と脈絡を提示する

焦点は「現在意識の中心がある場所」、脈絡は「焦点の前後関係を説明し、意識の中心を変更する手がかり」の事を指す。焦点と脈絡をわかりやすく示すことができれば、ユーザーをスムーズに誘導できる。

cf.切り替えインターフェイスについての考察

地図
地図は出発地や目的地(焦点)がわからないと使い物にならない。また、オンライン地図はシームレスな読み込みができる(脈絡の明示)ことが望ましい。
パンくずリスト
Webサイトのパンくずリストは現在地を示すだけで無く、そのページがどの階層に収められているかも示す。
一覧ページ、詳細ページ
一覧ページで「少しの情報を沢山」、詳細ページで「沢山の情報を少し」提示することで、ユーザーの焦点と脈絡をコントロールする。

変化をアニメーションでみせる

情報の詳細度や組織化方法を変更するときは、アニメーションで変化を見せるとよい。

cf.ゲシュタルトの法則LATCH 情報を5つの基準で組織化する

    検索
    検索条件を追加、修正する毎に、得られる結果を視覚的に見せる。
    cf.HOME’S
    ページ内リンクのスクロール
    アンカーを使ったページ内リンクでは、移動に画面スクロールを伴うと良い。

ホームポイントをつくる

いつも表示されているホームポイント(一貫して同じ場所にある要素)を設ける。空間の普遍性は、「情報量」と「ナビゲーションの操作性」の双方向性を確立する。

ヘッダー、フッター
ヘッダーやフッターは、ユーザーにホームポイントを意識させる確実な方法のひとつである。
トップページ、サイトマップ
ヘッダーやフッターと同様、トップページやサイトマップもホームポイントとしての役割を期待される。
ブラウザの「戻る」「進む」「ホーム」ボタン
インターネット黎明期はブラウザがホームポイントへの誘導を補助してくれていた。現在はブラウザのミニマル化が進んでおり、得にスマホ用のブラウザでは表示面積を確保するために多くのボタンが省略されている。

直感的なインタラクションができるようにする

画面を構成する要素に直接触れたり、操作できるようにするなど、インタラクションのハードルを下げる。

タッチパネル
スマホやタブレットのようなタッチパネルでの操作は、ITリテラシーの高低にかかわらず直感的な操作を可能にした。
ドラッグ&ドロップ
タッチパネルでの操作ができないデバイスでも、デザインなどクリエイティブな要素が必要な作業には、より直感的な操作ができることが望ましい。

スポット効果を用いる

全体から徐々に絞り込んで目標に到達するような感覚を与える。これにより、自分がどこにいるのか、またどうすればそこに行けるのかを示すことができる。

ATM
対話式のインターフェースは、条件を絞り込みながら目的地に誘導することができる。
買い物かご
全商品から購入商品を特定、配送先情報や支払い方法を指定、購入ボタンを押すまでのすべての過程をうまく設計しなければ離脱率が高くなる。

参考

記事のデータ

文責IDIA.JP
公開日2014年10月21日
カテゴリー
タグ
関連する記事

記事を共有する

ひとつ古い記事: