無効な状態を表に表示するにはどうすればよいですか？

Question

最初に問題を説明しましょう！

テーブルで構成されていないWebサービスのモックアップを作成しています。すべてのテーブルには、各行の終わりにアクションがあります。したがって、すべてのアクションセットは特定の行を参照します。アプリケーションの一部では、行がアクティブ状態または非アクティブ状態になる可能性があります。これらの状態をどのように表現し、どのように処理するのか疑問に思っています。

私が考えている3つのオプションを紹介しましょう。

特定の状況や状況で禁止されているアクションに合わせて実際に調整されたデザインを使用するのは少し怖いです。私が指摘しようとしている状態は、「無効」ではなく「非アクティブ」です。アクティブ行の場合と同様に、これらすべてのアクションを適用できます。この1つのアプローチは、スペースとデザインを検討する人に最適です。それでも、ユーザーは無効（非アクティブ）状態がアクティブになる可能性があると想定でき、アクティブにするためのアクションを実行する必要があるかどうか疑問に思うかもしれません。この場合、実際に何が良いですか。
私はアクティブと非アクティブの状態を表示するために特別な列を使用します。緑色の丸印が付いている行はアクティブ状態を示し、空のセルがある行は非アクティブ状態を示します。この方法では、ユーザーは列を介してテーブルを並べ替えることもできます（各例のテーブルは列を介して並べ替え可能です）が、水平方向のスペースが必要であり、アプリで十分ではありません。それでも、ユーザーは最後の列のアクションのセットを使用して状態を変更します。
実際に編集可能な特別な列。前の例と同様に、列はアクティブ状態と非アクティブ状態を示しています。違いは、この1つの例ではチェックボックスを使用しているため、状態変更を実行するために、最後に一連のアクションを実行する必要がないことです。これらのアクションは互いに隣接しており、最後のアクションセットまたは各行から状態を変更するには、あと1回クリックするだけで済むことを考えると、私はこのアプローチでいくらか改善したとは思いません。

あなたが何を考えているかが最善の解決策であり、他に解決策がある場合は、喜んで聞いています。

乾杯！

Deekshit-CUA · Answer

私は常に、ディスカッション/フィードバック/ディベートが常により良い（または最良の）オプションをもたらすことを信じ、信頼しています。そこで、これが洗練されたソリューションです。

バージョン1（最初のオプション）

私はいくつかのブレーンストーミングを行い、2つのオプションを考え出しました。アイデアは、特に小さな画面/モバイルの場合、ページの水平方向の領域と余分な列を節約することです。

例1：

左端の列の色（緑と赤）は状態を示します
右上隅の要素は、凡例およびフィルタリングとして機能します
[編集]をクリックして、各行の状態を変更します

例2：

一番左の列は状態を示し、列ヘッダーをクリックして並べ替えることができます。
チェックボックスを選択または選択解除して、各行の状態を変更します（ユーザーが編集を許可されている場合）。
（行）にカーソルを合わせると、[アクション]ボタンが表示されます。
右上隅の要素は、凡例を表示するために使用されます。ユーザーを教育できる場合は、無視して削除できます。
このデザインは、マウスオーバーでアクションボタンが表示されるため、モバイルデバイスでは機能しません。

行の複数の/ランダムな選択に基づいて、共通の/個別のアクションがあるかどうかは不明です。たとえば、削除、状態の変更などです。

Madalina Taina · Answer

私の意見では、これはもっと簡単なはずです：

チェックボックスをクリックすると、行が選択されます（これを参照してください DataTablesの例-チェックボックスの選択 ;
最後の列には、すべてのオプション（編集、無効化）があるドロップダウンを開く設定アイコンがあります。または、最後の2つの列はアクション（アクティブ化/無効化および編集）用に予約されていますが、混乱を招くためチェックボックスはありません。