web-dev-qa-db-ja.com

[ダウンロード]ボタンと[削除]ボタンのシーケンスはどのようにする必要がありますか?

テーブルの各行に2つのアイコンがあります:DeleteDownload

しかし、[ダウンロード]ボタンは[削除]ボタンの前にあるべきだと思います。ガイドラインに従ってシーケンスがどうあるべきか、そしてその背後にある考えを理解できるように私を助けてください。

以下は私が現在持っているもののスクリーンショットです:

enter image description here

12
OM The Eternity

これには厳密な規則はなく、すべての場合で異なりますが、ユーザーに実行してほしいタスク、またはユーザーが最も実行する可能性が高いタスクを行の右端に置くことをお勧めします。

「Reading Gravity」は、これが、行の左端にあるファイル名を読んだ後に読者の目がスキップする可能性が最も高い場所であることを示唆しています。

17
Andrew Martin

これらのアイコンを前に配置すると混乱が生じ、繰り返しが原因でユーザーが誤ったアクション(意図しない行をクリックする)を行う可能性があります。

垂直3ドットアプローチを使用して、アクションをドロップダウン内に配置することを考えてください。最後のオプションとして、破壊的なアクション(削除)を保持します。

enter image description here

31
DPS

間違いを防ぐために、それらを直接隣り合わせに配置しないことをお勧めします。ダウンロードと削除は2つの非常に異なるアクションであり、異なる頻度で発生します。リンクにファイル名を含めることで、より一般的なダウンロードのクリック領域を大きくします。

download icon left of the filename, both underlined as a link, delete button on the right end of the table row

21
Bergi

選択ベースでのみ削除を可能にする

各行にチェックボックスを追加し、[削除]ボタンを使用して上部にアクションバーを追加することをお勧めします。これにより、次のように選択ごとに削除が可能になります(変更のモックアップ)。

Mockup of the new design. Contains a table, each containing (in order left-to-right), a checkbox, file name, file type, a date and a download button. Above the table are the left-aligned Download and Delete buttons, marked in different colours for quick recognition.

CodePen.ioでこのモックアップを編集

長所、短所、その他の考慮事項

長所

  • 危険で元に戻すことのできない操作である削除は、誤ってトリガーすることが困難な場所に移動されました。
  • チェックボックスは、複数のファイルを一度に削除する方法を追加します。これは、リストが数十または数百のアイテムに増えた場合に役立つ機能です。ユーザーは、リストをクリーンアップするときに、削除をトリガーするために各ファイルを個別にクリックする必要がないことをきっと認めます。
  • チェックボックスは、削除の選択に限定する必要はありません。私の例では、アクションバーに[ダウンロード]ボタンがあります。選択したすべてのファイルがサーバー側のZipにパックされ、単一のダウンロードファイルとしてユーザーに送信される機能を実装できます(パワーユーザーはこれを特に高く評価します) )。ダウンロードだけが可能な操作ではありません。カテゴリ間でファイルを移動したり、無数の他のアクションを追加したりすることもできます。

短所

  • このパターンに慣れていない初心者ユーザーは、簡単に混乱する可能性があります。ラベルの代わりに(またはラベルと一緒に)アイコンを追加することで軽減できます(コードに表示する方法を理解できなかったため、モックアップにはアイコンがありません)。

その他の考慮事項

  • @DPSの回答のように、アクションバーに加えてドロップダウンメニューを追加することを検討できます。パワーユーザーに対応するには、各行の右クリックメニューとして表示することもできます。
  • 削除は、より意図的な行為になり、トリガーするためにユーザー側で追加の手順が必要になります。これは、目的に応じて有益な場合とそうでない場合があります。
  • これは単純なモックアップです。アイコンをテキストに置き換えたり、レイアウトや色を変更したりしてください。

注意:私はプロのUXエキスパートではないので、1、2粒の塩で答えてください。

11
Pabru

削除ボタンを他のコントロールからできるだけ離してください。

たとえば、多くのデスクトップシステムでは、ウィンドウコントロールとメニューはウィンドウの上部にあります。ウィンドウコントロールは通常、右側にあります。これは、ユーザーがカーソルをより右方向に保つことを意味する傾向があるため、最も一般的で安全なオプションは通常、右端にあり、多くの場合、下部にあります。

したがって、このようなシステムでは、おそらく左下隅に削除ボタンを配置します。これは最も邪魔にならない場所であり、ユーザーが到達するために最大距離を移動する必要があるため、誤ってクリックされる可能性が低くなります。

4
user

もしあなたがそれらを目に見えるようにしなければならないなら、おそらく、私はあなたに同意するでしょう。削除の前にダウンロードを配置します。おそらくユーザーの目が早くそれをキャッチし、私は間違いなく正の値を最初に置くからでしょう。要素を削除したい場合は、別の要素を探して適切な場所に進みます。

楕円ソリューションはよりスケーラブルで焦点が絞られていますが、ユースケースも確認する必要があります。ユーザーが複数の要素をダウンロードしたい場合は、大量のアクションがない限り、行ごとに2回クリックする必要があります。

3
Alessandro

これに対する「標準的な」アプローチが何であるかはわかりませんが、ここで示したものは、私にとって後ろ向きに見えます。通常、最も一般的なアクションは左側にあり、あまり一般的でないアクションは右側にあります(RTLレイアウトの逆)。したがって、削除する前にダウンロードする必要があります。同様に、「名前の変更」または「編集」オプションは、ダウンロードの前(アプリケーションがクラウドベースの使用を目的としている場合)またはダウンロードと削除の間にあります(アプリケーションがオフライン編集用に設計されていて、クラウドベースの編集機能が2番目の場合)。優先)。

ユーザーが誤って間違ったボタンをクリックしないように、削除オプションにも確認が付いていることを確認してください。この確認は、ユーザーが質問を読まずに[OK]ボタンを自動的にクリックしないように表示される、それほど危険ではないプロンプトと視覚的に異なることを確認してください。

1
Micheal Johnson