Page MenuHomePhabricator

[Design backlog] Update 'In the news' card
Closed, ResolvedPublic

Description

Overview

Summary of project
Create a new presentation for the In the news card, which highlights the most recent news story and visually distinguishes the card from other cards on the feed.

Why are we doing this?
The In the news card currently features the five most recent news articles as a list. We've received some feedback from users that the content on this card can appear stale as stories may appear on the card for long periods of time. Additionally, the current presentation of the In the news card is visually similar to other cards on the feed (Trending, Because you read).

Feature success criteria
Higher clickthroughs on the In the news card

Design

Single story cards
Single story, scrolling articles
In this design the most recent news story is the only story featured on the card. Below the header image and summary are small scrolling cards with related articles. At the bottom of the card is a link to a popover where the top five news articles are displayed along with their related articles.

Mocks and prototypes

InVision: Prototype with popover

Feed cardDetail view
In the news - Scrolling articles single card 01.png (667×375 px, 180 KB)
In the news - Scrolling articles single card 02.png (667×375 px, 217 KB)
Zeplin: https://zpl.io/1uLnB1Zeplin:https://zpl.io/ZgRyEK
Video: https://youtu.be/l_otLS27qvsVideo: Coming soon

iPad designs

LandscapePortrait
New feed cards iPad - landscape.png (1×1 px, 1 MB)
New feed cards iPad- portrait.png (1×768 px, 992 KB)
Zeplin: https://zpl.io/Z1FFhvrZeplin: https://zpl.io/Z2IoNq

Design details

  • On the horizontal cards all lines (title and description) should be truncated at one line with ellipses
  • If the card does not have an image do not show a placeholder (expand text area to fill)

Feed card logic

  • Only show card in feed when a new news story has been added (not daily)
  • Feed card only shows the most recent news story

Event Timeline

If the first article mentioned in a news item does not have a lead image, would it be possible to use the lead image from subsequent articles mentioned in the news summary?

JMinor renamed this task from [Design backlog] Update 'In the news' card to contain a list of horizontal scrolling cards. to [Design backlog] Update 'In the news' card.Apr 18 2017, 4:57 PM

Totally gut reaction, but I like the "Single story, scrolling articles" best. Looks less generic than the "single story, exposed articles" and less advertorial than the full horizontal option.

Since this is a big task, we need to clarify with @JMinor if it can fit into 5.5.

cmadeo updated the task description. (Show Details)

@cmadeo for landscape (on iPhone and iPad) should the cards match the explore layout , be equal width columns, or something else?

Simulator Screen Shot May 22, 2017, 10.04.52 AM.png (750×1 px, 220 KB)

Simulator Screen Shot May 22, 2017, 10.04.47 AM.png (750×1 px, 478 KB)

@JoeWalsh Sorry for the late response, I should have had a design for this before leaving for vacation.

I'm a little worried that the chronological order is being lost in the two column approach. Additionally the horizontal cards are a bit truncated in the smaller of the two columns.

Would it be possible to do a one column design instead like the one below?

iPad.png (2×768 px, 746 KB)

If this seems reasonable I can add it to Zeplin.

Thanks!

@cmadeo yeah, that's no problem. Since the screenshots, I had updated it to be two equal width columns (but that still has the chronological issue).

My margins are off (I can set it to a fixed pt value or % of the full width), but I did a quick implementation of the single column:

Simulator Screen Shot May 30, 2017, 9.33.41 AM.png (1×2 px, 690 KB)

Simulator Screen Shot May 30, 2017, 9.33.39 AM.png (2×1 px, 721 KB)

And here's the equal width implementation for reference:

Simulator Screen Shot May 30, 2017, 9.35.49 AM.png (1×2 px, 1 MB)

Simulator Screen Shot May 30, 2017, 9.35.45 AM.png (2×1 px, 1 MB)

@JoeWalsh thanks! My preference is for the single column primarily due to the chronological issues with the two column approach.

I was using a 600px width on the single column (to match the column widths on the other detail views), open to a better approach though.
Also would it be possible to slightly increase the horizontal card length as we have more room now? Perhaps to 270px?

Thanks!

@cmadeo sounds good - here's 600 fixed width with 270 width cells:

Simulator Screen Shot May 30, 2017, 1.07.54 PM.png (1×2 px, 611 KB)

Simulator Screen Shot May 30, 2017, 1.07.52 PM.png (2×1 px, 698 KB)

On the phone, it'll be fixed width to the shorter dimension (for example, 375 on iPhone 6) Actually, would it be better to be full width portrait, 600 width landscape for the phone?

@JoeWalsh yeah, let's do the full width portrait, 600 width landscape on the phone.
These are looking really good, I wonder if we'll want to do some sort of fade on the L/R of the horizontal scrolling area later on as they might look a bit cut off as they leave the background card (for now I'll just file a design backlog ticket)

I mentioned this on T166241, but it'd be great to increase the padding below the horizontal cards to 15px.

Thanks!

ABorbaWMF subscribed.

Tested on iPhone 7+ with iOS 10.3.2, iPhone 5s with iOS 10.2, and iPad Mini 2 Retina on 10.2.1 on App version 5.5.0 (1142)

Tested the news feed a bit. Everything appears to be working.

JMinor awarded a token.