css - 切り替えることができるアイテムをどのように表示しますか（UI）

Question

たとえば、 [ON] |など、ユーザーが切り替えることができる状態があるとします。[オフ]。

通常、私は1つのスイッチ（BUTTON）を使用し、電源がオンの場合、ユーザーには次のように表示されます。

ライトは[オン]です

それがオフのとき、彼らは見る

ライトは[オフ]です

私の質問は次のとおりです。 [ON]をクリックしてライトを[OFF]にするのは明らか（賢明）ですか？

どうしますか？どんな考えやアイデアもありがたいです。

score 2 · Accepted Answer

明確さが問題になる場合は、チェックボックスのようなコントロールの概念を必ず含めます。これは、ほとんどの人が理解している、広く受け入れられているインターフェイスコンポーネントです。

いずれにせよ、行全体をクリック可能にして、テキストをクリックするとトグルするようにすることができます (HTML ラベル要素のように)。

「ON」というテキストだけのボタンを表示すると、ライトをオンにするのか、それとも現在の状態が「オン」なのか、ユーザーを混乱させる可能性があります。

score 0 · Accepted Answer

ラジオボックスを使用できます。これはかなり標準的なコントロールであり、ほとんどの人を混乱させることはありません。

<input type="radio">Light on<br>
<input type="radio">Light off

もう1つのオプションは、iPhoneで使用されているような、ある種のスイッチボタンを実装してみることです。

4 に答える 4