<?xml version="1.0" encoding="utf-8"?>

Feeds (also known as activity feeds or news feeds) are UI patterns that help share and promote content between users. Feeds are perfect for handling and presenting dynamic and constantly changing information. They are lists of items ordered by a set parameter: time, popularity, frequency, age, or relevance.

Feeds work well on blogs, news outlets, social media sites, and notification screens. Feed length varies from product to product, but they are almost always designed to facilitate scrolling. The best type of feed for your app depends on the content you make. What all feeds share in common is having a UI that makes it easy to consume content.

Exercise #1

Chronological feeds

Chronological feeds Bad Practice
Chronological feeds Best Practice

Chronological feed sorts events in order of when they were created, usually from newest to oldest. This is the oldest and most traditional type of feed. The purpose of such a feed is to present a timeline of events.

Nowadays, not many apps use purely chronological feeds. Avoid a chronological feed if you know that you’ll want to eventually replace it with an algorithm-based feed. Sudden changes like that will upset users.[1]

Pro Tip: Chronological feeds are best when real time is a core component of your app. For example, if you want to display users' activities or places they visited during a specific period.

Exercise #2

Ranked feeds

Ranked feeds Bad Practice
Ranked feeds Best Practice

Algorithm-driven ranked feeds curate content based on more than just post times. They're smart; they consider what's catching on, what's paid to pop up, and what's handpicked by editors.

This approach suits most apps where the post's timing isn't as crucial to users as the relevance or appeal of the content itself. It's about delivering what users will likely want to see or need to see, like trending topics, sponsored highlights, or editor's picks.

Pro Tip: Use ranking in apps with more than a few dozen activities.

Exercise #3

Aggregate notifications

Aggregate notifications Bad Practice
Aggregate notifications Best Practice

Grouped notifications simplify how users receive updates. By combining similar alerts, it prevents users from being bombarded with too much information at once.

For instance, rather than receiving an individual buzz for each new follower, a user could get a single summary notification saying, "256 people followed you today." This method is especially beneficial for power users who juggle numerous notifications daily.

Notifications are typically consolidated by categories such as time received, activity type, or interaction, allowing users to digest information at a glance while keeping their digital space tidy.[2]

Exercise #4

Personalize feeds with recommendations

Personalize feeds with recommendations Bad Practice
Personalize feeds with recommendations Best Practice

Enhance your users' experience by tailoring their feed with profile suggestions to follow. Not only does this personalize their journey, but it also motivates exploration within your app. To craft these personalized recommendations, consider incorporating:

  • Profiles connected to people users may already know, or that their friends follow
  • Profiles that align with users' interests
  • Profiles that have a significant following and influence within your user community

Balance personalized recommendations with diverse content that broadens users’ perspectives. Introduce random elements and cross-interest suggestions to encourage more user exploration.

Exercise #5

Avoid visual clutter

Avoid visual clutter Bad Practice
Avoid visual clutter Best Practice

In feed design, opt for minimalism and clarity to steer clear of visual chaos. Users need to swiftly navigate through content, and a simple user interface facilitates this. Overcrowding with too many components, using mismatched fonts, or employing verbose labels can pull users' attention away from their main task.

With each feed entry potentially holding extensive custom data, it's your role as a designer to curate what's essential, presenting only what's needed for users to make informed decisions without the clutter.

Pro Tip: Simplicity isn't only about the visual appeal — it reduces the cognitive load on users.

Exercise #6

Maintain text legibility

Maintain text legibility Bad Practice
Maintain text legibility Best Practice

The main goal of any feed is to present content in a way that's easy to consume. To achieve this, readability is key: all text must be comfortably legible to prevent users from struggling to decipher what's on their screen. Large, clear font choices are crucial, and background contrast plays a significant role too. For those with visual impairments, these factors become even more important. It's always a good practice to test your designs with accessibility tools to ensure your text size and clarity meet the required standards, ensuring that no user is left behind.

Exercise #7

Simplify timestamps for clarity

Simplify timestamps for clarity Bad Practice
Simplify timestamps for clarity Best Practice

Abbreviate timestamps to the bare minimum. Their role is not to provide an exact time. Instead, consider them a broad indicator of how long ago the activity occurred. Timestamps are a tertiary feed feature, so avoid emphasizing them too much.

Pro Tip: In most cases, you can omit "ago" — users will understand what "3h" means.

Exercise #8

Prevent an empty feed

Prevent an empty feed Bad Practice
Prevent an empty feed Best Practice

To keep user engagement high, avoid presenting users with an empty feed. Ankit Jain, ex-director of engineering at Google, notes that the window to captivate users post-installation is typically 3-7 days.[3] Empty feeds might confront new users who haven't yet made connections or when there's a lull in activity.

Tackle this by incorporating "suggested users to follow" during the onboarding process. Alternatively, encourage users to discover popular content, invite friends, or enhance their profiles to foster immediate interaction with the app.

Exercise #9

Provide only the essential controls

Provide only the essential controls Bad Practice
Provide only the essential controls Best Practice

In designing your app's activity feed, it’s important to curate the user interface by including only necessary controls. For social media, this might mean offering options to comment, like, or share. For other applications, determine what’s essential for user interaction and trim the rest.

This selective approach prevents user overwhelm and keeps the interface clean, promoting a more intuitive and engaging user experience. Consider each control's value and whether it enhances or complicates the user journey.

Pro Tip: If additional options are necessary, tuck them away under an expandable menu icon, like a kebab menu.

Exercise #10

Add visual signs of feed status

When users refresh their feeds, often to pass time during waits or meetings, displaying a clear loading indicator is crucial. Adhering to Nielsen's heuristics, an engaging animation like a spinning circle provides not just visual comfort but also keeps users informed about the system's status.

Complete this lesson and move one step closer to your course certificate