web-dev-qa-db-ja.com

多肢選択入力方式

モバイルアプリ用に設計しています

ユーザーが入力できるフォーム内に特定のフィールドがあります。

そのような1つのフィールドには複数の選択肢があり、ユーザーは複数を選択できます。この特定のケースでは、ユーザーはフォームに演奏する楽器を追加できます。また、選択可能なすべてのオプションを表示するための画面スペースも限られています。私の質問は:この種のデータ選択入力に推奨される相互作用パターンは何ですか?

例:ユーザーはギター、ピアノ、ベースを演奏します。これらの選択肢を直感的に選択するにはどうすればよいですか?これらは何百ものオプションの中から3つだけです。

次のようなチェックボックス付きのドロップダウンを検討しました。

enter image description here

ただし、モバイルには不格好すぎる。

任意の提案をいただければ幸いです。

1
RobbyReindeer

候補の選択肢が非常に多いため、デスクトップ上でも、表示される単純なドロップダウンは「不格好」になります。

この場合、特にモバイルでは、「現在選択されているアイテムを表示する」機能を「選択ピッカー」から少し分離して、新しいアイテムを追加する必要があると思います。おそらく良い出発点は、StackExchangeサイトが質問をするときにタグの選択をどのように処理するかです。

デスクトップでは、分離が少なくなります。タグは、新しいタグの名前の入力を開始できる同じボックスに蓄積されます。その時点で、選択可能な部分一致のパネルが表示されます(またはさらに入力して検索を絞り込みます)。携帯電話では、タイプタグの名前が現在のタグの表示から分離されている入力ボックス。

タイピングの代わりに(またはさらに)、ユーザーが「ドリル」に使用できる分類されたリスト(「木管」、「真鍮」など)を表示する「新規アイテム」ボタン/アイコンを作成できます。選択した楽器にダウン」。


SOによって実装されているように、ユーザーはタグを「閲覧」することはできません(ただし、入力を開始して、そのテキストを含むタグの選択範囲の「上位6」を表示することはできます)。ただし、必要に応じて、「タグウィンドウ」でより包括的な参照/検索機能を許可することもできます。より多く/すべての一致を表示し、ユーザーがそれらをスクロールできるようにします。

私の重要なポイントは、「従来の」ドロップダウンで「リストのブラウジング」を提供しようとする試みは失敗/不格好に運命づけられていることだと思います... SOのように、タグピッカー/ブラウザ/検索ボックスは、いくつかの種類:

  • SOのようなデスクトップでは、「ポップアップ」ウィンドウになる可能性があります。ポップアップの性質(特に、「ポップオフ」の容易さ)を考えると、はるかに複雑なものを追加した場合は、おそらくこのオプションを使用したくないでしょう。

  • デスクトップでより複雑な機能が必要な場合は、メインページの「タグセレクタ」の部分を作成できます(常にそこにあるか、必要に応じてポップアップ表示されます)。次に、たとえば、スクロールバーを追加して、すべての(一致する)タグを閲覧できるようにします。

  • 携帯電話で、現在のSO実装の提供よりも多くの情報が必要な場合は、スタンドアロンとして少なくともactsである「フルスクリーン」セレクターに切り替えることをお勧めします。ページ(一致するタグなどをスクロールできる可能性があります)これが別のページとして実装であるか、フルスクリーンポップアップであるかは、より専門的です。

したがって、SOが行うことはであり、数百以上のオプションからより良い選択方法を提供する方法です。しかし、その考えを拡張してより複雑にすることができます。必要に応じてセレクター。

2
TripeHound