The Bombing Brain Blog

The Story of Setlists (the iPad lyrics app for musicians) 4 – Page Breaks

I wanted to take a moment to talk about the way Setlists creates page breaks, because it’s a good demonstration of why you should share your design issues with your collaborators.

As I mentioned in an earlier installment of this series, one of the early decisions for Setlists was that it wouldn’t have constantly scrolling text, but rather more of a cue card approach, with one verse or chorus or bridge at a time on display. The singer would advance the text to the next part whenever he or she was ready, rather than having to try and program the timing of the scrolling just right.

But this led to another important consideration. How would Setlists divide up the text? My first thought was that we’d use a special character, as Teleprompt+ does for cue points. Place a “page break” character in the appropriate places where you want a page break. Simple, right?

Page Breaks original version with special character
Page Breaks original version with special character

But this had a few issues. First, it didn’t look so great, having these large extra characters in the text flow. It’s certainly not intuitive. And more importantly, it meant the user had to set up all of the breaks by adding these characters manually. You’d have to place the cursor where you wanted the break, and then tap a “page break” button to insert the character. This works fine for cue points in Teleprompt+, because you generally only add cue points to much longer speeches, and you usually only have a few cue points per script. But imagine a 300+ song catalog where you’d have to enter six to ten page breaks to each script?

So I tried another approach, where the user would drag a marker to indicate wherever page breaks should occur. This looked better, and it made it much clearer where page breaks would be visually while looking at the edit view. It’s also easier to drag a slider around than to pinpoint a place in the text and add a character several times. But it was still largely a manual process.

I thought maybe we could program a clever way for the app to automatically add breaks at certain intervals to new documents (every X number of lines, say), and then the user would just have to fine tune the breaks by moving the ones that were out of place.

Page Breaks version 2 with draggable markers
Page Breaks version 2 with draggable markers

But then I presented the mockups to Tim, and he said “Well, I could just detect wherever there’s a blank line, and automatically put a page break there.”

Looking at the way people tend to type out lyrics, this made perfect sense. Most of the lyrics you see out there are formatted like this:

I’ve got a rusty feeling deep down
So much I thought I’d lost what I’d found
My Soul’s been out of touch with me
And I was too blind to see…

I’m so sorry I’d been away
But don’t you worry I’m here to stay
Yeah I’m trading in the blues
for all the little things you do…

I’m so sorry babe, but I needed this time
To piece myself back to mine
Some say it ain’t much fun to feel out of place
If I could only make it through one more day.

People naturally put a blank line between stanzas, as you would with poetry. Placing an automatic page break on every blank line means that most of the time, the page breaks will be exactly where you want them with zero effort. And it looks exactly like you’d expect in the editor, without any extra visual clutter.

Page Breaks final version
Page Breaks final version

Now, of course, sometimes you have really long stanzas in songs, but then you just have to go in and add a blank line somewhere in the middle. For really short stanzas you can remove the blank line or just add a space on the blank lines in between to avoid having to flip pages too often. In either case, we’re talking about far less work than manually adding breaks throughout every single song.

It’s not going to work perfectly for everyone, but it will work very well for most singers most of the time.

All of my complicated UI solutions to the problem were trumped in a few seconds by an engineer who had a much simpler programatic solution. It pays to show your designs early and get feedback before you hit your head up against the wall for several hours.

More details about the creation of Setlists coming soon. If you want to learn more about all of the features of Setlists, visit the Setlists web site.