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:
Are there any other good ways?
Add a comment
|
5 Answers
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
answered Mar 17, 2014 at 9:17
-
1
-
1
-
1
-
2@FranciscoPresencia a solution would be to indicate the log scale with 'sub markers', like so:
hour ago ||| | | | | | | | | minute agoand 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. Mar 17, 2014 at 14:49 -
1@FranciscoPresencia There is evidence that humans think in a logarithmic scale more naturally– IzkataMar 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.
-
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. Mar 17, 2014 at 16:49
-
1I 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.– GabinMar 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.
**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.
**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.– frugiMar 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.– GWvMar 17, 2014 at 15:13
-
Displaying Time
I had a similar problem with a project of mine. Here is what I did. Source Code
The positioning might be off.
Selecting Time
To select time duration use something like this:
-
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...– IzkataMar 18, 2014 at 3:44
-
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.
