Separating Content

Establishing content hierarchy with divider lines

Dividers are used throughout all types of design to establish content hierarchy and separate themes. Deceptively simple, they are one of the main contributors to your brand’s visual style.

Let’s start with three degrees of separation of simple static content:

Dividers increase the ability for a list to be perceived as tappable because it creates a visual containers around the interactive text relative to the size of the tap target. It is also common to use a chevron to enhance the call to action on iOS, but not on Android.

You have more options than just simple, utilitarian lines. A modern furniture company could use a shift in the background color, while a luxury watch maker could use more ornamentation and filigree. What feels right for your brand?

If you do go with lines (so did we — no judgement), here are some factors to keep in mind:

Item dividers are typically inset to visually indicate that the thought is still connected.

Having the item divider always start at the same inset gives the illusion of a more consistent layout.

For interactive elements, both recommend item dividers that go to the edge of the screen on the ending side (the right for LTR languages.) For static elements Android recommends to inset. I believe they do this to clearly delineate between static and interactive elements, but I question if the user is tuned into such a small difference and it brings an asymmetry to the screen that may not be desired.

Insetting both the interactive and static dividers creates a more symmetrical and consistent layout.

There are a few exceptions to the equal inset item divider:

Section dividers are typically full width and hold more visual weight to indicate the thought has stopped. When designing section dividers, keep the style of your grouped list headers and footers in mind.

Grouped list headers and footers living outside of the list content on the background, like the HIG recommends, visually disconnects them. I have seen apps where the footer of the first list gets confused with the subhead to the second — oof!

I’m a strong proponent for the grouped header to be attached to the top of the list and for the footer content to be included in the relevant list item or as detail text as part of the header if it pertains to the whole list. This creates a more editorial ‘card’ look with clear hierarchy and content groupings.

I’m Linzi Berry, currently design systems manager at Lyft. I sweat the details so you don’t have to. Please subscribe!

Related posts:

Nothing says good company culture like layoffs. I’m surprised that hasn’t appeared in a chart next to the word “innovation”. Nothing is worse than getting laid off. Individuals will experience a wide…

Buy Negative Facebook reviews are comments from critical customers who have received the services of a particular business and are not at all satisfied with the services received. At that time the…