インタラクションデザインパターン(3)
モーダル/モードレスなインタラクション

データ操作方法、自由な手順と不自由な手順の選び方


ソシオメディア 上野 学

2007/5/11

Webアプリ開発の初期段階の決め手となる、データ操作方法の選び方を説明。手順を自由にするのか、作業をあらかじめ決めてしまうべきのか?
 操作性についての基本コンセプト
- PR -

 前回の「アプリケーションロールデザイン、基礎の10パターン」では、アプリケーションの中で採用されるさまざまなGUIを、そのおおよその役割からパターン化してみました。アプリケーションにはそれぞれ目的があり、ターゲットユーザーや利用環境もその目的に応じて変化しますが、GUIで実現されるインタラクションをパターンとしてとらえておけば、それらの中から目的に合ったものを選び取って組み合わせることで、基本的な画面構成を決めることができます。

 ただし、基本的な画面構成を決めるうえで課題となるのは、どのような目的にどのようなインタラクションがマッチするのか、という点です。開発プロジェクトの初期段階では、システムのアーキテクチャとインタラクションの概要を擦り合わせるために、操作方法についてのコンセプトを決める必要があります。

 インタラクションのモード

 以前、「モードを減らす」という話題で書いたとおり、、ある操作の意味が状況によって変化するとき、モードが生まれていることになります。例えば、Enter キーをタイプするという操作は、文章作成中であれば「改行文字の挿入」という意味になりますし、ダイアログボックスにおいては「デフォルトボタンの押下」という意味になります。つまりそれぞれの状況では、「文章作成モード」「ダイアログモード」が発生しているといえます。

画面1:同じ操作でもモードによって意味が異なる

 文章作成においても、欧文タイプモードのときと和文タイプモードのときではまた違うモードにあるといえます。欧文タイプモードでは「A」のキーは「a」という文字の入力になりますが、和文タイプ(ローマ字)モードでは「あ」という文字の入力になります(さらにEnter キーによる確定操作も必要になります)。

 このように、コンピュータを使っているときには無数のモードが発生しています。道具が複雑化すると機能が増えます。それに応じてユーザーインタ―フェイス要素の数も増やさなければいけませんが、物理的にも認知的にも限度があるため、結果的に、ユーザーインターフェイス要素と機能は1対1で対応付けられなくなります。初期のプッシュホン電話機では「1」という数字ボタンは常に「1の発信」を意味していましたが、現代の携帯電話機では「1」という数字ボタンは操作状況によって何通りもの意味を持つようになっています。

 ユーザーインターフェイス要素と機能の対応が1対多になると、ユーザーにとっては使うのが難しくなります。ある結果を得るための手順が複雑になり、覚えられなくなるのと同時に、間違った操作をして意図しない結果を得てしまうことも多くなるのです。そのため、操作の分かりやすさを重視した場合、ユーザーインターフェイス要素と機能の対応を単純化して、できるだけモードを減らすことが有効です。

 ところが、コンピュータは、1つのハードウェア上でさまざまなソフトウェアを動かし、無数の用途に使うことができるという点が大きな特徴です。そのため、無理にコンピュータからモードを取り去ろうとすると、コンピュータの存在価値を低めてしまう恐れがあります。モードというものは、その用い方によって、良いものにも悪いものにもなるのです。

 今回は、操作方法の基本的なコンセプトを決める手掛かりとして、インタラクションの二大潮流である「モーダルインタラクション」と「モードレスインタラクション」の2つを比較します。

  1. モーダルインタラクション
  2. モードレスインタラクション

 

1/4

 INDEX
インタラクションデザインパターン(3) 
Page1
操作性についての基本コンセプト/インタラクションのモード
  Page2
1. モーダルインタラクション
・順序ベースの定型作業・目的への直進・タスク指向・動詞→名詞・オートメーション
  Page3
2. モードレスインタラクション
・空間的な非定形作業・経験の組み立て・オブジェクト指向・名詞→動詞・アクセラレーション
  Page4
モーダルかモードレスかの決め手

 関連記事

インタラクションデザインパターン バックナンバー


ユーザビリティのヒント

Webアプリケーションのユーザーインターフェイスデザインに役立つさまざまなヒント集。自動販売機でジュースを買うときの不要な動作から考える

最終更新 2006/10/20


HTML5 + UX フォーラム 新着記事
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)

注目のテーマ

HTML5+UX 記事ランキング

本日 月間
ソリューションFLASH