Vertical Rhythm in iOS Design

I've got a hunch that vertical rhythm is a somewhat mysterious idea for most interface designers. I know it has been for me. Starting out in interface design without prior experience in print media, I've been slow to experience many of the big ideas that profoundly impacted design for the last few millennia.

For screens, vertical rhythm has been implemented since the beginning. If you've got paragraphs you've got vertical rhythm, right? Unfortunately - No. Vertical Rhythm on the screen is been a longform art still being wrangled by interaction designers constantly wanting more flexibility in the way typography and content pile up into the interfaces we know.

On the Web, the tools for designers to set a vertical rhythm have basically been in place for a long time as well. The line-height property was baked into the very first version of CSS and works marvelously on IE4. But, it did take a while for many of these tools to evolve into what we know them as now. Today, baseline grids are just about as important for web design as Sourceforge was in 2006. Compass, the popular Sass boilerplate has a great baseline grid baked in - GitHub is teeming with them.

On iOS, we see a different story. Apart from a quality article from Aen Tan discussing the idea, vertical rhythm for iOS is an oft-neglected aspect of the interface conversation. We tend to focus on other features with product wide implications; Navigation Patterns, Button Styles, "Flatness", usually steal the show. Nonetheless, vertical rhythm for iOS is a critical piece to the composition of a noteworthy application, especially in the new iOS environment of two device heights.

Let's look at some Table View examples on the iPhone 5 display height - 1136px.

1136px UITableView Examples

These are good examples of the different patterns you'd see in a UITableView class. They're great candidates for studying vertical rhythm. Right away we can see the two main styles Table Views can have - Grouped or Plain. The iOS Settings screen on the left is a Grouped Table View - These present a few additional places for Vertical Rhythm to shape the feel of the view. Instapaper and Mailbox, middle and center respectively, are examples of the Plain Table View. Vertically scrucutred data packaged in cells for users to tap into for additional options.

Grouped Table View

Apple gives a few hints as to how they'd like to see spacing setup for titles and cells in their example with the settings view. They mention padding before and after the title and cell, but don't mention how much to give.

Let's look at the iOS settings app grouped Table View. The key is just looking for some patterns in spacing, it's not really about how many pixels or points more here or there, but setting a "rhythm" that can help guide your eyes down the view.

Grouped Table View

There is clearly a pretty good rhythm here. The spacing of "A" is consistent in two different ways, 3 different times. The break between the "Group" of tables with the title just has a nice rhythm. It's almost hard to tell without looking into it, but it's there.

The nature of a grouped table view calls for much more variance in the spacing between elements, making establishing rhythm that much more important. If you're using a grouped table view style, make sure to find a rhythm.

Plain Table View

A plain table view is maybe a bit more common in iOS UI. Here's an example from the Instapaper app.

Grouped Table View

As you can see, our only two "notes" are really "A" and "B". But, because it's consistant all the way through the view, it helps give a feeling of simplicity straight from top-to-bottom.

Wow Vertical Rhythm

Now here is where it get's amazing. Let's look into how the Mailbox app gets into using the "plain" table view with some serious rhythm.

Music as Vertical Rhythm

We've definitely got 1 very clear "A" note, the entire cell. And it is kinda hard to read all the way through those red lines, let me spell it out.

BBCBCBCBB

Wait a second, I'm going to flip it around and write it out again...

BBCBCBCBB

Wow. That's amazing. Rhythm forwards and backwards.

Posted February 2013