Newsfeed UX
Actions for Web
General Newsfeed
-
The continuous loading call should be made just before the end of the page. This means that the scrolling action will be smooth and continuous, without any need to pause for the next batch of content to be fetched. -
Consider giving the wire CTA a clearer, and more meaningful CTA. -
In order to increase comments, the add comment text input should be visible by default. Having it appear by default makes commenting more actionable. -
Create more meaningful messaging to encouraging commententing. E.g. ‘0 comments’ -> ‘Be the first to comment’. E.g. ‘7 comments’ -> someChannel and 6 others commented. -
If possible, the highest weighted comments should be shown by default. -
A show more comments CTA would load all comments in chronological order. -
Images should load only when they are in the viewport, or about to enter the viewport. Note: On average around 60 images are loaded on the newsfeed on an initial load. -
Images should be resized/cached where possible inorder to reduce the image size. -
We noticed instances where the banner images of boosted channels in the newsfeed were upwards of 500kb. -
Consider reducing the number of words per line to around 10-12 -
Reduce the post width -
Increase the text size and line spacing accordingly. -
Remove the translate option (globe). A translate option already exists within the post dropdown. -
Consider removing ‘Notices’ from the right-hand side. This space could be used to push suggested channels or groups. We should investigate a better means to display such notices. -
Consider shortening/simplifying the post datetimes. They currently display as AUG 5, 2019, 2:16:44 PM
-
In a timeline scenario for recent posts, time ago values could be of benefit. E.g. A few minutes ago. Yesterday at 11:12, Wed 7th Aug. -
Hovering over the user friendly datetime could display the full datetime value.
Boosted Channels
-
Separate boosted posts and boosted channels. -
Display within the main timeline at regular intervals. -
Remove any banner image in order to make the experience cleaner and less noisy. -
Clearly present subscribe CTA on all boosted content.
Post Creation
-
Narrow the width of the text area input and increase the text size and line spacing -
Give greater visual emphasis to the ‘Post’ button, as it is the primary CTA. -
Other CTAs such as attach, paywall etc should be moved away from the submit button and deemphasised somewhat. -
Introduce a posting type visual cue, displayed once the post button is pressed. -
Once the post is successfully made, a notification should be displayed. -
Remove the hashtag option (CTA), as this functionality exists when creating a message (triggered once a # is entered) -
The selected NSFW options should be visible after selection. This will improve clarity by displaying the NSFW options right up until clicking Post. -
Consider removing Add Post functionality from the Discovery/Search sections of the application. -
Give consideration to moving the Add Post functionality within a modal window. This will provider greater screen real-estate for creating longer posts, and allow post creation from anywhere within the web application.
Simplify the filtering
-
The management of the topics that a user subscribes to should reside elsewhere. Allowing the user to add new subscribed topics directly on the news feed is adding unnecessary bloat. -
A user should either be able to view all topics, or scope their feed by a single topic at any one time. -
This more explicit approach would be simpler to understand and use. -
Mobile designs and responsive should follow web
Wireframes
Simply commenting concept
- Always visible comment input
- Show highest weighted comment https://invis.io/VATHLKZG9WH#/379642072_Commenting
Simple newsfeed filtering concept https://invis.io/VATHLKZG9WH#/379355214_Filter_Concept
Post content concept https://invis.io/VATHLKZG9WH#/379337304_Post_Concept
Boosted Content and Channels Concept https://invis.io/VATHLKZG9WH#/379331761_Boosted_Content_Concept
Actions for Mobile
-
Relocate Groups so they don’t interfere with the news feed. Perhaps towards the lower navigation, or via the introduction of a sidebar menu. -
The location of the newsfeed button (home icon) should be the first item in the navigation, not the second. -
Explore the benefit of introducing a browse by type feature into the news feed. E.g. photos, videos, blogs etc. -
Remove Boostfeed tab, and introduce boosted content into the timeline in a similar fashion to the Web version. -
Following on from the Web related actions, the mobile news feed could included not only boosted posts, but also boosted channels and blogs. Scrolling is part and parcel of the mobile experience, so introducing boosted content into the feed should benefit total number of impressions of boosted content on mobile. -
Display boosted / recommended channels as part of the newsfeed, with prominent ‘Subscribe’ CTAs. -
Display boosted posts as part of the mobile newsfeed.
Edited by Bill Ottman