web-dev-qa-db-ja.com

チェックボックスの使用はモバイルUIで推奨されていませんか?

Googleマテリアルデザイン( http://www.google.com/design/spec/patterns/selection.html )を参照してください。「チェックボックス(またはカスタムアナログ)を使用して選択を開始することは、モバイル向けの明示的なアンチパターン」。

4
Pratap Gadgil

マテリアルデザインは、モバイルのチェックボックスの使用を妨げません。

質問に投稿されたリンクは、アイテムを選択する方法としてチェックボックスの使用特定の使用を示しています(行全体、コントロールのグループ、またはテキストなど)。チェックボックスは、チェックボックスの機能を混乱させるため、この種の相互作用には適していません。理由はいくつかあります。

  1. あなたは「ある場所をクリックして別の場所で選択する」ことになるでしょう。

  2. モバイル/レスポンシブデザインでは、選択されている領域が継続的にレンダリングされることに依存できないため(たとえば、行が折り返される場合があります)、選択用のチェックボックスは混乱を招きます。

  3. チェックボックスの機能を、同じコントロールの他の標準的な用途(つまり、伝統的なチェックボックスコントロール)で拡張します。

チェックボックスの他のすべての「従来の」使用法は、モバイルではまったく問題ありません。実際、チェックボックスは、コンパクトで広く認識されているため、一部のモバイルインターフェースでは優れたコントロールになる場合があります。

実際問題として、チェックボックスは、ほとんどのブラウザーで最悪のネイティブHTMLコントロールとしてレンダリングされるため、チェックボックスを使用する場合、スタイル付きコントロールは多くの状況でより使いやすくなる可能性があります。

3
tohster

私は推測しかできませんが、このガイダンスの背後にある意図は、(単一または複数の)選択のために、Googleがすべてのテーブルの最初の列としてチェックボックスの偏在的な外観を排除したいということです。これはモバイル向けの明示的なアンチパターンである(デスクトップデザインではよく見られる)との声明に同意します。

前述のように、最初に複数選択が必要かどうかを検討します。そうでない場合は、チェックボックスをまったく使用せず、アイテムを直接選択および/または操作します。複数の選択が必要な場合は、ユーザーが選択したいことを示した後にのみチェックボックスを表示します(長押し、ドラッグなど)。ヘッダーバーに「チェックボックスを表示」ボタンが明示されているテーブルを見たこともあります。

ガイダンスでは、選択以外のコンテキストでチェックボックスを明示的に許可していることに注意してください(つまり、[...]などのコンテキストでのチェックボックスの使用は完全に適切です。)したがって、この一般性における質問の定式化はGoogleによってサポートされていませんまったく指導。

編集:私はチェックボックスを最初に表示しない理由は、それらがスペースを取り、デザインに視覚的な混乱を追加するためだと思います。したがって、複数選択(どのチェックボックスが必要か)がまれなユースケースである場合、設計者は、より頻繁なユースケースに合わせてデザインを無駄のない状態に保つことができます。たとえば、右上隅にゴミ箱があるアプリを最初に見ました。これを押すと、すべてのテーブル行にチェックボックスが表示されます(ラベルを縮小する必要があります)。

1
virtualnobi