Page MenuHomePhabricator

[EPIC] Explore feed visual design refresh
Closed, ResolvedPublic

Description

Visuals

👉 Zeplin
👉 Prototype

Design principles / general

  • Avoid cards in cards
  • Separate content from features
  • Eliminate redundancy (e.g. repetition of dates)
    • Experiment with this: Keep dates sticky (e.g. On this day) when scrolling to provide orientation (titles) and avoid repetition (dates
  • Use alternation in presentation of content, after bigger elements show smaller ones
  • Less icons (e.g. for sections like In the news)
  • Apply pinch to zoom gesture whenever possible
  • As little truncation as possible (for text and horizontal content)
  • Allow for more easy scanning (more visuals, better teasers)
  • Remember the user‘s scroll position when possible, e.g. when
    • ...revisiting the feed at a later point in time
    • ...transitioning to a detail screen
  • Reduce amount of font styles, bases on overhauled baseline grid (4sp) and typographical system
    • font-size: 14sp;
      • line-height: 21sp (Featured/random article)
    • font-size: 16sp;
      • line-height: 24sp (Picture of the day, Because you read, In the news, On this day, Recent deaths)
      • line-height: 28sp; (Featured/random article)
    • font-size: 20sp;
      • line-height: 24sp; (Subtitles)
      • line-height: 28sp; (Longer text in bold)
    • font-size: 24sp;
      • line-height: 32sp; (Titles)
      • Exception: Droid Serif (Article titles)
  • Show language indicator in cards only when multiple languages are set in the app
  • Show Edit card languages in cards only when multiple languages are set in the app

Featured article

  • Output the first sentence completely
  • Image format → 2:1

Top read

  • Formerly trending → rename to “Top read”
  • Rank uses a transparent fill and gradient on border
  • Brainstorming: is there a source we can use to indicate why it’s trending (instead of showing the article description) ?

Picture of the day

  • Image format → keep original image format from Commons
  • Tapping the image leads to the new image detail page

Because you read

  • Lead item uses blurred/upscaled version of thumbnail image and applies it as a background color with a white overlay to make text legible

In the news

  • Prioritize articles with images for first item
  • Horizontal swipe allows users to check out other items
  • New interface element: dots to indicate to users that there’s more content
  • Image format → 2:1

On this day

  • New design
  • Card teases one article from the featured on this day event
  • When tapping the year (1988), users should be scrolled to the corresponding event on the detail page
  • Image format → 2:1

Random article

  • Uses the same design as “Featured article

Today on Wikipedia

  • Item can be removed, a Today on Wikipedia → link has been below Featured article

Suggested edits

  • Outputs 3 suggestions per day (1 per edit type)
  • Article description image format → 2:1
  • File image format → keep original image format from Commons

Todos / Feedback processing

  • Move “More X (...)” → arrow to the right side? (Matthew)
    • 👍 Moved it to the right side. Feels more natural.
  • Perhaps it might be helpful to make the header (card header) sticky in some way? As the cards can be quite long right now? Carolyn
    • 👍 Added this the conceptual descriptions, we’re going to experiment with it.
  • Redesign without obfuscate thumbnails for Top read and Recent deaths (Carolyn, Matthew, Alex, Prateek)
  • Dates not bold to add more contrast? (Matthew)
    • 👎 To keep it consistent with other areas of the app, we’ll use bold. Contrast is provided through different type sizing: 16sp for the date and 24sp for the titles
  • Consider a card group for “Top read”, “Because you read” and “Recent deaths” (Alex)
    • 👍 Great idea → applied it in the latest designs.
  • Make the feed more visual, like the iOS app store feed (Alex)
    • 👍 Tweaked this here and there (Top read, On this day). But the “bread and butter” of Wikipedia is text, so I’d say the recipe is a mix of both.
  • Square icons for language? Are they understood? (Prateek)
    • 👍 This feedback will be considered at a later stage as this affects many other areas of the app.
  • Consider not showing the article description in cards on Explore, as they’re redundant in most of the cases (Alex)
    • 👎 You definitely have a point here, but since we want to raise awareness for article description editing in the feed as well (Suggested edits), we should keep them so users learn that they exist.
  • Infinite scrolling or should we think about “an end” of the feed. E.g. a pattern from newspaper articles → after scrolling to the end the next article is teased (Alex)
    • 👍 We’re going to consider adding sticky dates so users will know when they’re scrolling content from another date. In regards to the “scroll lock” (end of feed):
      • I mentioned this to Android team yesterday and the tone is that users should have choice when to scroll further and wenn to stop.
      • From an engineering standpoint, this is also quite a hack on Android.
  • Apple Photos uses large elements in the beginning and then gradually reduces the sizes of the elements the more users scroll. At the end, there’s just a list.
    • 👎 We’re going to stick with the current concept of alternation, mainly because this is a visual design refresh rather than a functional one.
  • On this day:
    • Perhaps the article cards could just be shown on click through? (Carolyn)
      • 👍 This makes sense, rather than allowing users to scroll vertically, we’re going to only tease one card w/o the possibility to scroll. Check out the latest designs.
    • Carousel dots also look a little confusing to me in relationship to the date dots on this card, maybe differentiating color here could help? (Carolyn)
      • 👍 Possibility to scroll horizontally in “On this day” has been removed.
    • Curious how the transitions might help to make the transition from the article card to the article view nice a seamless? (Carolyn)
      • 👍 Transitions will be explored during development. Currently there’s lots of room for improvement in “On this day“.
  • Rename to “Trending” to “Top read”, according to discussion with Carolyn
  • Process Sudhanshu’s feedback
  • Tablet designs (Cooltey)
    • Created a separate task for it → T261878
  • How are we displaying content when multiple languages are set? (@Charlotte)
    • In the same manner we do it currently.
  • Fill in analytics questions, usage before and after (@Charlotte @schoenbaechler)

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald Transcript
Charlotte lowered the priority of this task from Medium to Low.Jul 14 2020, 2:48 PM
Charlotte raised the priority of this task from Low to Medium.Aug 19 2020, 3:41 PM
scblr renamed this task from Explore feed design refresh to Explore feed visual design refresh.Aug 25 2020, 1:18 PM
Charlotte raised the priority of this task from Medium to High.Aug 26 2020, 3:56 PM

Feedback from today’s design review after showing this prototype:

  • @cmadeo
    • Curious how the transitions might help to make the transition from the article card to the article view nice a seamless?
    • On first look, the red in trending makes it seem potentially that the trending items are ‘falling’ in ranking...generally also am weary of placing elements over people’s faces, perhaps the ranking numbers could appear on the left on LTR?
    • Small note but the trending is a day late every day (that’s why the date is different)
    • For on this day, perhaps the article cards could just be shown on click through? The carousel dots also look a little confusing to me in relationship to the date dots on this card, maybe differentiating color here could help?
    • Really like the Because you read highlight colors!!
    • For because you read, think about an alternative treatment when there’s no image
    • Perhaps it might be helpful to make the header (card header) sticky in some way? As the cards can be quite long right now?
      • RS: Or sticky date?
  • @mwilliams
    • Covering the images feels a bit odd, especially with red, a color typically used for errors or something going wrong. Having a loud color and large number on the right also felt like it made the scanning, legibility off R>L
    • Thinking about the line between platform design decisions and our overall style guide in regards to arrow before the cta, borders, shadows, etc.
    • Should the date at the top be regular and not bold? Wondered if the two bold titles should have a bit more contrast.
  • @Prtksxna
    • + 1 to the comments re: covering the thumbnails
    • Questions if the square icon with the language is understood by users
      • RS: iOS is not using the icons, it’s labelling the source, e.g. “From English Wikipedia”. Should be considered for Android too, since this feedback has been mentioned before.
    • Bug → “Trending” is using the English label / title in Japanese
      • RS: Will file a bug
  • @alexhollender
    • Consider a card group for “Trending” and “Because you read”
    • Mentions the app store feed on iOS, which is a really nice feed because it’s so visual. Is there a way to make Explore more visual as well?
    • Questions if the article (title) descriptions needs to be shown since it’s repetitive of the article’s text in most cases
    • In regards to the feed experience, how far do people scroll?
      • Should there be infinite scrolling or should we think about “an end”. E.g. a pattern from newspaper articles → after scrolling to the end the next article is teased
      • Apple Photos uses large elements in the beginning and then gradually reduces the sizes of the elements the more users scroll. At the end, there’s just a list.
    • Likes the custom treatment of “Trending”, but other styles should be explored, e.g. Netflix (sent on Slack)

Thanks all!

scblr updated the task description. (Show Details)

Thanks much for collecting your thoughts @SGautam_WMF. I copy/pasted it here for transparency / traceability, hope that’s fine? I’ll also reply here!


General feedback
  • Visually it’s much improved from the current design and I am confident that it’s going to receive positive feedback from targeted audience.
  • On sections in general
    • How are we deciding which sections to display by default for first time users?
    • Is sections like featured article or image of the day has come from user research?
    • Shall we club some of the sections together(because you read, trending, random articles, in the news) in one and kind of create infinite/finite scroll? E.g. google news, Quora, facebook & twitter feeds?
  • Is “Search articles” placeholder text is a replacement of “Search Wikipedia”?
  • New Section title styling looks fresh though I am just wondering does it kind of break the flow and take user’s attention away from the main content? Maybe seeing one article after another is more interesting.
  • Is Because you read is supposed to be user’s previously read articles? If so, shall we instead have more recommended reading?
  • Every section card has a language button, does it need to be repetitive for every section or can we have it as a global setting? Also not sure why does the Picture of the day section also have a language option. Does different wiki have a different image of the day?
  • How would the experience look like for a non-english Wikipedia reader? As we know some of the sections don’t change quite regularly on non-english wikis.
  • Are we going to retain the existing design when a user taps on More random articles or More on this day CTA?
Overflow menu
image.png (448×458 px, 165 KB)
image.png (430×458 px, 156 KB)

In the current version of android app, the overflow menu has the following items - Hide this card, Edit card language, Customize the feed. It seems like in the new design the language option is coming out of it and in that case we are left with only two options(hide this card, customize the feed). Shall we continue having these two options or remove the overflow menu from the cards and have some other ways of hiding the card and customizing the feed for e.g. google news has a slider sort of icon on top of card which let you control them.

In the news

image.png (490×460 px, 219 KB)

  • What scrolling right would do? Will it show me more articles related to this news(In Mali, President…) or other news items.
Suggested edits

image.png (846×474 px, 333 KB)

  • I like the actionability here.
  • Maybe this is a good candidate to bring all cards sideways(pagination style one).
  • Maybe tapping on any of these cards could open a modal window for users to focus on tasks? They can be presented with options like Add article description ok or skip, Add image tag ok or skip, etc.
  • Maybe it’s worth checking Google maps contributor field.
  • Do these buttons(Add article description) need to be big enough? Can it be a simple link text or an uncontained button?
On this day

image.png (822×464 px, 172 KB)

  • How about we add “In” to copy so it can read like “In 1988” “In 1882”.
  • Is there a reason why timelines are not connected?
In T253200#6422873, @schoenbaechler wrote:
On this day

image.png (822×464 px, 172 KB)

  • How about we add “In” to copy so it can read like “In 1988” “In 1882”.

It won't work in all languages, and if we're doing a timeline it makes more sense to have just the year.

@SGautam_WMF

General feedback
  • Visually it’s much improved from the current design and I am confident that it’s going to receive positive feedback from targeted audience.

Thanks, glad to hear this!

  • On sections in general
    • How are we deciding which sections to display by default for first time users?

Current default:

  1. In the news
  2. On this day
  3. Trending
  4. Today on Wikipedia
  5. Randomizer
  6. Featured article
  7. Picture of the day
  8. Because you read
  9. Suggested edits

Suggested new default:

  1. Featured article
  2. Top read (formerly Trending)
  3. Picture of the day
  4. Because you read
  5. In the news
  6. On this day
  7. Random article (formerly Randomizer)
  8. Today on Wikipedia
  9. Suggested edits

Its order is now mainly based on visual criteria to alternate between smaller and bigger bits. Our plan is to collect datadata first and then decide on prioritization from there.

  • Is sections like featured article or image of the day has come from user research?

Honestly, I’m not sure how the initial areas have been chosen. Will follow up on that with @cmadeo.

  • Shall we club some of the sections together(because you read, trending, random articles, in the news) in one and kind of create infinite/finite scroll? E.g. google news, Quora, facebook & twitter feeds?

What would be the benefit of this? It’s an infinite scroll currently. Happy to chat about your ideas here.

  • Is “Search articles” placeholder text is a replacement of “Search Wikipedia”?

A glitch in the designs. Updated it, it should still be “Search Wikipedia”.

  • New Section title styling looks fresh though I am just wondering does it kind of break the flow and take user’s attention away from the main content? Maybe seeing one article after another is more interesting.

What do you mean by one article after the other? Do you mean one section after the other without titles? If yes, I’d argue that the section titles work as anchors, to educate users about the content they’re looking at.

  • Is Because you read is supposed to be user’s previously read articles? If so, shall we instead have more recommended reading?

The first highlighted item is the one that the user has read. The others are suggestions. Do you think it’ll make sense to use a subtitle to make it more clear? E.g.

“Because you read”
[article that the user has read]

“We’re suggesting”
[article that are related to the one that the user has read]

  • Every section card has a language button, does it need to be repetitive for every section or can we have it as a global setting? Also not sure why does the Picture of the day section also have a language option. Does different wiki have a different image of the day?

The language button will only be shown when multiple languages are set in the app. Removed the one from picture of the day (design glitch). Good catch!

  • How would the experience look like for a non-english Wikipedia reader? As we know some of the sections don’t change quite regularly on non-english wikis.

We’re not changing the current functionality. If content for a specific section is available, we are showing it. If not, then it’s not displayed.

  • Are we going to retain the existing design when a user taps on More random articles or More on this day CTA?

For now, yes! But there will be a follow up task to get this work done soon.

Overflow menu
image.png (448×458 px, 165 KB)
image.png (430×458 px, 156 KB)

In the current version of android app, the overflow menu has the following items - Hide this card, Edit card language, Customize the feed. It seems like in the new design the language option is coming out of it and in that case we are left with only two options(hide this card, customize the feed). Shall we continue having these two options or remove the overflow menu from the cards and have some other ways of hiding the card and customizing the feed for e.g. google news has a slider sort of icon on top of card which let you control them.

We’re keeping the current functionality. If multiple languages are set, the language indicator will be added to the card. But you’re right, “Edit card languages” should only be shown when multiple languages are set in the app. Added it to the task’s description 👍.

In the news

image.png (490×460 px, 219 KB)

  • What scrolling right would do? Will it show me more articles related to this news(In Mali, President…) or other news items.

It’ll show other news items (same functionality as now).

Suggested edits

image.png (846×474 px, 333 KB)

  • I like the actionability here.

Thanks!

  • Maybe this is a good candidate to bring all cards sideways(pagination style one).

Good point, included that in the card’s description! It’ll be great to show one suggestions per day (for each edit type, in total 3).

  • Maybe tapping on any of these cards could open a modal window for users to focus on tasks? They can be presented with options like Add article description ok or skip, Add image tag ok or skip, etc.

It’ll open the familiar edit flow per edit type. After completing the edit, users are taken back to the Explore feed and get a “Enjoyed this? Help us add more!” snackbar to have choice whether they want to continue or not.

  • Maybe it’s worth checking Google maps contributor field.

Will have a closer look at it 👍.

  • Do these buttons(Add article description) need to be big enough? Can it be a simple link text or an uncontained button?

The new card style defined in previous designs uses these buttons. Some people love it, some people hate it. But there’s evidence from Google that slight background colors work to increase conversion → read more about it here.

On this day

image.png (822×464 px, 172 KB)

  • How about we add “In” to copy so it can read like “In 1988” “In 1882”.

I see that @Charlotte already answered this one. Makes sense

  • Is there a reason why timelines are not connected?

The new design is a different, it only shows one specific event. Check it out!

Charlotte renamed this task from Explore feed visual design refresh to [EPIC] Explore feed visual design refresh.Aug 31 2020, 5:16 PM
Dbrant claimed this task.
Dbrant closed subtask T261676: Redesign SE feed card as Resolved.
Dbrant closed subtask T261672: Redesign in the news card as Resolved.
Dbrant closed subtask T261673: Redesign on this day card as Resolved.