web-dev-qa-db-ja.com

トグルスイッチの位置は正しいですか?

アクティブ化されたトグルの適切な位置についての議論があるだけです。

また、なぜ残ったのかいくつかの答えを探していますか?なんで?

テキストに近いため、アクティブにしたときに右側に表示するのが理にかなっていますが、正気の異なる回答を探しています:)

enter image description here

[更新]

これをわかりやすくするために、これは2つのバージョンのオン状態であり、オンとオフのバージョンではありません:)

8
IonutzB

あいまいさを避ける

コントロールは、ユーザーにクリック/スワイプの場所と結果を明確に伝える必要があります。

たとえば、次のiOSトグルを見てください。

iOS style toggle controls

並列では、ユーザーはどの設定がオンで、どの設定がオフであるかを簡単に判別できます。しかし、ユーザーがユーザーと対話するのを見ている場合(特に、すべてが同じ状態か1つしかない場合)は、設定を変更する方法を検討するために一時停止していることに気付くでしょう。

Appleは、使いやすさよりもスタイルを意識的に選択しています(Mac OSの非表示のスクロールバーのように)。一度習得すればコントロールは明白ですが、初心者は一時停止する必要があります。

選択を明確にする

「値」を直接コントロールに埋め込むと、明確さの名の下にスタイルを放棄します。これはiOSの例ほどセクシーではありませんが、ユーザーは何が期待されているかを一目で理解できます。

以下の例では、最も一般的な位置(右側のon)を逆にしましたが、混乱する人はいません。

また、一般的な「ポジティブ」カラーも使用しています。ユーザーをさらに混乱させる可能性のある方法で、慣習のある休憩時間に赤を使用する。

Toggles with embedded check and x icons

* UPDATE *コメント投稿者の観察に応えて、私は簡単なモックをもう一度見ました。これは状態を示すのにより良い仕事をすると思います。批評をありがとう!

私のもう1つの純粋な逸話的な発見:設定ラベルを左側に、コントロールを右側に配置します。これにより、ユーザーはコントロールの状態を気にする前にラベルをスキャンできます。

9
plainclothes

トグルは、アクティブ化されたときに右側にある必要があります。ほとんどすべてのON/OFFトグルがそのように機能し、ユーザーはおそらく同様のトグルを使用した経験があります。

ただし、状態がオフまたはオンの追加の標識を使用することを強くお勧めします。右のトグル位置は弱い標準であり、多くの人々はどの状態がオン/オフであるかわからないでしょう。これにより、認知負荷が高まり、エラーが増加します。

ON/OFFまたはYES/NOなどのラベルを使用します。オンの場合は明るい赤を、オフの場合は淡い灰色を使用します。

. enter image description here

ラジオボタンやチェックボックスなどのより標準的なコントロールの使用も検討する必要があります。

mockup

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

3
DesignerAnalyst

切り替えられたスイッチを示す「正しい」方向があるとは思わない

そうは言っても、最も重要な考慮事項は、solelyの方向に依存せずに、トグル状態と非トグル状態の両方の明確で明白なインジケーターを確保することです。

2
adriennetacke

右または左が正しいと確立されている明確に正しいパターンはありません。これについてはかなり混乱があり、この目的のために中立であると考えるのが最善だと思います。

背景と文化:

ある専門家が指摘しているように、人口の自明ではない割合が、左から右への決定にすでに苦労しています。

フィラデルフィアのドレクセル大学の外科教授であるジョンR.クラークは、人口の約15%がある程度の左/右の課題に直面していると推定しています。

http://www.washingtonpost.com/wp-dyn/content/article/2008/07/18/AR2008071802704.html

一部の文化では右から左に読むことも考慮してください。これは、ユーザーの知覚に一定レベルのバイアスをもたらす可能性があります。

UIの推奨事項:

状態を示すために他の視覚的な手がかりを含めることは、左/右の配置を考慮することよりもはるかに重要だと思います。

例えば:

  • 「X」を使用してチェックマークの反対を示すことができます
  • 緑や赤などの色を使用して、オンとオフを示すことができます。あるいは、ピンクを「オン」として使い続け、グレーを使って「オフ」を表すこともできます。どちらのシナリオでも、色覚異常を必ず考慮してください。
  • 対応するラベルのテキストの色を変更できます。 「オン」の場合は純粋な黒、「オフ」の場合は落ち着いた灰色
1
Ben Harrison

トグルを提供するにはさまざまな方法があり、状況によっては他の方法よりもうまく機能する場合があります。

IS左右の社会的/文化的な違いが認識され優先される方法がありますが、トグルの方向を心配するのではなく、さまざまな状態での状態、アイコン、それらの状態をより適切にラベル付けして識別する方法、視覚的にすべてを非常に明確にする方法など、他の要因について心配します

数年前に私が尋ねたこの非常によく似た質問を紹介します。これにはいくつかのバリエーションがあります。

トグルスイッチとフォームのデフォルトのベストプラクティス?

1
Mattynabib

まず、右側のボタン(最初の画像)は、ほとんどのWebサイトおよび推奨事項で受け入れられているオプションです。 Material Design Blog をご覧ください。

enter image description here

次に、ここに私のためのロジックがあります:「オフ」がデフォルトで値0/falseを持っていることは理にかなっています。 "On"はtrueなので、値は1です。軸では、0が左側にあり、次に値1が右側にあります。

0
Madalina Taina