User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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

share|improve this question
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 at 18:40
up vote 18 down vote accepted

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.

share|improve this answer
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 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 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 at 16:19

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

share|improve this answer
    
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 at 9:31

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

share|improve this answer
1  
+1 I always think it's best to not have labels unless they're necessary. – Ken Mohnkern Feb 6 at 17:05
1  
I wonder if this could cause accessibility concerns... – Brad Werth Feb 7 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 at 11:05
    
+1 and dates out of order is not a concern (see question) – Toni Toni Chopper Feb 8 at 9:34

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.

share|improve this answer

How about:

compare price at _____ and ______.

share|improve this answer
1  
If you can please elaborate on your answer. – Mayo Feb 5 at 14:41

You could use:

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

Also

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

or

Base Date       ../../....
Comparison Date ../../....
share|improve this answer
    
I also suggest "baseline date" or "reference date". – 200_success Feb 8 at 17:18

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

share|improve this answer

or...

Enter the two dates to compare prices on:

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

[compare]

Result:

../../....   ../../....
$35          $37
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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