web-dev-qa-db-ja.com

「日付1」や「日付2」よりも優れたラベル

私は、さまざまな日付での製品の価格を比較して、上昇または下降したかどうかを確認する機能を持つWebアプリケーションに取り組んでいます。基本的に、ユーザーは2つの日付を選択して検索をクリックします。現時点では、ラベルは最初の日付は「比較日」、2番目の日付は「キャプチャ日」であり、直感的とはほど遠いものです。

この場合、より良いラベルは何でしょうか?順序は重要ではないことに注意してください。つまり、date1> date2またはdate1 <date2

コンテキストのスクリーンショット enter image description here

13

フォームの要素が不足していると思います。これら2つのフィールド全体の目的ではなく、個々のフィールドをそれぞれ説明しようとします。

これをアクセシビリティの観点から考えてください。誰かがスクリーンリーダーを使用してページの要素を読み上げているため、フィールドに関する視覚的な手掛かりが得られない場合、彼らは何を期待しますか?

したがって、私はフィールドにlegendを導入して目的を紹介します。 Select dates to compare、そしてその概念を導入した論理的にフィールドに名前を付けます。そう First dateおよびSecond dateはおそらくそこでうまくいきます。

mockup

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

<fieldset>は便利です。フィールドをグループ化し、そのグループに、含まれているすべてのフィールドに関連するタイトルを付けます。

18
JonW

それで、ユーザーは製品の価格履歴に興味がありますか?そして、あなたのウェブサイトのこの部分では、その商品の価格が最初の日付と2番目の日付の間にどれだけ変化したかを彼らに見ることができますか?

2つの日付を選択するためにどのような基準を使用しますか?それをワークフローに結び付ける方法を見つけることができるかどうかを確認してください。

別の方法として、これはあなたの質問に直接答えません:価格履歴のグラフを表示し、ユーザーがグラフ上の任意の2つのポイントを選択できるようにすると、価格差が表示されますか?

例えば:

Mockup of graph with comparison annotations

27
TScott

フォームの残りの部分でこれがどのように機能するかが明確になっていると仮定すると、個別のラベルは必要ありません。

enter image description here

11
Matt O'Keefe

入力ボックスとそのラベルが存在するコンテナを「セクション」と呼びましょう。 UIへの変更は、ユーザーがフローのセクション全体を読むことができるほどエクスペリエンスが向上するという考えに基づいて変更します。それを容易にするために適切なラベルを配置することを検討してください。

_____と_____の価格を比較します。

または

価格が_____から____にどのように変化したかを確認します。

各入力ボックスに、「開始日」や「終了日」などのプレースホルダーテキストを表示できます。しかし、それはフローを少し妨げる可能性が高く、入力セクションのスペースも大きくなります。

5
Raiyan

どうですか:

_____と______で価格を比較します。

2
Jack

あなたは使うことができます:

Initial Date    ../../....
Comparison Date ../../....

また

Start Date      ../../....
Comparison Date ../../....

または

Base Date       ../../....
Comparison Date ../../....
1
Michael Durrant

これはどうですか。日付1と日付2を使用します。2つの異なる日付を比較しているという考えです。「価格の比較」によるセクションのラベル/見出しとしてそれを明確に述べます。そして、その考えが設定されたら、その場合、日付は単なる日付です。日付1、日付2などになる可能性があります。他の名前を呼び出す必要はありません。

enter image description here

OR

ラベルを付けないでください。カレンダーのアイコンは日付フィールドを示すのに十分です。タイトルはすでに存在しており、これが何のためのものかをユーザーに伝えます。

enter image description here

0
PK2016

または...

Enter the two dates to compare prices on:

../../....   ../../....

[compare]

Result:

../../....   ../../....
$35          $37
0
Michael Durrant