I have a time range filter (for a web app, desktop and mobile) that looks like this:

time range filter

In this case, time is not relative to the user in terms of number of days (7 days ago), but it respects the actual calendar divisions (this week means from this monday to the day I'm in, this months means from the 1st).

I am pretty confident about the classification (today, yesterday, this week..) but I have two problems:

1) What happens when I am on a Monday, is "yesterday" a valid option? Should it disappear and just leave "last week"? (Sounds bad for UX to have items in the menu that change from one day to the other).

2) I want to make the :hover state of the menu include the previous dates, so for example when you hover "Last Month" it should show a different background for all the previous categories. Does this make sense with the structure? Also, what happens when you are on the 1st day of the month, and your current category actually EXCLUDES "yesterday"?

  • When you say 'for an app', do you mean a mobile app, a tablet app, or a computer application? The size of the UI makes a big difference in how you can lay it out. Apr 30, 2012 at 22:46
  • Thank you @MyrddinEmrys, I just added the info. It's a web app, no big size limitations for now
    – Yisela
    Apr 30, 2012 at 22:49
  • I should point out that mobile web apps should never be the same as desktop web apps if you can help it... the needs are too different. My recommendation is appropriate for a desktop browser, but not for mobile. Apr 30, 2012 at 23:31
  • So if I get there on a monday I am not able to see stuff just for the day before? I would always have to see stuff for at least an entire week? Why?! May 1, 2012 at 11:05

2 Answers 2


I do not recommend the highlighting of 'contained' choices. It is an interesting idea, but the edge cases (where previous day, week or whatever are partially or ambiguously contained in the selected choice) would make it confusing, not clarifying. If the effect does not tell anyone something they can't easily know then it doesn't really serve a purpose.

As far as how to clarify when a particular date range has no items to display, you can disable it. Explain why it is disabled in a tooltip (No items scheduled yesterday). However, this does not solve a different problem of the ambiguity of 'This week' and 'Last week' over the weekend. For that issue, you need to display the dates covered by the selected choice:


download bmml source – Wireframes created with Balsamiq Mockups

As the user hovers over a particular choice, the date range to be selected is displayed in faded text to the right. In this image the mouse would be pointed at 'This Week'. If it pointed at Yesterday the note about no items scheduled Sunday would be shown there. Examples for the list above:

  • Apr 30, Monday
  • No entries Sunday
  • Apr 30 - May 4
  • Apr 23 - Apr 27
  • Apr 2 - Apr 30
  • Mar 1 - Mar 30

You clarify all ambiguity while having a mostly clean interface. Exactly where you place the hover text would be best determined by the layout needs of your interface... anywhere directly adjacent to the menu should be fine.

  • Thank you Myrddin. I am showing the dates in a tooltip to the left. There is however a problem with the "Friday" approach: The app is used for very different activities that might (occasionally) take place in the weekend. An option would be to only make "Last week" appear when "Yesterday" is empty (so it replaces it). Do you think this would be better?
    – Yisela
    May 1, 2012 at 0:35
  • Oh, so this is not an issue with business days, but with date ranges that are empty? In that case, simply disable the choice if it has no items, and change its tooltip to say 'no events in this range'. May 1, 2012 at 0:43
  • I updated the question to reflect your clarification. May 1, 2012 at 0:51

if you use concents like "last week" vs. "week-to-date" (or equivalent language) then it works even on monday.

Your Answer

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

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