THE ULTIMATE GUIDE TO Activity Feed Design & News Streams Here at Stream we’ve helped over 500 companies build and scale their feed technology (and now chat too). Over the past years we’ve picked up a few best practices when it comes to activity feed design and feed UX. In this guide we share what we’ve learned to make designing an activity feed or notification feed easier for you. Feeds are fun! It’s really one of the best UI patterns to share and promote content between users. Through a few different perspectives, we’ll break down the activity Feed UI Pattern. You'll see just how many different and diverse ways there are to design an activity feed. Table of Contents arrow_forward Activity Feed Inspiration arrow_forward Why Activity Feeds? arrow_forward Feed Features and Behavior arrow_forward News Feed Types arrow_forward What are some popular examples of activity Feeds? arrow_forward News Feed Design Best Practices arrow_forward What should you avoid when designing activity feeds? arrow_forward activity Feed Design UI Kits and Patterns PUBLISHED BY Joshua Tilton INTRODUCTION Activity Feed Inspiration I’ve collected a diverse set of dribbble shot into a bucket for this guide. I’ll keep this updated and add new designs as I find them. View the bucket here. FREEBIE Based A versatile and comprehensive Feed UI Kit for Sketch. View Now → PART ONE Why Activity Feeds? Modern websites and apps are simply products that aim to solve problems or delight our users. Their focus can be entertainment, communication and collaboration, or getting things done. If you look at the examples above, activity feeds are a diverse and flexible UI Pattern. Just about every case, activity feeds can be put to great use. First and foremost, feeds are perfect for handling and presenting dynamic and constantly changing information. Fundamentally feeds are lists for items that can be ordered or grouped by just about any parameter. Often this is time, popularity, frequency, age, or relevance. That’s why feeds have proven useful for varying use cases like messages posted to a social network, upcoming flight departure times at an airport, or less frequent announcements or notifications about what’s new. Another great reason to have an activity feed in your app is to personalize the user experience. You want to highlight a selection of your content to the given user. This pattern is flexible enough to handle following the user’s friends, or following specific topics that are of interest. Spotify allows you to follow playlists and artists. Glassdoor allows you to follow a certain type of job and company Bandsintown allows you to follow your favorite bands. Spotify, Glassdoor and Sportslobster use feeds to provide content discovery across their platforms. This is particularly useful if your user doesn’t know exactly what they are looking for or if they are looking for something new. The web has been transitioning from “static sites” (where a content is pushed from the owner to reader) and into digital experiences that foster community interaction and contribution. activity feeds are the entry point if you’re looking to have a “lite” community aspect in your user experience. activity feeds can provide offline and online conversation points between a team (think basecamp or people discussing a facebook post). Feeds are a simple way to establish habits, growth and virality. Feeds Form Habits Apps have found that feeds provide the best way to create strong habits that hook users. Sites like Reddit, Facebook and Twitter have thrived because they create habits in the users. The primary habit is to check their feed for new content. It’s rewarding to visit a site and see new content you’re interested in. Feeds are a simple way to establish habits, growth and virality. If the app you’re designing has members, include an activity feed on your dashboard. This provides an organic interaction between members that help encourage and grow social community and form important habits. activity feeds accommodate the spectrum of user behavior, which are essentially browsing, searching, and contributing. activity feeds can be the go-to solution for a running timeline of recent activity of members. They are efficient and heuristic design solutions that have cross-platform adaptability. PART TWO Feed Features and Behaviors Delighting new and regular users by helping them transition through the empty/zero-state is essential for activation and retainment. Filling Feeds In our 13 tips for a highly engaging news feeds we cover everything from user experience to scalability. This guide covers everything (and more) a designer needs to start designing detailed and comprehensive activity feeds. In this section, we’ll cover how to quickly build user engagement into your feed! Following Suggestions Whether your app allows you to follow friends, topics, stocks, artists or any other concept, you’ll want to make sure users quickly start customizing their feed. A feed without friends is no feed at all. Regardless of the scale of your feed, you can improve the long term user experience of your feed by making it easy for your users to find new and old friends or colleagues. Let’s look at a few ways to make it easy for users to connect with their friends. A great example of finding friends can be experienced in Instagram's implementation. Being mobile first, they are limited on screen size. I believe this pushed them to discover a unique and powerful UI pattern. Instagram: Finding Friends Let’s say you’re following a user who posts consists largely of their adventures in Hiking the White Mountains of New Hampshire. If you tap into their profile, you will see a large “Following” button with a smaller carat button next to it. That control gives you a horizontal list of similar accounts. This is brilliant because it allows you to quickly discover accounts that are similar, which will ultimately fill your feed with more content you want to see. Suggestion Sidebar Both quora, twitter, product hunt and tumblr offer this kind of call to action. All three place it in the same spot (right column). Based on the commonality of the placement, let’s assume that it is the best place for this functionality. In terms of creating the best user experience, I would suggest combining Tumblr’s interactions with the “check to complete” sidebar of Quora. Combing a list to complete, with a preview in a hover really helps you “dive in”. It also helps you feel like there is so much more to explore in your feeds. Personalization and Push Notifications When Twitter started personalizing follow suggestions, they went the dogfooding route. Twitter created an experimental Twitter account, @MagicRecs. When that account was followed you would get personalized follow suggestions delivered to you. It was huge success both for users and Twitter. @MagicRecs was being actively monitored by Twitter Engineers, which allowed them to tweak it in a live and natural way. With their mobile apps, Twitter was able to re-engage users with push notifications to see MagicRecs follow suggestions. Social Connect Don’t neglect your email and social contacts! Allowing your user to connect to their email and social accounts is a great way to connect them with friends. If you’re going to include facebook, here is a great mobile resource to share and connect apps. Tip: Make sure to include external apps you’ve authorized in the “settings” part of your app. Encourage Conversations Conversations in feeds extend beyond comments on one entry. Hashtags and @mentions make it easy for user to have conversations across an entire app. If I create a post about Pearl Street in Boulder, CO, I can mention @getstream (including them in the post) and add a hashtag of #pearlstreet, which would include that post in the larger “conversation” of “#pearlstreet”. These two patterns are great ways to draw attention to specific content, as they easily pull additional people into your activities. You usually don’t need to be following someone to “@” them. @mentions are great to give someone public acknowledgment or to promote them to your followers You should think of the rule around distinction. Does your app handle @mention’s differently if it you start your sentence with an “@” vs @mentioning within your sentence? You may want to exclude conversations that start with @mentions from search results. Allow someone to report abuse. @mentions can be easily abused to attack other users. Since @mentions and #hashtags are standard protocol for feeds, we included them in our free Based UI Kit. Download it for free to learn more about common feed elements. Sharing Have you ever laughed at something and immediately shared it with a friend? I saw this on instagram and sent a text to my brother (who didn’t have instagram): View this post on Instagram A post shared by Coffee Interest (@coffeeinterest) on Apr 13, 2018 at 8:51am PDT Instagram makes embeds easy! Sharing can be done within an app or a timeline: Snapchat made sharing extremely fun within the app and accounted for a huge portion of their growth. Instagram followed suit by allowing you to send a post to an individual or a group of people. This helps content go viral. It also provides more engagement data that can be used to further personalize your experience through machine learning. Sharing to external apps: Make sure your designs have smooth and easy ways to quickly share to external apps like email, social networks, and embedding. As a designer, you want to make this action as easy as possible while boosting the user’s energy and motivation. Sharing feels good: This is a direct way to delight your users and attract new ones. The sharing user experience is full of potential to drive engagement, delight users, and retain users at key moments. Websites like Giphy have thrived by making it easy for people to share gifs they enjoy. Personalizing feeds You’ll also want to consider personalized feeds. Instagram and Quora do a great job of collecting relevant content based on your engagement. The goal in personalization is to help a user discover more content that they enjoy engaging with. In the case of Instagram, their machine learning is incredibly fast. If part of your “new years resolution” is to get fit, you may start following users who post a lot about fitness. Since this will be a new dynamic, you’ll need to manually search for a few users or tags. Once you engage through clicks or impressions, you’ll begin to notice new content in the “discover” part of the app. That content will reflect your new interests. Personalization drives users to follow more people. The more people you follow, the more content is in your feed. When your feed is full of engaging content, you stick around longer. Not only is it great for stickiness, but in the case of Quora, you can compile a digest email of personalized suggestions to get people to come back to your feed. PART THREE News Feed Types When you’re thinking about your activity stream design it’s good to know that there are roughly 3 different types of feeds. Flat feeds, aggregated feeds, and notification feeds. Flat feeds contain a simple list of activities. Common examples include your basic feed on Instagram or Twitter. Aggregated feeds are different from flat feeds since they group activities together. When you see entries like this: “Joe, Sam, Beth and 3 others liked your post”, you are looking at aggregation in action. Another example is Facebook’s birthday notifications: “72 people congratulated Josh for his birthday”. Notification feeds add the concept of “seen” or “read” to the activities. Many apps have both a notification feed and a flat feed. Take Ello for example: PART FOUR What are some popular examples of activity feeds? A feed provides an easy way to share, discover, and engage. It’s why they are so popular. They are a diverse utility for information. Tumblr The designers at Tumblr worked really hard to make it easy for end users to customize their feed. If you log into your Tumblr account, you’ll see a feed of the Tumblr accounts you follow. Clicking that feed gives you a nice slide out that allows you (as the user) to focus on the content of the account. However, if you click on the user, you’ll be directed away from your dashboard. That’s when a user’s custom theme comes into play. It’s nice, because you get a better feeling for the personality of the account you’re following. However, i’m not sure this is 100% in line with their design philosophy. According to their designer: The principles are, one, to be aware of everything you are asking the user to be aware of on the screen. Second, we keep the product (Tumblr) small and focused. We look to see if there are redundancies that can be taken out. Peter Vidani Tumblr If you’re looking to design an activity feed that functions similar to Tumblr, It’s a good practice to follow their two principals. A designer needs to be aware of what is potentially on a screen (in this case, an activity and how it will be presented within a feed). Keeping your users connected to what’s going on across your user experience is a great reason to include activity feeds in your product (more on this in a bit). Trulia The designers at Trulia leveraged the metaphor of “saving” and “liking” (essentially the same thing) which would create “boards” (lists). In the world of ecommerce, the same thing happens with a “wishlist”. Trulia has a beautiful user experience that really makes it fun to browse and collect homes that you like. An activity feed makes a lot of sense to be a core part of their user experience. Why? Well, let’s say Rob and Jane are going to buy a new house. They are working with their realtor, to move from Denver to Boulder. The main actors in this scenario are Rob, Jane and Henry. Allowing these people to collaborate and share on the Trulia platform is an ideal use case for a very simple activity feed implementation. Trulia’s activity feed is very basic, but creates a big win for user engagement and conversion. Go ahead, try and favorite something without an account. That small bit of UI probably accounts for a large portion of new signups for Trulia. It’s a great hook. PART FIVE News Feed Design Best Practices To start defining some best practices, let us look at how the activity stream spec defines an activity: In its simplest form, an activity consists of an actor, a verb, an object, and a target. It tells the story of a person performing an action on or with an object -- "Geraldine posted a photo to her album" or "John shared a video". In most cases these components will be explicit, but they may also be implied. You’ll notice that our example of “Josh (actor) added(verb) New Zealand (object) to his list of places to visit (target)” follows the spec. Feeds can be more complex and have many custom fields. Follow these best practices to design a clean and readable feed: 01 Feeds should be simple Always look to remove redundancies in each element. Be careful with names, avatars and other metadata. 02 Feed typography It’s helpful to always be mindful of the character count, line heights and font sizes. Readability is paramount in feeds. 03 Feeds abbreviations Abbreviations are your ally in feeds. Make sure you use the correct one (min not m). 04 Zero states Don’t ignore designing empty/zero states. The developers will have to code for it, you need to design for it. 05 Controls Don’t overload each entry with a bunch UI controls on the post (like, save, follow, retweet, etc). Keep engagement controls focused. 06 Testing Be aggressive in finding out what is most tangible and concrete to the majority of your users. Research can help you cull your design in the right direction. PART SIX What should you avoid when designing activity feeds? If you look at timeline patterns, you’ll likely notice how clean and simple the designs are. This is intentional, as you want users of your app to be able to quickly scan content and obtain correct context. You want to avoid clutter in feeds. Each feed entry may have a lot of custom data associated with it. This is where friction can occur between a designer and the rest of a product team. You’ll need to be creative to make sure you avoid clutter in your activity feed. Avoid making big changes to your feed. When Instagram switched from a chronological feed to their algorithm based feed, they upset a lot of their users. You should avoid a chronological feed if you know from the outset that you’ll want to algorithmically display the feed order (based on machine learning). With Stream, you can do both. It doesn’t have to be a matter of avoiding either format. It needs to be about what is mutually beneficial for the business and users. Additionally, avoid having a blank feed. First, you can make sure that the user completes a “who to follow” type of screen before seeing the feed. A very simple solution is to show older posts for people you follow. Design “users to follow” as a part of your onboarding and then populate the feed with some of their recent entries. Another thing to watch out for is spammers creating a lot of content and flooding the feed for your users. Stream’s analytics detects these common type of feed issues. PART SEVEN Activity Feed Design UI Kits and Patterns iOS Pinterest UI If your app is going to use a pinterest style feed, this Sketch kit is perfect for you. link source perm_identity @bizzaman file_download download Based: comprehensive UI Kit for feeds A versatile Feed UI Kit for Sketch. If you’re looking to add specific feed patterns into your app, this is the kit you need. link source perm_identity @joshtilton file_download download Hello UI Kit If your app is going to use a pinterest style feed, this Sketch kit is perfect for you. link source Pheonix UI Kit This free kit has a lot of great stuff packed in it! Adrian did a great job with it. It has an activity tracker feed, a timeline feed, favorites and latest feed with a nice onboarding screen. Available for Photoshop too. link source perm_identity @adrianchiran file_download download Sketch Blog UI Kit link perm_identity file_download Money Activity Feed link perm_identity file_download Design Social Networking link perm_identity file_download Inspired by Instagram link perm_identity file_download Money Activity Feed link perm_identity file_download Sportify UI Kit link perm_identity file_download -FIN- In Conclusion This guide was created to help make designing an activity feed or notification feed easier for you. We hope you picked up some useful information! If you're interested in getting in touch with us, please head over to the contact page and let us know how we can help. If you want to try our API out in an interactive demo, head over to our Getting Started page now.