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.
Content types
Let’s start with three degrees of separation of simple static content:
- Same content uses typography size, weight, paragraphs and white space to separate out multiple points within the same thought.
- 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.
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.
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?
If you do go with lines (so did we — no judgement), here are some factors to keep in mind:
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.
Having the item divider always start at the same inset gives the illusion of a more consistent layout.
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.
Insetting both the interactive and static dividers creates a more symmetrical and consistent layout.
Exceptions
There are a few exceptions to the equal inset item divider:
- Buttons have a full width item dividers to distinguish themselves from list items, especially in modals.
- 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.
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 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!
