リストから複数の米国の州を選択する
複数のアイテムまたはすべてを選択できる米国の州のリストを表示する最良の方法を見つけようとしています。
要素を選択
この種のものに存在する明らかなUI要素は、項目の長いリストを表示できるフィールドであり、ユーザーは、キーの組み合わせを知っている場合、このリストから複数を選択できます（コントロールを保持し、クリックなど）
チェックボックスとリスト
別の解決策として、すべての州をリストに（アルファベット順に）出力し、名前の横にあるチェックボックスをオンにすることも考えていました。これはユーザーにとって少し直感的ですが、大量のスペースを占有します。
私のアイデアのいずれかがユーザーにとって正しいエクスペリエンスであるかどうか、またはより良いソリューションが存在するかどうかを疑問に思います。
どのデザインを選択する場合でも、現在選択されているアイテムを表示するコンテナを配置することを検討してください。これにより、ユーザーは以前に自分が選択したものを覚えておく必要がなくなりますスクロールしてすべての選択を再確認する必要がないようにします。この方法でも、アクションに最も関連性の高いデータがすべてとは別に表示されるため、インターフェイスがすっきりします。
ここにあなたのケースのいくつかのオプション：（ところで、私は選択したアイテムの右側に（x）記号を配置しますが、balsamiqではそれができませんでした）
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
古い学校のアプローチ：
より洗練された-使いにくい-アプローチ：すべてのWebサイトに適しているわけではありませんが、アイデアを他の補完として使用することもできます。選択された状態をプレビューとして表示します。（green = selected、borderInGreen（または他の色）= activeElement、色なし=未選択）
また、最後のロジャーの例は、多くの状況で非常に優れたアプローチであると考えています。
基本的に、これはタグを追加するようなものです。各状態は有効なタグです。ユーザーが入力すると、一連の有効な完了タグが表示されます。 1つを選択すると、リストに追加され、すぐにアクセスして再び削除できます。スタック交換でのタグの動作とよく似ています。
ユーザーが州を知らない場合（米国外など）、実際にはリストから選択する必要がありますが、正直に言うと50のオプションしかありません。overly過剰ではありません大きなリスト-すべてを選択または選択解除するオプション付き。
グーグル画像からの例：
このリストを永続的に表示する必要はなく、現在選択されている状態の数を示すことができます。たぶん最初の数個をリストし、リストを編集するオプションがあります。その時点で、ユーザーが完了するまでリストがスライドして開きます。