私は、さまざまな日付での製品の価格を比較して、上昇または下降したかどうかを確認する機能を持つWebアプリケーションに取り組んでいます。基本的に、ユーザーは2つの日付を選択して検索をクリックします。現時点では、ラベルは最初の日付は「比較日」、2番目の日付は「キャプチャ日」であり、直感的とはほど遠いものです。
この場合、より良いラベルは何でしょうか?順序は重要ではないことに注意してください。つまり、date1> date2またはdate1 <date2
フォームの要素が不足していると思います。これら2つのフィールド全体の目的ではなく、個々のフィールドをそれぞれ説明しようとします。
これをアクセシビリティの観点から考えてください。誰かがスクリーンリーダーを使用してページの要素を読み上げているため、フィールドに関する視覚的な手掛かりが得られない場合、彼らは何を期待しますか?
したがって、私はフィールドにlegend
を導入して目的を紹介します。 Select dates to compare
、そしてその概念を導入した論理的にフィールドに名前を付けます。そう First date
およびSecond date
はおそらくそこでうまくいきます。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
<fieldset>
は便利です。フィールドをグループ化し、そのグループに、含まれているすべてのフィールドに関連するタイトルを付けます。
入力ボックスとそのラベルが存在するコンテナを「セクション」と呼びましょう。 UIへの変更は、ユーザーがフローのセクション全体を読むことができるほどエクスペリエンスが向上するという考えに基づいて変更します。それを容易にするために適切なラベルを配置することを検討してください。
_____と_____の価格を比較します。
または
価格が_____から____にどのように変化したかを確認します。
各入力ボックスに、「開始日」や「終了日」などのプレースホルダーテキストを表示できます。しかし、それはフローを少し妨げる可能性が高く、入力セクションのスペースも大きくなります。
どうですか:
_____と______で価格を比較します。
あなたは使うことができます:
Initial Date ../../....
Comparison Date ../../....
また
Start Date ../../....
Comparison Date ../../....
または
Base Date ../../....
Comparison Date ../../....
または...
Enter the two dates to compare prices on:
../../.... ../../....
[compare]
Result:
../../.... ../../....
$35 $37