web-dev-qa-db-ja.com

「すべて選択」パターンを修正

UXの問題が発生し、「すべて選択」機能を実装する方法を決定できないマテリアルデザインベースのデスクトップアプリを開発しています。

状況:リスト付きの右側パネルがあります: right side panel

「リソース名/ブランチ」のチェックボックスをチェックすることで「すべて選択」するアクションがあります。

問題:このUIは実際にはユーザーフレンドリーではありません。アクション「すべて選択」を実装するためのより良いソリューションを考える必要があります。

質問:ヘッダー名を「すべて選択」に変更する必要がありますか?問題は解決しますか?または、このデザインをよりユーザーフレンドリーにする他の良い代替方法はありますか?

5

解決策は、左側のテーブルに列を追加して行ごとに選択し、列ヘッダーのチェックボックスをクリックして「すべて選択/なし」を許可することです。

以下は、Material-UIフレームワークのテーブルコンポーネントのデモです。 https://material-ui.com/demos/tables/#sorting-amp-selecting

このサンプルでは、​​左のチェックボックスだけでなく、行の任意の場所をクリックして選択することもできます。

さらに、「選択モード」に切り替わるテーブルヘッダーにより、現在の選択に対するコンテキストアクションを提示できます。

4
Ricovitch

リストのアイテムには、アイテムの階層の視覚的なキューがありません。これは、これを表示する方法の例です。

enter image description here

階層が明確になったら、名前を変更する必要はありません。

2
Franchesca

私には、最初の行が選択されているように見えます。最初の行がラベルであり、行ではないことに気づいたのは、他の回答者を読んで初めてでした。私thinkこれは、使用されている色によるものです。

これはマテリアルデザインガイドラインでも問題ですが、それほどではありません。

チェックボックスがラベルで曇っていないので、Gmailに見られるような古いパターンがより効果的であることをお勧めします。

この提案は、マテリアルデザインのガイドラインから少し離れて快適であるかどうかによって異なります。

enter image description here

1
CalRowston