直接的なインターフェースを作るポイント!ドラッグアンドドロップ、直接的な選択、コンテキスト連動型ツール

2494viewskmdsbngkmdsbng

このエントリーをはてなブックマークに追加
デザイニング・ウェブインターフェース ―リッチなウェブアプリケーションを実現する原則とパターン

1章 直接的なインターフェースを作ろう

* インライン編集を用いることで、編集ページに誘導することなく直接ユーザに編集させることができる。これは利便性を高くする。ただし、アフォーダンスに難があるので、アフォーダンスの提供、代替手段の提供などを用いることも検討するのが良い。
* セレクトボックスの代わりにメガドロップダウンを使えば、選択しやすいUIを提供できる。
* 表データの編集には、テーブル編集(ExcelのようなUI)が優れている。標準的なテーブル編集ソフト(Excelなど)のナビゲーションと動作を揃えてやると、ユーザは使いやすい。
* グループ編集モードは、アイテムを編集できるようになったことをユーザに知らせ、また、操作性もすぐれている。例は、iPhoneでアイコンを長押ししたときや、37SignalsのBasecampではリストを編集する時に、Editボタンを押すとグループ編集モードに入る。
* モジュール設定変更は、Editボタンを押すと、画面を切り替えることなくその場で設定変更する仕組み。(モジュールとはウィジットなど。)モジュールごとに編集リンクをつけると煩わしい場合は、グループ編集モードの採用を検討する。

2章 ドラッグアンドドロップ

* ドラッグアンドドロップは モジュール(ウィジットなど)、リスト(順番を持ったアイテムの並び)、オブジェクト(不定形の要素。ツリーなど)、アクション(地図のルート指定など)、コレクション(カート)のドラッグアンドドロップに分類される。直接的に操作できるので、簡潔なインタラクションを提供できる。
* ただし、アフォーダンス、例外発生時の処理など、考慮すべき点は多い。
* やってはいけないのは、向いてない処理にドラッグアンドドロップを使用すること。例えば映画の評価など。スペースを多くとってしまい、かつ分かりにくいUIができてしまう。
* 実装する際には注意点が多い。実装時にはこの章であげられた注意点を考慮すること。

3章 直接的な選択

アイテムを選択する方法の種類。

* トグル型選択: チェックボックスでリストやサムネイルのアイテムを選択する。選択したアイテムに対してアクションを実行できる。

メリットは、選ばれてるのが明示できる、複数選択時にマウス以外の操作が必要ない。

* コレクション型選択:選択して、アクションの対象となるアイテムを、もとのリストとは別のリストに表示する。欠点は、アクションの対象が元のリストのアイテムか、コレクションのアイテムかが理解しづらいところ。

* オブジェクト型選択:チェックボックスでなく、アイテム自体をクリックすると選択できる。複数選択時はctrl, shiftを使う。利点として、ドラッグもできる、選択が即ページを開くアクションに連動させることができる、直感的という点がある。欠点は、複数選択時にキーボード操作が必要、複数選択した時のドラッグドロップの動作をどう定義するのかややこしいことなど、直感的な面の裏返しとして複数の要素が混在してややこしくなってしまう。

* ハイブリッド型選択:トグル型の選択と、オブジェクト型選択の両方が選べる方式。トグル型で選択すれば、対象が明示でき、メッセージを直接操作できるオブジェクト型の利点も得られる。また、直接アイテムを読み込むことなく(表示しなくても)アイテムに対して操作ができ、削除操作に便利。

4章 コンテキスト連動型ツール

アクションをコンテンツの近くに表示する

! 常時表示型ツール
* 見つけやすいのがメリット
* 画面がうるさくなってしまうのがデメリット
* 目立たせたいものだけ常時表示型に

! ロールオーバー表示型ツール

! トグル表示型ツール

! サブメニュー

関連まとめ

本のまとめカテゴリー


コメントを書く