I have to define a GUI Element that contains timespan with minutes, hours, days, weeks and months. Whats the best practice in this case?

The following possibilities I considered: enter image description here

Are there any other good ways?

5 Answers 5


My initial idea is to use a slider where you can chose timestamps appropriate to the user. The further back in time, the more rough time steps you have in this logarithmic scale. It might not be appropriate everywhere, but it’s fast and intuitive:


download bmml source – Wireframes created with Balsamiq Mockups

  • 1
    Thats a good idea i'll take that in consideration.
    – frugi
    Commented Mar 17, 2014 at 9:20
  • 1
    Oh SharePoint search refiner :) Commented Mar 17, 2014 at 12:55
  • 1
    @RobertLindgren Busted! :-) Commented Mar 17, 2014 at 13:09
  • 2
    @FranciscoPresencia a solution would be to indicate the log scale with 'sub markers', like so: hour ago ||| | | | | | | | | minute ago and repeat this pattern between each 'milestone'. Also, the slider could 'snap' to these sub markers, and a speech bubble above or below could indicate the absolute selected value of the slider position. Commented Mar 17, 2014 at 14:49
  • 1
    @FranciscoPresencia There is evidence that humans think in a logarithmic scale more naturally
    – Izkata
    Commented Mar 18, 2014 at 3:42

I particularly like the way Facebook handle dates. You just have to pick a date by clicking the calendar and then specify the hour. When typing in the hour input, they suggest you some rounded ones.

facebook's date entry

  • I most cases I would appreciate a time span control that let me input start and stop in the same controller - not in two separate ones. Commented Mar 17, 2014 at 16:49
  • 1
    I totally agree with you @HenrikEkblom. However if you want to give full control to the user, he'll have to select two precise dates and that's what the example I gave is good for. Otherwise, the simpler it is, the better.
    – Gabin
    Commented Mar 18, 2014 at 9:29

Sounds to me your trying to design the interaction pattern often used in scheduling, agenda or calendar software.

Take a look at how it is generally done on the operating system you are designing for. On Windows for example, you can assume that most of the professional users work with Outlook and have created an appointment or agenda item at least once.

Below two examples from google calendar and outlook. Both rely on a datepicker and dropdownlist for choosing the begin and start date/time. You could extend the time textbox to host minutes or seconds if necessary. The checkboxes provide extra shortcuts in filling out the timespan.

enter image description here

**Edit based on the comment by Frugi **

For a notification after a give time you could also consider something in the line of Evernote's solution. It gives 2 shortcuts which will often be used: 'Tomorrow''In a week but also gives the possibility of filling in a time and possibly a date. You could however remove the date and replace this with a number of months.

Although the solution is more appropriate for a webpage/webinterface or mobile app, than a desktop application in my opinion.

enter image description here

**Edit based on the answer by Benni **

Just one last idea that springs to mind. If the idea of a slider suits your application but you need more control over the exact time limit you could think about a combination.

Use the slider for quick adjustment but if you need to fill in a precise value you can create a popup which opens on doubleclick/hover/click/rmb on the sliders 'thumb'. In this popup you can put precision controls like spinners to finetune your time/date.

  • That's true and these examples are valid. But I need a solution without the date component. Only the timespan is relevant for me.
    – frugi
    Commented Mar 17, 2014 at 15:04
  • Hmm, could you give an explanation on the goal of this element? What will it be used for. For example: will it give a notification after said timespan?, or is it a countdown? etc.
    – GWv
    Commented Mar 17, 2014 at 15:13
  • For a Notification after a given timespan yes thats the goal.
    – frugi
    Commented Mar 17, 2014 at 15:14

Displaying Time

I had a similar problem with a project of mine. Here is what I did. Source Code

Relative Time

The positioning might be off.

Selecting Time

To select time duration use something like this:

Google Calendar

  • On your first one, I can't tell - which day are those times supposed to apply to? If the one on the left was PM and the one on the right was AM (and the darker area spanned both days) it would be obvious, but right now...
    – Izkata
    Commented Mar 18, 2014 at 3:44
  • It goes from the start of Oct 28, 2010 to the end of Oct 28, 2010.
    – 0xcaff
    Commented Mar 18, 2014 at 15:21

I guess this highly depends on what kind of use case you want to implement.

Depending on that there may be multiple valid answers, and no single answer will suit all use cases in the same way, so I guess there is no canonical answer.

Initially, I was also thinking of the slider, but then I though: What timespan are we talking about?

  • Is it minutes? Hours? Years? …?
  • Is having 15 min / 30 min / 45 min / … blocks fine, or does the user need the ability to specify broken numbers (think 1.3274363 seconds) as well?
  • Is it past until now, now until future, or past until future, or a combination of these? In other words: Is one side of the interval fixed, or not?
  • Do the actual times matter, or is it just about 30 minutes, and there is no difference in semantics whether it's from 9 to 9:30, or from 10 to 10:30?

Depending on the answers to these questions I'd go one way or the other.

To give an example:

  • If you want to setup a meeting, the actual times are important, but we're talking minutes and hours, neither seconds nor dates. Hence drop downs à la Facebook would be sufficient.
  • If you want to setup a stop watch, it's always from now to the future, hence a single drop down with minutes (1 min, 2 min, 3 min, …) is probably fine.
  • If you want to make a questionnaire on how long people can hold breath, the actual times are completely irrelevant, it's only about the range. Then a slider may be a good option.

Just to give you an idea.

Basically, my answer comes down to use the right tool for the right job.

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.