web-dev-qa-db-ja.com

このUI(Google翻訳)にラジオボタンではなくトグルボタンのセットがあるのはなぜですか?

これをGoogle翻訳で見たところ、Googleはこれらのセグメント化されたコントロール(またはトグルボタン)を使用して言語を一覧表示しました。 enter image description here

GoogleカレンダーやFaceboookタブなどの他の製品に存在するもの(ビューの変更をもたらす)とは異なり、これらは基本的に選択コントロールです。

enter image description here

enter image description here

これらの代わりにラジオボタンを使用する理由は何でしょうか。編集:多分それは私の部分でラジオボタンを置き換えることを前提としています。機能的には、チェックボックスや選択ドロップダウンメニューではなく、ラジオボタンによく似ていると思います。したがって問題。

2
Anusha

それは選択の問題だと思います。 トグルボタン ラベルはすでに入力されているため、UIの必要性は少なくなります。

トグルボタンを使用して、関連するオプションをグループ化できます。レイアウトと間隔を調整して、特定のトグルボタンがグループの一部であることを伝えます。

(...)

トグルボタンの要件:

  • グループに少なくとも3つのトグルボタンがある
  • ボタン、テキスト、アイコン、またはその両方にラベルを付ける

以下の組み合わせをお勧めします。

  • 複数および未選択
  • 排他的で未選択
  • 独占限定

この場合、排他的選択が使用されます。

enter image description here

5
Alvaro

他のユーザーがすでに回答している内容に加えて、これは応答性の高いカスタムツールバーであり、多数の言語から選択できることを考慮してください。 detects話している言語。コントロールは、ユーザーがこのインターフェイスを表示するときのサイズでレイアウトをめちゃくちゃにすることなく、長い言語名と短い言語名を可能にするのに十分な柔軟性が必要です。ここでは、UIをさらに1歩進んでさまざまな言語の選択を開始した場合の例を示します。小さな矢印の下にフライアウトメニューが開きます。マイクを使って「昨日は車を食べました」と言ったところ、英語が話されていることがわかりました。よくできました、Google。

Google Translate Screen Shot

カーブボールを投げましょう。マイクに向かって話すことでテストし、リトアニア語を検出しました。ツールバーで新しい言語を選択できることを動的に示す必要があります。それはひどいたくさんのラジオボタンのセットを求めています。それらを維持するのは難しいので、このシナリオでそれらを使用することは想像できません。 Lithuanian to Spanish

3
LindaCamillo

これは、次の背景を持つUI設計の適切な決定です。

  1. 水平方向のラジオボタンはスキャン/読み取りが困難です。そうしないと、オプションを明確に区別するためにスペースが必要になります。画像を比較します。
    enter image description hereenter image description here

  2. システムの状態をより適切に示します。水平レイアウトの場合、ボタンの表面全体は、小さな丸い目盛りに比べて、より良い方法で現在の選択を示します。色の違いがはるかに早くわかります。

  1. ラジオボタンのサイズが小さいと、操作が難しくなります。今日でも、一部の開発者は適切なラベルを使用してラジオボタンのサイズを大きくしていません。また、一部のユーザーは、小さな丸い目盛りだけを使用してラジオボタンをクリックします。したがって、 フィッツの法則 によると、選択コントロールのサイズが大きくなり、ユーザーにとっては非常に明確です。
3