web-dev-qa-db-ja.com

メインコンテンツからフォーカスを外さずにアクション(CRUDなど)ボタンを表示する方法

メインコンテンツからフォーカスを外さずに、アクション(CRUDなど)ボタンを表示する方法を探しています。優れたアプリケーション設計の例を見るのは素晴らしいことです(私は(おそらくモバイルサイトで後で)Webアプリをやっていますが、デスクトップ/モバイルアプリの例も良いでしょう)。

以下は1つの方法だと思います(かなり「標準」)

しかし、幅が狭い場合や、追加するボタンが多数ある場合(ラベルが長い場合もある)、ボタンを表示する方法をモバイルデバイス用に開発する必要があるかもしれません。

11
Jiew Meng

[選択]列などで個々のオブジェクトを選択する手段がある場合、[アクション]列のような個別のコマンドボタンは必要ありません。逆も同様です。どちらかのアプローチを選択してください。オブジェクト選択アクションのアプローチは、スペースが狭い場合や、コマンドが多い場合に適しています。各コマンドを1回だけリストする単一のサイドバーメニュー(Webアプリ)またはプルダウン/ポップアップメニュー(モバイル)を用意します。ユーザーは1つまたは複数のオブジェクトを選択してから、選択したオブジェクトに対して実行するアクションを選択します。各コマンドは1回しか表示されないため、アイコンよりも理解しやすい長いテキストラベルを使用できます。特に長いラベルを使用するコマンドを短縮することを検討してください。ツールチップを使用して、まだアプリケーションを学習しているユーザーに完全なコマンド名を提供します。

特にプルダウンメニューは、使用するのに比較的手間がかかるため、コンテキストメニュー(右クリック)を使用することもできます。ただし、コンテキストメニューは、特にユーザーが右クリックで標準のブラウザーコンテキストメニューしか表示されないと想定するWebアプリでは発見しにくいため、一般にバックアップのエキスパートショートカットと見なされます。したがって、それらはプルダウン/サイドバーメニューに加えて使用する必要があります。

また、ダブルクリックやドラッグアンドドロップなどのアクセラレータキーやジェスチャーを使用して、エキスパートショートカットを提供することもできます。残念ながら、モバイル用のCRUD機能には標準的なジェスチャーはありません。それらが必要です。 Webアプリの場合、InsertキーとDeleteキーは、Create関数とDelete関数のアクセラレータとして明白な選択肢です。ドリルダウン(つまり、プロパティまたは詳細)は、オブジェクトをダブルクリックするか、リンクとしてレンダリングされたオブジェクト識別子をシングルクリックすることによって実行できます。後者の方が簡単で発見しやすくなりますが、識別子のその場編集をサポートすることが問題になります。

はい、理想的には、インプレース編集を使用して更新機能をサポートします。適切なコントロールを使用して、表示されるすべてのフィールドの編集をサポートします。これにより、[編集]コマンドが不要になり、メニューが簡素化されるだけでなく、メインコンテンツに焦点が当てられ、ナビゲーション手順やページ全体が不要になるため、アプリ全体が簡素化されます。保存コマンドは、すべての変更(すべての削除と作成を含む)を保存できます。さらに、自動保存を使用して、さらに別のコマンドを削除し、データの損失を防ぐこともできます。

Retrieve関数は、メインのコンテンツからユーザーのフォーカスを奪う可能性がありますが、通常は別のクエリダイアログを使用して処理するのが最適です。これを最小限に抑えるには、基本的なクエリダイアログを小さくシンプルにして、実行されるすべてのクエリの80%を占める可能性が高い上位3〜5種類のクエリのみをサポートし、[詳細]または[詳細]ボタンを提供して、ダイアログをさらに詳細にします。一般的なアドホッククエリ用。また、メインのコンテンツページの上部に(たとえば、「検索」として)1つの基本的なクエリタイプのコントロール(オブジェクト識別子など)を常時表示することも意味があります。

5

提案:1つの「編集」ボタンを使用して、使用可能なコマンドを含むコンテキストメニューをポップアップします。

すべてのボタンを一覧表示することは、それらがほんの数個であっても、特にタッチ入力を備えたモバイルサイトを検討する場合に問題になる可能性があります。

バッチ操作:を検討する必要があります。つまり、ユーザーの範囲を選択してから、特定の操作(「削除」や「メンバーシップの更新」など)を適用します。数十のアイテム。これには、アイテムを選択するための大きなターゲットが必要です。


ニースの追加の可能性:
個々のセル(名前、アイコン、メンバーシップなど)をクリック/タップすると、特定の要素の編集フォームに直接ジャンプできます。
これは、選択が必要ない場合、または大きくて明白な選択ターゲットがまだ残っている場合にのみ意味があり、リストは編集用です。ユーザーが詳細を表示するためだけにアイテムをタップしたい場合は、編集モードに入らないようにします。

2
peterchen

これらのアクションの頻度が低い場合(企業アプリケーションでユーザーを変更または削除する場合など)は、それらのアクションをオブジェクトページ自体に移動するか、オブジェクトに専用ページがない場合は編集ページに移動することをお勧めします。

この例として、iPhoneメールのアカウント管理をご覧ください。アカウントリストからメールアカウントを削除することはできません。削除するにはアカウントを編集する必要があります。アカウント自体をクリックして編集を行います。

1
Vincent Robert

通常、これらのボタンは表示されませんが、ユーザーがエントリをクリックするとコンテキストメニューが表示されます。

0
ammoQ