その場編集

一覧操作(Manipulator)“や”閲覧(Viewer)“など、出力表示状態のデータを、その場で一時的に編集モードにして変更できるようにする。
理由:基本は閲覧用の見た目でありながら、必要に応じてその場ですぐに編集作業が行えると操作効率がよいため。

図例
その場編集

効能

  • 同じデータオブジェクトに対して、閲覧モードのUIと編集モードのUIを別々に提示するのではなく、ひとつにできる。ユーザーは明示的にモードを切り替える必要がなく、今見えているデータをその場で直接編集できる。
  • 一覧操作の画面で、リストされた各項目の代表的な属性について、いちいち”編集(Editor)“画面を開かなくてもその場で変更できる。より詳細な変更を行う場合にのみ、編集画面を開けばよい。

用法

  • 一覧操作画面や閲覧画面において、通常は出力表示としておき、ユーザーがある値に対して特定のジェスチャ(クリック/ダブルクリック/選択状態でのクリック/など)を行うと、その箇所にテキストボックスを出現させて、入力を可能にする。
  • 入力可能状態になっている時は、フォーカスアウトや Enter キー押下によって、再び出力表示状態に戻す。
  • 一覧において、ある列だけをその場編集可能とするような場合、あるいは、複数の一覧のうちひとつの一覧だけがその場編集可能であるような場合、そのことが分かるよう、値表示部分に何らかの手がかりを与える。例えば、セルの色を変更したり、文字のスタイルを変更しておくなど。

注意書き

  • あるデータ表示箇所を編集可能状態に切り替えるためのジェスチャーは、慎重に検討する必要がある。以下は、ジェスチャの例と、採用する上での注意点。
    • クリック:一覧において、行の選択をしようとしてクリックしたのに突然そこにテキストボックスが出現してしまうということが考えられる。特に、ほとんどの列がその場編集可能であると、選択のためのクリックをする場所がなくなる。チェックボックスを行頭につけるなど、選択操作のための代替手法を用意する必要がある。”シングルクリック実行“が使えない。
    • ダブルクリック:”ダブルクリック実行“が使えなくなる。
    • 選択状態でのクリック:操作が少し難しい。ダブルクリックになってしまう恐れがある。ただし Windows や Mac のデスクトップで採用されているジェスチャ。
    • 選択状態での Enter キー押下:”右下メインボタン“などにデフォルトボタン(Enter キー押下で代行できるボタン)がある場合、使えない。デフォルトボタンは通常、ダブルクリック実行と同義とすることが多いため、選択状態での Enter キー押下はダブルクリックと同義であることが多い(Windows デスクトップ)。ただし Mac のデスクトップでは、ファイルに対するダブルクリックは「開く」を意味し、ファイル選択状態における Enter キー押下は名称のその場編集を意味する。ちなみに iTunes では、曲のリストにおいて、「ダブルクリック=再生」「選択状態での Enter =再生」「選択状態でのクリック=その場編集」となっている。
    • コンテクストメニューからの「変更」:あるオブジェクトを右クリックしてコンテクストメニューを出し、そこで「名称変更」といった項目を選ぶとその場で編集可能状態になる、という振る舞いは、他のジェスチャとのコンフリクトがなく安心だが、そのような操作方法があることに気づきにくいという問題がある。
    • マウスオーバーによる「編集ボタン」出現:あるオブジェクトにマウスオーバーすると、その場に小さな「編集ボタン」が出現し、それを押すことでその場編集が行えるようにする。これも、そういう操作ができるということが分かりにくい。しかしコンテクストメニューによる操作にくらべると、気づきやすい。とはいえ、マウスオーバーしただけであちこちに「編集ボタン」が出現するのだと、見た目に煩わしいかもしれない。