Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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?

share|improve this question

5 Answers 5

up vote 19 down vote accepted

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:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

share|improve this answer
1  
Thats a good idea i'll take that in consideration. –  frugi Mar 17 at 9:20
1  
Oh SharePoint search refiner :) –  Robert Lindgren Mar 17 at 12:55
1  
@RobertLindgren Busted! :-) –  Benny Skogberg Mar 17 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. –  Marc Dingena Mar 17 at 14:49
1  
@FranciscoPresencia There is evidence that humans think in a logarithmic scale more naturally –  Izkata Mar 18 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

share|improve this answer
    
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. –  Henrik Ekblom Mar 17 at 16:49
    
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. –  Zhouzi Mar 18 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.

share|improve this answer
    
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 Mar 17 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 Mar 17 at 15:13
    
For a Notification after a given timespan yes thats the goal. –  frugi Mar 17 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

share|improve this answer
    
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 Mar 18 at 3:44
    
It goes from the start of Oct 28, 2010 to the end of Oct 28, 2010. –  caffinatedmonkey Mar 18 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.

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.