web-dev-qa-db-ja.com

テーブル行の多くのユーザーアクションを表示する最良の方法は?

現在、ユーザーが作成した各フォームの行を示すテーブルがあります。一部のユーザーの場合、これは1つまたは2つのアイテムのみになります。他の人にとっては、彼らは40-50を持っているでしょう。

すべてのフォームについて、フォームのステータスに基づいて利用可能な多くのアクションがあります。 「不完全」な場合は、編集、削除、読み取り専用ビューの表示、PDFバージョンなど)できます。ステータスが他の場合、「編集」と「削除」は非表示になりますが、新しいオプションが表示されます。

私たちは、現在の状態にあるいくつかの深刻なユーザビリティ/発見可能性の問題に気づきました。皆さんに改善の提案をしてほしいと思いました。

テーブルは次のようになります。 Table overview

ご覧のとおり、最も一般的なアクションは各行の右側に最大4つまで表示されます。ただし、ハイパーリンクされた名前にカーソルを合わせると、別のメニューがあります。

Row mouseover (Sharepointからこのアイデアを最初にコピーしました)

ユーザーがセルのbackgroundをクリックすると、ハイパーリンクではなく、次のメニューが表示されます。

Row menu

ご覧のとおり、右側の「オプション」列に表示する余地があったよりも多くのオプションがあります。


テーブルヘッダーには、同様にアクティブ化された別のメニューがあります。これをTable Menuと呼びます。これは、より適切な用語がないためです(より適切な用語を提案してください!)。いずれかの列ヘッダーの上にマウスカーソルを置くと、下向き矢印の付いた青いボタンが表示されます。

Table Header Button

このボタンをクリックすると、次のメニューが表示されます。

Table Menu

(もともとはボタン自体を使用していました。ヘッダー自体をクリックすると、それが使用されるためです)


前に述べたように、これらはひどい選択であることがわかりました。特に最初の例です。ユーザーは常に機能を発見できず、これらのボタンの存在を知らないサイトで4年の経験を持つベテランのベテランがいます。明らかにそれは変更する必要があります。

しかしながら:

  • 右側の列にダンプされたすべてのオプションのリストが答えではないと確信しています。 (実際、私たちは以前これを行っていましたが、多くの人がそれについて不満を言っていました)
  • テーブルは、ユーザーの画面の水平方向の幅全体を占めるため、テーブルの左/右にアイテムを配置しても機能しません
  • 多くのユーザーにとって、テーブルは長くなる可能性があるので、テーブルの上/下にものを置いても同様に機能しません。
  • また、小さな窮屈なリンクが悪く、「ホバリング」が不可能であるタブレットの使い勝手を向上させたいです

これらの経験のどちらか/両方を改善する方法についての提案はありますか?

ありがとう!

16
DOOManiac

次のように進めることができます。

  1. 特定の列の幅を小さくしてみてください。このようにしてスペースを確保します。
  2. コンテキストメニューを完全に右に移動し、すべてのアクションが1つのフードの下にくるようにします。
  3. あなたの行動を再考してください。 Prioritizeおよびgroupそれらを追加し、それに応じてレイアウトを修正します。

そして詳細:

について1.:たとえば、列の説明は、列内の最も長いWordの幅と同じである必要はありません。特定の幅を超えた場合、改行を導入できます。 この記事では、Webアプリケーションでのデータテーブルの設計に着想を得ています 。さらに、「Completed」列の省スペース表現が見つかるかもしれません。

2および3について:使用可能なアクションの数から、テーブルは非常にインタラクティブに使用されていると結論付けます。コンテキストはわかりませんが、ユーザーは通常、選択したレコードの転送、送信、編集などにある程度の時間を費やしていると思います。この場合は、おそらく展開可能な行が適切です(以下のリンクを参照)。

自問してみてください。最も重要で最も頻繁に使用されるアクションは何ですか?これらのアクションを最初に表示する必要があります(たとえば、「pronk添付ファイルの転送/送信」は、実際には「pdf」または「ノート」よりも頻繁に使用されます)。

あなたがここで得るかもしれないさらなるインスピレーション: XMatters.comの記事

インライン編集のアイデア: designingwebinterfaces.comの記事

拡張可能な行とアクションメニューのアイデア: jankoatwarpspeed.com

11
Anna Prenzel

[オプション]列にある4つの一般的なアクションについて:

4つ以上のアクションがある場合は、4番目のアクションを「その他...」に変更し、クリックすると、この行の完全なコンテキストメニューを表示できます。これは、ユーザーが見逃すのがはるかに困難です。

2つの異なる場所にコンテキストメニューを表示したくない場合は、Anna Prenzelの提案のように、コンテキストメニューを完全に右に移動する必要がある場合もあります。

4
talkol

部分的な提案-ユーザーが特定の行を選択したときに、その行をより高いものに拡張します。たとえば、高さの5倍にすると、そのアイテムの詳細が表示されます。

すると、利用可能なアクションを表示する余地が広がり、選択されていない行にアクションを表示する必要がなくなる場合もあります。

更新

これは視覚的なアフォーダンスを持たないいくつかの動作を導入しますが、ユーザーがすぐに習得するものです。

その外観から、このアプリケーションは経験豊富なユーザーが使用するものです。 Alan Cooper's の観点から-本 About Face 、asovereignいくつかの複雑さを犠牲にしてより多くのパワーを提供することは価値のあるアプリケーションです。

1
Bevan

行アクション(編集/チェック/ PDF /メモ)については、次のアプローチをお勧めします。

  1. 右クリックで(行の背景で)表示しているメニューは、私の目では素晴らしいです。私たちは努力に集中し、これがユーザーの行動であることを確認する必要があります。

  2. 最初のセルの背景を右クリックするだけでこのメニューを表示する代わりに、このメニューを行のany右クリックanywhereに表示します(すべてのセル、ハイパーリンクの前景)と背景)。このメニューは、ハイパーリンクを右クリックしたときに表示されるメニューよりも重要だと思います。そうでない場合は、それらを組み合わせます。

  3. テーブルから「オプション」列を削除します。最初はこれがアクセシビリティを低下させるように見えるかもしれませんが、ユーザーがまったく右クリックしようとせず、これらの4つのオプションがユーザーが実行できるすべてであると思うので、このコラムは実際には混乱していると思います。ユーザーがこの行でアクションを実行する方法を見つけられない場合、ユーザーはそれを右クリックして実験します。

これらは基本的なステップです。代替の並列フローで改善することに加えて、以下を考慮してください。

  1. 行を選択する機能を追加します。選択した行は、強調表示するか、境界線を明確な色(青など)で着色することでマークできます。 Excelが現在選択されているセルをマークする方法を検討してください。

  2. 行の1つ(1つのみ)は常に選択されている必要があります。デフォルトでは、最初の行を選択できます。ユーザーが別の行(任意の場所、任意のセル、前景、背景など)をクリックすると、この行が選択された行になります。行の選択を解除する唯一の方法は、別の行を選択することです。

  3. 現在選択されている行に関するアクションを含む「フォーム」と呼ばれるトップレベルのウィンドウメニュー(「ファイル編集ビューウィンドウヘルプ」はWindowsにあります)を追加します。一部の行を常に選択する必要があるため、このメニューは常にアクティブです。このメニューは、右クリックメニューと同じでなければなりません。

このデュアルメニューアプローチ(右クリック+トップレベル)は、Excelなどのスプレッドシートソフトウェアで使用されます。コピーと貼り付けのアクションにも使用されているので、ユーザーはこれに慣れているはずです。

1
talkol

@talkolは正解です。

詳細を追加します:open reportまたはそれが何でもします。
1列目のリンクにも「display:block;」を付けます。セル全体をクリック可能にするスタイル。背景をクリックして別の反応を得ることは、少なくとも混乱を招きます。

右側のリンクを見逃す可能性のある人にとっては、クリック可能なトリガーがまったく同じオプションメニューを表示し、Gmailの[その他の操作]ドロップダウンのように見えるか、レンチのように見え、テーブルの行の幅を取りません。

行の選択に注意する場合は、少なくともホバーされた行にわずかに異なる背景色を指定して、アクションが影響する要素がどれであるかをユーザーに確信させます。単純なホバーイベントの代わりにintentHoverを使用することを検討してください。このプラグインは、ホバーアクションを数ミリ秒遅延させるため、ユーザーは、高速の高輝度と低輝度の視覚的なノイズなしで、ポインターをテーブルの行の上に置くことができます。

0
Juan Lanus

興味深い議論。ここにいくつかの考えがあります:

グリッドオプション:-グリッドの右上にあるツール/レンチ/グリッドボタンを追加します。行固有の情報ではなく、グリッド自体に対するアクションを含める必要があります。 -Rt Clickヘッダー(現在は下向き矢印の付いた青いボタン)からExport to Excelなどのアイテムを削除し、この新しいメニューに配置します-フィルターの切り替えなどのオプションを含めます(これは、より明示的で簡単に切り替えられるアイテムであることを示唆していますが、おそらくデフォルトでグリッドのオプションをオンのままにし、オフにするオプションを提供します)

コンテキストメニュー(セル内でrtクリック)

  • すべてのセルにマウスオーバーしないことをお勧めします。これは、誰かがセルにカーソルを置いたままにしておくとノイズになります。学習曲線を支援する1つの方法は、ユーザーが一度またはこのグリッドにアクセスするたびに閉じることができるポップアップです。「行を右クリックしてレポートを編集できることをご存知でしたか?」などのヒントが表示されます。ヘルプへのリンクを提供します。

  • セクション/区切り線をメニューに追加し、同様のアクションでグループ化-これにより、消化が容易になります

  • [オプション]列を削除し、このコンテキストメニューの項目を表示します。追加
    オプションをチャンクするグリッドの上のボタン-たとえば、編集
    ボタン;レコードの編集[技術名以外を使用]など、この中の追加の編集オプションについては、分割ボタンを検討してください。その他のオプション追加/表示/開くボタン-これ
    グリッド内のオプションに関する視覚的なアフォーダンスをユーザーに提供します。

そしていくつかの質問に戻ります:これはツリーグリッドのように見えます。親レベルのアクションは子行に適用されますか?

とにかく現在利用できるオプションは、ステータスまたは「完了」列の情報に関連していますか?その場合、オプションがコンテキストメニューにどのように表示されるかを検討してください-無効?

これがお役に立てば幸いです。グリッドは非常に強力なオプションですが、そのためグリッドとの相互作用を明確にするのは難しい場合があります。

0
Leslie M