web-dev-qa-db-ja.com

フォームにサブチェックボックスを表示しますか?

「マスター」チェックボックスがチェックされている場合にのみ適用されるチェックボックスのグループがあるフォームがあります。現時点では、チェックボックスがオンになっていない場合は、次のようになります。 enter image description here

ユーザーがテキストボックスをオンにすると、サブテキストボックスのグループがその下にスライドします。これは次のようになります。 enter image description here

しかし、これはすべてかなり不格好に感じます。言うまでもなく、それは非常に直感的に見えません。この問題を解決するために使用できるパターンの推奨事項はありますか?

10
rheotron

オプションを構成するにする必要があります。これにより、これらがメインオプションの子オプションであり、メインオプションが選択されている場合にのみチェックマークを付けることができます。さらに、私はお勧めします:

  • 子のオプションをユーザーから隠さない-メインのオプションを選択する前に、中身を確認する必要があります。表示するものがたくさんある場合は、それを非表示にする理由がありますが、この場合はそのような理由はないようです(おそらく、他に多くのオプションがある場合)。代わりに、子オプションが選択できないようになっていることを示します

  • オプションを列にグループ化-イベントとエラーの2つのグループがあります。垂直方向のグループ化は、ユーザーにとってより明確になります(上から下にスキャンするため)。この場合、これらの列にヘッダーを提供する必要はないと思います。

  • チェックボックスはラベルの左側にある必要があります-このようにして、列に配置された状態でテキストがテキストに近づいたり遠ざかったりしないようにします。

  • 送信ボタンの位置の切り替え-プロセスを終了するためのものは[構成を保存]なので、一番右の位置に配置する必要があります(ただし、私は古いものかもしれません)。

  • 同時にキャンセルは表示され、機能が低下している必要があります-ボタンではなくリンクに変更しました。

ここにあなたのための簡単なワイヤーフレームがあります(私が使用しているアプリはあまり変更を許可しないので、[x]ボックスや色などの詳細については申し訳ありません):

enter image description here

8
Dominik Oslizlo

チェックボックス付きの「テキストロギングを有効にする」のようなラベルを付けることは、UIの設計が最適とは言えないという事実に言及した人はいません。

すばやく簡単なチェックボックスは、システムの可視性を低下させ、アクション(有効)をラベルにロックするよう強制する制約のないコントロールの例です。

これにより、ユーザーは「チェックされていない '有効'が無効、チェックされている '有効'有効」と考えるようになり、ページのスキャン時にシステムの状態はすぐにはわかりません。

オン/オフ(または有効/無効)の切り替えなど、より制約のあるコントロールを使用すると、ラベル(現在は「テキストログ」のみ)からアクションを削除でき、一目でわかるシステムの可視性が向上します。

mockup

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

最適なUI/UXに関心があり、そのためのリソースがある場合は、チェックボックスをオフにして、トグルを使用する必要があります。

1
dennislees