UI - half days

I am stuck on a UI decision and wonder if I could get some feedback.

Original solution was to select a date range with the option to toggle the start and end dates to half days. Which I solved with a simple full and half filled circle icon.

Now there is a new selection type of single day, with the option of full day or time range. For this I am going with a familiar checkbox, which means I will abandon the half day toggle icons used for range selections.

I have mocked up four versions, along with a poll to see what feels or reads best.

Thank you

  • version 1
  • version 2
  • version 3
  • version 4

0 voters

I had to read the explanation multiple times because none of the provided options made it instantly clear what I was choosing.
So my vote is "none of the above"

I'm with Wim here
for me the option Single with option all day or 1/2day and the two dates in a list would make more sense
btw. for me the original version shows half and empty, not half and full :frowning:
2 cents from Holger

thanks for the replies... I have defiantly been struggling and open to suggestions. The single is in units of hours and the range is in units of 1/2 days.

I thought it was just me. I didn't understand the options either, but I figured perhaps that was just a sign that I was falling behind the times...

Hi Rivet
like other posters I am struggling with the use case. Could you describe it in words like:

Select
1 full day from (calendar)
or
1 half day from predefined day (choice: am and pm half days)

?

Hi Torsten, the user needs to pick their holidays as a range and the smallest unit for a holiday is half day. So I am trying to figure out the UI for that. I have been looking for examples but can't find anything out there. Not sure best approach.

here is a draft of the bigger picture.

Thanks for providing more info. Initially I really didn’t understand the purpose.

This is my favorite kind of puzzle as I am starting to specialize in ux ui and i am usually like a dog with a bone However i can’t indulge atm so here’s my first ideas

Make the selector the calendar view one, 1 click makes a / appears, a second click Gives a \ and a third click resets the cycle.
Superpose 3 text boxes. Number and slashes. Make it a button.

Conditional format the number to be coloured according to your chart.

If one wants to select a range at once, put a 2 buttons (start; end) which once pressed immediately after a date button has been released will set the range delimiters.

It is easy to setup but if you prefer to sub it, we’ll be happy to help just pm me.

2 Likes

Hi Cecile,

Thanks for the reply and suggestion. I can see the initial request was a bit of a mess. I am going to chalk a small portion of that, up to three late nights working to get my boys out of the Philippines (all good).

Best I step back for a few days and approach with fresh eyes and connect with you then.

Thanks again.
David

2 Likes

somewhat happy about the answers here - I did also not manage it to get it clear into my mind (-: