Best Practices for Designing Lists

Keylines are invisible guiding lines used by designers to ensure consistent alignment and placement of elements within a layout. Though they don’t appear in the final design, these lines help designers position text, images, icons, and other components in a balanced, organized way. By following keylines, designers create a cohesive visual structure that improves readability and enhances the overall aesthetic appeal of the design.

To maintain keyline alignment in lists, ensure all list items align with a specific vertical guide or keyline. Start by choosing a consistent point for alignment, such as the left edge of text or the center of icons. Align all elements of the list (text, numbers, images, or bullets) to this keyline.

When aligning text with images in lists, using the image's center as a reference point for adjacent text creates a visually balanced and cohesive look. This ensures that the text is vertically centered with the image, establishing a clear, direct connection between the two elements, thereby improving readability.

It's aesthetically pleasing because it provides symmetry and equilibrium, preventing any single item from dominating the visual space. The list also appears more organized and navigable, offering a smoother and more intuitive user experience.

When you select the "Align Horizontal Centers" function in Figma or another design tool for a series of icons that are placed vertically (one below the other), the result is that they align along their horizontal center lines.

This essentially lines up the middle horizontal points of the icons, making them align perfectly in a vertical line. It helps users scan lists without straining their eyes when looking at abrupt, uneven edges.

Dividers help distinguish between different items of the same list and increase scannability. The rule of thumb is to use them if a list item spans 3 or more lines. Think of emails — they usually include the sender, the subject, and the first couple of lines of the body, and are separated by dividers in most email apps.

Be sure to use dividers that are visible without being too obtrusive. Material Design recommends using dividers sparingly to avoid overwhelming users.^[1]

There are two types of popular dividers — full-bleed and indented. Full-bleed dividers extend across the entire width of the screen, creating a clear and strong line of separation. In contrast, indented dividers occupy only part of the screen's width, often aligning with the text or other content, providing a subtler division.

For lists that include images or icons, use indented dividers.^[2] This is because images inherently have defined boundaries or edges that visually separate them from other elements. Adding a full-bleed divider in such cases can be redundant and may even clutter the design.

For users of left-to-right languages, the left side of the screen naturally draws the most attention. Therefore, for lists in such contexts, it's strategic to align essential media, like thumbnails, to the left. This placement ensures that these key visuals are immediately noticed, enhancing the content's impact and user engagement.

In left-to-right languages, aligning list headings to the left is generally the most natural and effective approach. This alignment matches the direction of reading and scanning, creating a consistent and comfortable visual flow for users. It ensures that the start of each line is predictably placed, facilitating quick recognition and readability.

The fullscreen spinner, once a common loading indicator, has become less favorable in modern design due to users' decreasing patience and higher expectations for speed. A spinner covering the entire screen can suggest a longer wait or even give the impression of a malfunction, potentially frustrating users or causing them to abandon the task.

Instead, use skeleton loaders that mimic the layout of the content that's loading, providing a visual indication of what's to come. They help set user expectations and create a sense of progress as users watch the content fill in. Additionally, skeleton loaders can psychologically make wait times feel shorter by keeping users informed and visually engaged.^[3]

To create a smooth loading experience, make sure lists load sequentially rather than in a haphazard manner. This means that as users wait for the full list to load, they see items populating in an orderly sequence, typically from top to bottom. Both text and media should seamlessly take the place of skeleton placeholders.

This method gives users a sense of progress and order, reducing confusion and frustration. As each piece of content replaces its placeholder, the user can start engaging with available information immediately, even as the rest of the list continues to load.

In today's diverse digital landscape, designing for a wide range of devices is essential. A single, universal design is no longer sufficient due to the vast array of device types, screen resolutions, and orientations users might use. This principle applies to lists as well — they should be responsive, meaning they adapt to the device's characteristics.^[4]

On larger desktop screens, take advantage of the extra space to present more information or a more complex layout. For smaller mobile screens, lists should adjust responsively to be more compact and touch-friendly, ensuring readability and ease of interaction even on a reduced scale.

While some users might prefer the traditional, straightforward approach of a list view, others might find a grid view more visually appealing and easier to navigate. Offering a choice between these views with a list view control enhances user experience by catering to different tastes and browsing styles.

Beyond these, other list views like compact lists for data-dense screens or card views for a more detailed and visually rich presentation can be provided depending on the context.

Align control elements like buttons, checkboxes, menus, or other interactive elements on the right side of list items. This approach is intuitive because it aligns with users' expectations based on standard design conventions. When controls are consistently positioned on the right, users don't have to search for them, making navigation more efficient.

This works especially well for right-handed people using their phones, as they can easily reach these controls with their thumb. We know this isn't ideal for left-handed folks (about 10% of users), who've had to adapt to a right-handed world in apps just like they do with scissors and door handles.

To make it work better for everyone, make sure buttons are big enough to tap (at least 44x44 pixels) and keep them far enough apart to prevent mis-taps.

Enhancing UI with a search feature in lists is particularly effective for interfaces with extensive lists. Place the search bar prominently, usually at the top, to ensure it's intuitive and easily accessible. Use a widely recognized search icon, such as a magnifying glass, for immediate recognition.

Enhancing list interfaces with filtering and sorting options significantly improves user navigation. Filters allow users to narrow down list items based on specific criteria, while sorting options let them reorder items by date, relevance, or alphabetically.

Keep these tips in mind:

• Position filter and sort icons near the top of the list for visibility and easy access.
• Use recognizable icons, like sliders for filters and arrows for sorting, to aid quick user understanding.

An intuitive design of these features streamlines user interaction and enhances the experience of managing and navigating through extensive lists.