web-dev-qa-db-ja.com

ラジオボタンまたはドロップダウンの代わりのボタン

私たちの最近のプロジェクトでは、ラジオボタンやドロップダウンメニューと同じ問題を解決するが、代わりにボタンを使用するインターフェイスを作成する必要があります。

おおよそ次のようになります。

mockup

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム

これがドロップダウンとラジオボタンの使用に及ぼす影響と、なぜそれが良いか悪いか、あるいはどちらでもないのか、あなたはどう思いますか。味ではなく証拠や個人的な経験で答えを返してください。

27
nimrod

この種類のUI要素は存在し、異なる場合でも多くのアプリケーションで使用されます。

Facebookイベント

enter image description here

Googleカレンダー

enter image description here

うまく設計されていれば、通常のラジオボタンよりも affordant です。

enter image description here

問題は、このアフォーダンスのために「自動選択」されているように見えるため、例のように検証を行う必要がないということです。したがって、ラジオボタンとドロップダウンを使用するには検証が必要なため、ここではラジオボタンとドロップダウンの方が適していると言えます(または少なくともこの方法で機能することが期待されています)。

28
Gildas Frémont

1つのボタンでアクションを実行する必要があります。ラジオボタンとしては機能しません。ボタンをラジオボタンとして機能させる場合は、セグメント化されたボタンを使用を実行する必要があります。

enter image description here

モバイルUIとWeb UIの両方でこれについての前例が確立されているため、人々は自分が何をしているのかすでに理解している可能性があります。さらに、セグメント化されたボタンのデザインは、ボタンが互いに関連していることを示しています。これは、標準のボタンの場合とは異なります。

コントロールを予測できない方法で動作させないでください

24
JohnGB

ボタン、ラジオボタン、ドロップダウンのどこを使用するかは明確に区別されています。

ボタン-通常、情報の送信に使用されます。ユーザーに情報を送信せずにオプションを選択させたい場合は、ボタンを使用できます。

ラジオボタン-通常、選択するオプションがほとんどない場合にユーザーに選択を提供するために使用されます。 UI全体に応じて、2〜10の範囲内のものはほとんどないと見なすことができます。

ドロップダウン-値がかなり大きい場合にユーザーに選択を提供するために使用されます。

特定の状況では、ラジオボタンの代わりにドロップダウンを使用して、値の数を減らすことができます。

  • 値はそれほど重要ではなく、UIでの選択全体の特徴的な機能でもありません。
  • UIで多くのスペースを占有したくない、または占有したくない場合。
2
Parvez
  • ドロップダウンでは、複数のクリックと単一のクリックが必要です。1つをアクティブ化/選択するには複数のイベント(クリック)があり、ドロップダウンをアクティブ化するまで、それらは「すぐに」表示されません(オプション)。
  • ラジオボタンはグループです(1つがアクティブ)-新しいラジオグループがなければ複数選択はできません
  • ボタンには複数選択の機能があります(任意の数を選択するだけでなく、シングルクリック(ビジュアル、およびアクティブにする単一のイベントのみ))

モバイルデバイスを考えると、ボタンの方が優れている傾向があります。ボタンをタッチするか、ドロップダウンをクリックしてもう一度クリックするかです。指ではそれほど簡単ではありません。

1
  1. コマンドボタンは、それが保持するキャプションに従っていくつかのコマンドを実行するためのものです。このように、すべてのUIコンポーネントには独自の目的があります。

  2. UIコンポーネントは、実際に意図されているもの以外のさまざまな目的に使用できます。たとえば、あなたの場合と同様に、コマンドボタンを使用してユーザーからさまざまなオプションを受け入れることができます。さらに言えば、ラベルコンポーネントを使用して、キーをトラップすることでユーザーが入力したテキストをキャプチャすることもできます。しかし、これらすべてが単なるコーディングの増加につながります。

  3. UIコンポーネントとその目的はエンドユーザーの頭の中で確立されており、UIコンポーネントが実際に意図されている以外の目的で使用されているかどうかは直感的ではありません。

したがって、私の経験では、ラジオボタンまたはドロップダウンリストを使用するのが適切です。

0
rags

ボタンにトグルスイッチを組み込むことを検討しましたか?

Courtesy of Rickie Sherman via Dribbble

これがラジオ/メニューオプションよりも改善されるかどうかはわかりませんが、ユーザーが達成しようとしていることをユーザーが理解するのに役立つかもしれません。ただし、一度に使用できるオプションが1つだけの場合は、それでもすばらしいとは言えません。

0
plainclothes