UX for entering two times per day for time period

Question

I'm building an iOS app to be used by children / youth for a period of four weeks. The app issues a notification twice per day, once in the AM and once in the PM. Prior to using the app, the user (the children or their parents) must select the AM and PM times for the notifications to be issued. I'm trying to figure out the best way to allow the user to enter these AM and PM times.

Currently I have a screen with a two-button segment control. The first button shows a table with two rows. One row presents an AM time, with the second showing a PM time. When the user taps a row, a time picker is revealed, allowing the user to configure the AM or PM time for the entire four week period.

The second button of the segment control reveals a view with a table with 56 rows--AM and PM rows for each day of the four week period. By selecting the appropriate row, the user can configure a specific time for a particular day.

Is there a more intuitive UX for entering two times per day for limited time period? The view with two rows feels bare and empty and the one with 56 rows feels clunky. Maybe it is better to merge the two views and have a single view with 58 rows? In this scenario, the top two rows would allow the user to set all AM and PM times, and then they can scroll down to one of the remaining 56 rows to configure a time for a specific date.

Answer 1

I think you should give a display of all of the days and the times of the notifications for each day.

Group this list into 2 groups (one group for each week), then the times (AM/PM) beside each day should be clickable so they can be changed individually. This way they act as a status of the time set and as an actual control that is clickable. When tapped throw up a modal time spinner control so they can focus on setting the time.

Also above the main view have a button that says "Change All Times" or something similar. When this is tapped, you can have a 2 step wizard, the first spinner will be titled with something like "Change All AM Times", then they click next, and they get "Change All PM Times". Then when they save all of the times are updated. They can then change a specific time after that if they wish by following the method I mentioned above about the individual buttons beside each day of the week.

Also, I think you should populate the list with default times unless you want to force the user to set them themselves.

e.g. wireframe of above idea

Answer 2

I think it is possible to consider using sliders or similar controls for entering time using a small footprint. You can use colours or fixed starting points to limit the time period that users can enter, and create specific size steps if you don't need or want users to have to be very precise with the time. Using sliders also allow for comparison between the two time periods quickly to see overlaps or compare length of time. It also opens up to and more complex manipulation if you add in additonal input controls. It is not really a standard at the moment, but I am hoping it inspires more people to think up of innovative ideas for this problem.

Answer 3

First, why do you have to click a field before selecting the time? There shouldn't be too much more of an impact on screen real estate to show the time selector widget initially (depending on which time widget you use).

Second, depending on what kind of time-based application you are building, you should be able to extrapolate the most commonly entered values and pre-fill the form data (html placeholder text, styled differently of course) for easier manipulation.

Third, use a graphical representation of time. I would use two circular analog clocks and allow the user to click and drag the hands into the desired location (on desktop). The center of the clocks could have a sun and moon icon (respectively) and / or yellow and blue borders to visually represent the different functionality, for example.

Depending on what is going on here, of course, but this would be how I would structure it if the user is coming in each day to set times (I imagine this to be like parental controls for tv time based on the way you have described it).

Answer 4

Can it be like this?

^{download bmml source – Wireframes created with Balsamiq Mockups}