web-dev-qa-db-ja.com

オプションをきれいに表示/提示する

通知に関するいくつかのオプションがあるWindowsアプリケーションがあります。各タイプのメッセージは、ステータスバーとポップアップメッセージに対してオンとオフを切り替えることができます。これが今の様子です:

enter image description here

かなりひどいように見えますが、どのプレゼンテーションが最適かははっきりしません。

4
Randomblue

まず、チェックボックスの左側の列を右側のチェックボックスに近づけて、左側のスペースを空けて、ラベルをそれぞれ1行に収めます。次のように、括弧を取り除くこともできます。

enter image description here

4

いくつかのこと。

  • ラベルは中央に配置すべきではありません。目の動きと読みやすさのためにひどいです。
  • ここでは、フォームを長くする必要がある場合でも、html要素の保存よりもユーザーエクスペリエンスの容易さを優先します。
  • また、このフォームをナビゲートするために必要な目の動きはクレイジーです。上部にラベルが付いた2つの列があるため、ユーザーは常に列ヘッダーに戻って、変更しているオプションを思い出す必要があります。それは長い形式ではありません、なぜそれほど保守的ですか?
  • 私はコントラストを使用して、2次テキストをオプションであるヘルプテキストにすることができます。

このデザインはフォームを長くしますが、ユーザーとしては、特に長いフォームではない場合は特に気にしません。毎回ページ全体を再スキャンしなくても、上から下にすばやく移動できます。個々の要素は、私の焦点領域として分離できます。

A revised dialogue box

Eye movements for each dialogue

実際、小さなチェックボックスを実際にターゲットにする必要はないが、チェックボックス全体とクリック可能な領域としてのラベルをターゲットにする必要があることを知っているユーザーの場合、次のようになります。

Nearly linear eye movements

3
Adam Grant

ばかげているように聞こえるかもしれませんが、IMOは列と行を切り替えるの方がはるかに明確になります。

フォントサイズを小さくして、2行目のテキストに薄い灰色(かっこなし)*を使用するだけです。詳細が必要な場合は、初回のスキャンを妨げることなく簡単に見つけることができます。
Dialog BoxStatus Bar Messageの横に小さなアイコンを追加すると、UIリテラシーの知識が少なくなり、あなたは話している。

*私が知っている矛盾のようなもの

1
Knu