Handling two disjoint methods of setting alarms in iOS

Question

I'm trying to set alarm times for a single object with two views; one for quick presets, another with any number of custom times. The two buttons at the top (Presets | Custom) switch between these two methods for setting the alarm.

On the first view (Preset, shown above) you select how often the alarm sounds, and one time. Changing the time in the bottom picker immediately adjusts the times displayed on the top table.

When you go to the custom view (Above), it's empty. The plus sign on the top right adds the currently shown time in the bottom picker to the list of alarms.

Once you press back on the navigation controller, the alarm times currently displayed are saved, and you see the summary screen for the alarm (Above).

The main problem I am having is I feel like there is a disconnection between the two views. I like that you can easily switch between Presets and Custom with one press, but there are scenarios that I feel will create user frustration.

For example, if you start on the Preset and choose once per day, then switch to Custom (which starts blank), then hit Back you will have saved no times (since the active screen when you hit Back is blank). This does not seem friendly to the user. Similarly, if you are on the Custom view and spend time adding several times, then go to Preset before hitting back, again the user's work is lost.

One partial solution to the above is to have the Presets screen populate the Custom screen. So if you choose 4x a day then go to Custom, the four times from the preset would populate the Custom screen. Unfortunately this method does not work in reverse, as there is currently no way to represent arbitrary times on the preset screen. In addition, if I set some Custom times, go to Presets, change my mind and return to Custom, the work I did in Custom has now been replaced by my selected presets. So sometimes it seems like it would be better to keep the views disjoint.

These are the scenarios I'm going through. Does anyone have suggestions on how I can get these two views to work well together, or other suggestions on improving this interface?

Answer 1

What I would recommend is combining the interfaces. Make it so that the Preset times simply add a set of times to the Custom list, which you can then remove and modify. This will combine the two screens into one, which should simplify the result.

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

In this alteration, the picker time is at the bottom and the list above, but there is only one interface. The interface is mostly like the Custom screen you proposed, but you can add one item as well as adding a shotgun spread of times using the other buttons. With a single screen you eliminate the split between two different interfaces for the same task.

The downsides of this method are that the list becomes even more cramped than before, and the +Two, +Three, and +Four buttons have nowhere to display what times they will add so you can only find out by experimenting.

Answer 2

I find several things unoptimal wih your design:

1. The use of a segment button in the title bar as a mean of data entry. I would expect such controls only for navigation.

2. Orphan spinners: on iOS a spinner is like the keyboard. It is to edit a line that is clearly highlighted in the top half. Your spinners are not linked 1 to 1 with a field in the top half.

I would make more use of a grouped list. The first item is the 'first alarm'. Then follows a line with a toggle to switch between your two modes. Depending on that toggle, the next lines are different.

E.g. For preset (pardon my ASCII art)

• First alarm: 9:17. (when selected, shows the spinners)
• Regular intervals [ On ]. (a toggle)

• repeats: 3 > (when tapped, pushes a new list with all preset repeat options)

  Alarm times: 9:17. 2:17. 7:17. (this is footer comment below the grouped list)

E.g for custom:

• First alarm: 9:17
• Regular intervals [ Off ]
• Second alarm: 10:23 (can be edited just like first alarm)
• Third alarm: -:- (tap to add another alarm)