Separating Content

Establishing content hierarchy with divider lines

Linzi Berry
Jan 10 · 4 min read

Content types

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

  • Similar content uses item dividers when the content is similar, but not exactly the same.
  • Related content uses section dividers when the content is related, but is it’s own unique thought.
No Divider, Item Divider, and Section Divider

Interactivity

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.

Dividers vs None

Visual Design

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?

Highlights from audit

Item Dividers

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

Start inset

Both Apple’s HIG and Material Design recommend item dividers that align to the start of the text on the starting side (the left for LTR languages.) I believe they do this to give the imagery visual space, but I dislike the inconsistent item divider line starting points when a single screen is comprised of iconic and plain text list items. It makes the group of list items with icons feel more connected than the group without.

Content vs Text Start

End inset

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.

Content vs Edge End

Exceptions

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

  • Connected list items align the divider to the start of the type to not break the connected icon ‘spine.’
  • Single lists with images can align the divider to the start of the type to give the image more space when it’s the only list item type on the screen.
Buttons, Connected Lists, and Single Lists with Images

Section Dividers

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 Header and Description, Inside vs Outside

Tap to Dismiss

Sweating the details so you don’t have to

Linzi Berry

Written by

Design Systems Lead at an SF-based consumer tech company

Tap to Dismiss

Sweating the details so you don’t have to