13

I'm working on a web application which has a feature to compare the price of products at different dates to see if they went up or down. Basically the user select two dates and click search. At the moment the labels are "Comparison Date" for the first date and "Capture Date" for the second date, which is far from intuitive.

What would be better labels in this case? Please notice that the order is not important i.e. date1 > date2 or date1 < date2

Screenshot for context enter image description here

Improve this question
1
  • 3
    This is more like a thesaurus game: first/second, primary/secondary, event/trigger, old/new, archive/recent, base/now, etc. Add 'date' to those words.
    – Chloe
    Feb 5, 2016 at 18:40

8 Answers 8

Reset to default
18

I think you're missing an element of the form. Trying to explain each individual field rather than the purpose of those two fields as a whole.

Think of this from an accessibility perspective. If someone is using a screenreader to read out the elements on the page, so they get no visual cues as to the fields, what would they expect?

Therefore I would go with introducing a legend to the fields to introduce their purpose. Select dates to compare, and then name the fields logically having introduced the concept of it. So First date and Second date would probably work fine there.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

It's what the <fieldset> is useful for; grouping fields together and giving that group a title that relates to all the containing fields.

Improve this answer
3
  • 1
    Start/end date makes it look like you're selecting a period (the range between the two dates) which makes this method is misleading. I totally agree that you need to explain the purpose of the two fields together though - as I've tried to do in my answer.
    – Matt O'Keefe
    Feb 5, 2016 at 14:28
  • @MattO'Keefe Fair point, I had interpreted the question as being a range, rather than individual dates. I'll amend.
    – JonW ♦
    Feb 5, 2016 at 14:29
  • 4
    Good answer. "First" and "Second" is how people talking about and pointing to the screen would verbalize the pair of fields.
    – Basil Bourque
    Feb 5, 2016 at 16:19
27

So the user is interested in the price history of a product? And this part of your website lets them see how much the price of that product has changed between the first date and the second date?

What criteria do they use to pick the two dates? See if you can find a way to tie it to their workflow.

As an alternative, and this doesn't directly answer your question: could you show a graph of the price history, and then let the user choose any two points on the graph and it will show the price difference?

For example:

Mockup of graph with comparison annotations

Improve this answer
1
  • Unfortunately showing the history of the price variation is not doable for technical reasons but I like the idea +1
    – Toni Toni Chopper
    Feb 8, 2016 at 9:31
11

Assuming the rest of the form makes it clear how this is supposed to work, you don't need separate labels:

enter image description here

Improve this answer
4
  • 1
    +1 I always think it's best to not have labels unless they're necessary.
    – Ken Mohnkern
    Feb 6, 2016 at 17:05
  • 1
    I wonder if this could cause accessibility concerns...
    – Brad Werth
    Feb 7, 2016 at 6:59
  • If you do this, you'll probably also need to account for the user entering dates out of order, i.e. the date in the right field can be earlier than the date in the left field.
    – Bob
    Feb 7, 2016 at 11:05
  • +1 and dates out of order is not a concern (see question)
    – Toni Toni Chopper
    Feb 8, 2016 at 9:34
5

Let's call the container where your input boxes and their labels reside a 'section'. I would base my changes to the UI on the idea that users have a better experience when they can read through the entire section in a flow. Consider placing appropriate labels to facilitate that.

Compare prices between _____ and _____.

or

See how the prices changed from _____ to ____.

One could show placeholder text in each input box, something like 'start date' and 'end date'. But that is likely to hinder the flow a little bit, and also make your input section take up more space.

Improve this answer
2

How about:

compare price at _____ and ______.

Improve this answer
0
1

You could use:

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

Also

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

or

Base Date       ../../....
Comparison Date ../../....
Improve this answer
1
  • I also suggest "baseline date" or "reference date".
    – 200_success
    Feb 8, 2016 at 17:18
0

How about this.. with date 1 and date 2.. The idea is that you are comparing two different dates.. you clearly mention that as label/heading for the section by "Compare Prices".. and once that idea is set, then dates are just dates.. they could be date 1 date 2 etc.. you really dont have to call them anything else.

enter image description here

OR

dont put labels at all. Calendar icon is enough to indicate the date field. and Title is already there that tells user what this is for ..

enter image description here

Improve this answer
0

or...

Enter the two dates to compare prices on:

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

[compare]

Result:

../../....   ../../....
$35          $37
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.