This is the second in a series of posts relating to the making of Soundproof for iPhone. See also: part 1

In this second article in the series about the making of our Soundproof music practice App, I will explain some of the details and decisions behind the Repeat Markers feature.

For background, if you haven’t used Soundproof, it is a music player that is built for repeating audio tracks so you can play along with them. Designed for use by regular people as well as professionals, we made several difficult design decisions in order to achieve what we think is an elegant and very easy to use product.

One popular feature is the ability to loop just part of a track, say the chorus or a tricky riff. We wanted this to be incredibly easy to do from the main player screen, without filling the screen with options related to adding and removing markers. An obvious solution for this would have buttons to add a new marker, a way to select markers, a way to move them and also a way to delete them individually.

However, most of the time you don’t need to add and remove markers, especially when the player automatically remembers the marker positions for each track.

We decided early on that Soundproof was not going to be an App with an audio waveform display, because this is a relatively advanced concept that most users do not need to deal with. It also requires pulling out waveform or volume data, which we didn’t want to do for various reasons. We also decided that time scrubbing would not seek the audio during the process scrubbing. We only seek when you have found your time or let go, as this actually creates a more pleasing experience.

So the decision was made that you would scroll a time slider, and you would simply need to know roughly where in the song you want to set markers. You do this using a normal, familiar UISlider with some custom appearance. The trade-off is that perfectly repeating loops are not likely to be found, but it becomes very quick to set markers and instantly start repeating roughly the right section. We don’t believe the mass market has the inclination or time to finely edit loops. There are other Apps for that.

With these considerations a simpler solution becomes possible where we have just one button in the UI to control all marker functions. What we have is a button that shows the only action you can take next based on the current state. It simultaneously guides you through the process of creating a loop by this implied state:

At each state the marker button only permits the single next logical action. If you move the time position to before an existing marker, the button will update to say “Set start marker” and the marker that exists implicitly becomes the end marker. The compromise for the sake of simplicity here is that if you position one marker incorrectly you have to delete both and start again, but in reality this is not a big problem because you are not going for exactness, and the entire process of adding two markers and clearing them only takes a couple of seconds.

Once you have set two markers we automatically switch you into the marker repeat mode, so there is no extra step to take. What we end up with is a UI that is uncluttered, requires no learning, and is relatively¹ simple to implement.

Having nailed this refined interaction flow, we then have a situation where the player is in a different playback mode, but it needed to be clear to the user that this was the case. When you have set two markers, we “zoom” the time position with an animation to fill the full time range space so you have the impression that you are moving into that time range.

However if you miss this animation you might not know why scrubbing the time to the far left does not let you get to time 00:00, especially if you restart the App in repeat markers mode after a week of not using it. We do show the current repeat mode on the button for switching mode, but again this is something that is subtle and people may not pick up on it straight away.

So at the same time as zooming we animate the background to a darker shade, and drop-in our status view with a message indicating that you are in markers mode.

Finally, we went to the effort of making the switch in and out of repeat markers mode — along with all the animations to achieve this — work fluidly even if the music is currently playing. This is non-trivial as there are lots of edge-cases, but it is one of those nice touches. You don’t even notice while you are practicing a short loop and switch back to repeat set list mode, that it just keeps on playing without interruption, and vice versa. It just does the right thing.

Soundproof — Music Player for Practice is available in the App Store for free with In-App Purchases. The makers Marc and Adam are available for contract iOS app development.