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

IDIA.JP > レポート > 切り替えインターフェイスについての考察
IDIA.JP

スマートフォンが普及し、スマホ用アプリも充実してきた。スマホ用アプリは開発スピードが早いためか、インターフェースについて十分な検証がなされていないものが多く見られる。同じ画面内で表示内容や状態を変化させる際に用いる「切り替えインターフェイス」について考察した。

切り替えインターフェースの使い所

切り替えインターフェースは次のような場面で用いられる。

  • Webサイトの表示コンテンツの切り替え
  • PCやスマホのIME(文字入力を補助するソフトウェア)の切り替え
  • PCやスマホの設定変更

タッチパネルで操作する可能性があるもの、画面が狭いもの、物理スイッチ以外のインターフェースに慣れないユーザーの使用が予想されるものについて十分な注意が必要である。

好ましくない切り替えインターフェース

切り替えできることがわからない
そもそも切り替えできることがわからない場合やわかりにくい場合
ボタンやスイッチが多すぎる
切り替え項目が多く、それぞれにボタンやスイッチを割り当てている場合
ボタンやスイッチの役割を記憶しなければいけない
ボタンやスイッチを操作するとどうなるかがわかりにくい場合
操作が複雑、難しい
ボタンやスイッチが小さいなどの理由で操作しにくい場合
インターフェイス

切り替えインターフェースの要件

上記を踏まえて、切り替えインターフェースが満たすべき要件は次のようなものである。

満たすことが必須の要件

切り替えられることがわかる
スイッチやボタンの操作で内容や状態が変化することが予測できる
現在の状態がわかる
現在どのような状態なのかが明らかである
一定の面積に収まる
画面や操作盤の範囲内に収めることができる

満たすことが望ましい要件

操作方法がシンプルである
タッチパネルだけ、リモコンだけ、というように制限された手段でも十分に操作できる
ショートカットキーで操作できる
頻繁に使用する切り替え機能を簡単な方法で呼び出せる

切り替えインターフェースいろいろ

ボタン押すたびに状態を切り替えることができる。ON、OFFだけを担うタイプと、押すたびに違う状態を遷移するタイプがある。テレビのリモコンの「電源ボタン」と、「入力切替ボタン」を想像するとわかりやすい。
スマホのIMEの切り替えなどで用いられている。
スイッチ2択の状態をひとつ切り替えることができる。並べれば複数の2択の状態を切り替えることができるようになる。壁埋込型の電灯スイッチを想像するとわかりやすい。
PCサイトとスマホサイトの切り替えなどでみられる。
タブ複数のコンテンツから一つを選び表示を切り替えることができる。付箋で見出しをつけた書籍を想像するとわかりやすい。
Webサイトのトップページなど、限られた範囲にたくさん表示したい場合などに用いられる。
スクロール縦長、あるいは横長のコンテンツを順に表示する。コンテンツが徐々に表示されるタイプと、一画面ごとに切り替わるタイプがある。
スマホでの画像表示などで用いられる。
セレクトボックス(プルダウン型)複数の状態から一つを選び切り替えることができる。
Webサイトのフォームなど。
対話型利用時に希望の状態を1つずつ順に確認する。
決定した内容を保持しながら、直線的に意思決定を積み重ねる。
Webサイトの表示言語切替やECサイトの買い物カゴシステム、ATMなどでみられる。

ボタンの特徴と注意点

何のボタンか明示する
そのボタンを押すとどうなるかをがわかるようにする。
ボタンのラベルとして現在の状態を表示する場合
スマホのIMEの切り替えなどでみられる。たとえば「日本語」「英数」を切り替えられる場合はボタンに「日本語」と表示するだけでは要件「切り替えられることがわかる」を満たすことができない。ボタンに切り替え候補をグレーアウトで表示したり、ツールチップなどで情報を補助すると良い。
ボタン以外の場所に現在の状態を表示する場合
PCのIMEの切り替えなどでみられる。ボタンのラベルは「〜の切り替え」でよいが、上記のインターフェースに習って現在の状態を表示してもよい。
複数のボタンを並べる場合
ボタンが押された状態と押されていない状態が明確になるようにデザインする。デザインの詰めが甘いと、認識が逆転してしまう可能性がある。また、表示に必要な面積が広くなるため、スクロールが必要だったり別ウインドウでの表示となる可能性もある。使用頻度の高いものを優先的に表示できるよう並べ替える。
cf.8種類の前注意的な要素
スイッチのほうが最適でないか検討する
たとえば「A」と「B」の状態を切り替えたいならば、スイッチの方がふさわしい場合もある。
ボタン

スイッチの特徴と注意点

切り替えられる内容を明示する
状態Aと状態Bが切り替えられる場合は、それをスイッチの左右に書き添える。
ボタンのほうが最適でないか検討する
たとえば「ON」「OFF」を切り替えるだけならば、ボタンの方がふさわしい場合もある。
スイッチが複数ある場合
表示に必要な面積が広くなるため、スクロールが必要だったり別ウインドウでの表示となる可能性もある。使用頻度の高いものを優先的に表示できるよう並べ替える。
スイッチ

タブの特徴と注意点

直感的である
ITが苦手なユーザーでも直感的に操作することができる。
気付かれないことがある
タブのデザインを工夫しなければ、ユーザーがタブの存在を見落とすこともある。デフォルトで表示されているタブの表示率は2枚目以降のタブに比べて圧倒的に高い。
タブの幅を揃える
タブの幅をラベルの文字数に合わせて増減すると、文字数が多いものの表示率が高くなる。タブの幅を揃え、タブの表示順などで表示率を調整する。
cf.Zの法則、Fの法則
タブの数を抑える
画面幅をはみ出すほどの数のタブは表示率を下げる原因となる。タブは多くとも7個前後に留める。
cf.チャンキングとマジックナンバー
タブ

スクロールの特徴と注意点

ユーザーが慣れている
これまでのWebサイト等の利用経験から、ユーザーはスクロールによるコンテンツの切り替えを予想できる。
横のスクロールがわかりにくい
縦方向に比べると、横方向のスクロールが十分に認知されているとはいえない。
スワイプ操作と連動できる
スマホやタブレットのスワイプ操作で直感的に操作できる。
スクロール

セレクトボックス(プルダウン型)の特徴と注意点

狭いエリアでも利用できる
たくさんの項目を1つ分のエリアに表示することができ、スマホなど画面の狭い端末での表示にも強い。
項目数が多いと一覧しづらい
項目数が多すぎるとセレクタ内でスクロールが必要となり、使いにくくなる。
セレクトボックスであることを見落としやすい
セレクトボックスを認識するにはある程度のIT利用経験が要求される。

対話型の特徴と注意点

わかりやすい
要求を順次尋ねるので、情報のやりとりに漏れがなく、わかりやすい。
再設定しにくい
一度決定した情報の修正には他のインターフェースの手助けが必要となる場合が多い。

まとめ

  • 切り替えインターフェイスは機器やアプリ、サービスの使い勝手を決める重要なポイントのひとつ
  • 「切り替えられること」と「現在の状態」が明らかであるかに注意が必要

記事のデータ

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

記事を共有する