親の切り替え可能なメニュー内の切り替え可能なオプションに最適なWebデザインパターンは何ですか
私はオンまたはオフに切り替えることができるメニューに取り組んでいます。メニュー内にサブオプションがあり、それ自体でオンまたはオフに切り替えることができます。論理的には、親メニューと子オプションの両方にトグルボタンがあるのは理にかなっていると思いますが、視覚的には少しわかりにくいように見えます。代わりに、子アイテムのチェックボックスを使用する別の方法を試しましたが、少しわかりやすくなっています。これらの2つのオプションよりも機能する/直感的に感じる代替のデザインパターンはありますか？
ここでは設計の優先順位が役立ちます。
ここでの優先事項は、ジョブに最適なコントロールを使用しましょうだと思います。
チェックボックス（ラベルなし）は、チェック/チェック解除状態の意味が明確なオン/オフ状態に適しています。ラベル付きトグルスイッチは、各状態の意味（「オン」と「オフ」）を示す機会を提供します。
「オン」と「オフ」のラベルがユーザーに役立つため、状況に最も適したコントロールはトグルスイッチだと思います。それを使いましょう。
これで、トグルの列がぎこちなく見えるかどうかというsecondaryの懸念があります。これは二次的な問題であるため、コントロールを完全に放棄せずに対処する必要があります。設計は非常に役立ちます。
- ワイヤフレームの問題の1つは、丸みを帯びたトグルが右側の上から下へとぎこちない視覚的なフローを作成することです。それで、それらを四角にして、よりスムーズなグリッドレイアウトを提供しましょう。
- 別の問題は、メニュートグルとヘッダートグルを区別することです。では、デザインを使用して違いをより明確にしましょう。
- 最後に、タッチインターフェイスに対応していない小さなトグルが嫌いです。だから、それらすべてをスーパーサイズにして、タッチフレンドリーにします。
より成功する可能性のある結果を以下に示します。
まず、トグルボタンにはやや問題があります。これらは最近のタッチスクリーンデバイスではかなり一般的なデザインパターンですが、クリックするだけでアクティブ化できるかどうかはすぐにはわかりません。この画面上の要素に不慣れであるが、実際の対応要素に精通しているユーザーは、現実の世界ではそのようなスイッチをクリックしないので、それを試してドラッグします。
https://ux.stackexchange.com/a/43889/332
https://ux.stackexchange.com/a/63886/332
また、UXに莫大な投資をしているGMailやAmazonなどのサイトを見ると、トグルスイッチではなくチェックボックスが表示されます。
チェックボックスはオン/オフを意味し（yesまたはno、またはマニアックな場合は1または0）、ユーザーに対してyesまたはno、オンまたはオフのタイプの選択肢を表すために文字通り何十億回も使用されています。
また、親と子に同じ要素（特にチェックボックス）を使用すると、親チェックボックスのパターンがすべてまたはまったくない別の非常に一般的なWebデザインパターンを模倣するため、問題が発生します。これは、あなたが質問で提起する美的問題を超えています。このパターンの例はWeb全体で数千にも及びます。
私がお勧めするのは、次のデザインです。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
オンとオフの選択が明確にクリック可能であり、ユーザーがチェックボックスを離れたときにチェックボックス自体が設定されたままになる場所。現在の状態は、どのボタンが選択されたかによって明確に定義されます
また、オフ状態では、パネル全体がグレー表示されるか、折りたたまれているか、その両方になります。これらのアクションの両方と、選択に応じたインターフェイス状態の切り替えは、アクションの強化に役立ちます。
PS ...私はあなたが親の状態に関係なくチェックボックスの設定状態を保持したいと思います、そうでなければ親は「トグル」機能であり、これは非常によく確立された一般的で使用可能なソリューションなのでチェックボックスを使います。