web-dev-qa-db-ja.com

行に編集/削除アクションを表示する最良の方法は何ですか?

多くのテーブル/レコードのリストを扱うWebアプリケーションを構築しています。現在、「AJAX編集インプレイス」機能を構築しているため、同じページでレコードを編集できます。編集ボタン/リンクをクリックすると、テーブルの行がフォームを下にスライドして、レコードを編集できるようになります。

私の質問は、あなたが取ることができるこれらの行動を表示するための最良の方法は何ですか?これはさまざまなアプリケーションでさまざまな方法で行われるのを見てきました。リンク、ボタン、行の上にカーソルを置いたときにのみ表示されるボタン、ボタンの上にカーソルを置くと「ツールチップ」が表示される「ドロップダウン矢印」を編集/削除します。アクションをリンクのリストとして。

これらを表示する最良の方法は何ですか。 (可能であれば)回答を裏付ける記事/研究へのリンクを提供してください。

12
Andrew

レコードのテーブル/リストが多数ある場合に最後に必要なことは、永続的なボタン、リンク、またはドロップダウン矢印からのノイズや乱雑さを増やすことで、データを読みにくくすることです。そのため、この例ではホバーアプローチを優先します。

カーソルをホバーに合わせて、視覚的なフィードバックを支援します。ジャンプしたように見えないように、編集されたテキストを関連するセルの内容に揃えます。変更せずにキャンセルするメカニズムを提供してください。

変更されたアイテムを強調表示して元に戻すことができるのは、Niceの追加機能です。

以下は、Pattenry.comの good resource です。多数のjQueryプラグインへのリンクがいくつかあります。

私は 7 Signals がBaseCampHQのその場編集のTo-Doリスト項目で素晴らしい仕事をしたと思います(下の画像にあるように To Doリストチュートリアル を参照) -申し訳ありませんが、実際のコンテンツをぼかす必要がありました...

enter image description here

7
Roger Attrill

同様に、私は「スライドオープン」アプローチを支持します。編集のために行を開くときに編集コントロールのみを表示すると、煩雑さが大幅に軽減されます。

次のような解決策を提案できますか?

enter image description here

行をクリックして「展開」すると、エントリがテキストボックスになります(理想的には既にフォーカスされており、「閉じた」レコードとは異なる色で表示されます)。

下にテキストコントロールを配置し、テキストボックスをフラッシュします。どうして?

  • それらは「アクションに近い」-ユーザーはテキストを編集するためにページを移動する必要はありません
  • ユーザーは既にこれを実行している多くのテキストコントローラー(例:TinyMCE)を目にします
  • ユーザーは上から下に読むため、最初にテキストボックスが表示され、次にコントロールが表示されます。これは、「編集対象>編集」の階層を表しています。
0