Background

This task describes how each longtext article should look like and behave:

• Made up of an article title, sections, sub-sections and image/s.
• Navigate by scrolling top to bottom.
• Navigate to another longtext article view within the same category.
• Navigate to the home & category view.

Description/User story

As an 18-24 year old that clicked on a social/paid ad,
I want to land on an article that has longtext & images,
so that I can get an in-depth understanding of the subject matter.

Design

List of all the articles we are going to use for Long-text microsite.

Includes:

• Article Title: This will be displayed at the top of each article e.g. Nelson Mandela.
• Content:
  • Sections and Subsections: All content sections and subsections sourced from English Wikipedia mobile article. By default, all sections, excluding the introduction(lead paragraph), will be in a collapsed state for a concise, user-friendly view.
  • Images and Multimedia: All visual and multimedia elements from the Wikipedia article will be incorporated.
  • Related Articles: At the end of each article, there will be a "Related Articles" section. Its presentation will mirror how it’s displayed in Wikipedia’s mobile web version. Related articles in this case would be other articles within the same category as listed here. E.g at the end of reading a Rosetta Stone article, we would show Ancient Egypt, Statue of Liberty &/or Buckingham Palace as related articles.
  • Fine Print: The content will be accompanied by a note at the very bottom stating, "Content is available under CC BY-SA 4.0, unless otherwise noted."
  • Terms and Privacy: Just below the fine print, links to "Terms of Use" and "Privacy Policy" will be provided for user reference.

Excludes:

• Branding: The Wikipedia wordmark will not be present.
• Header/Chrome: The standard Wikipedia header or Chrome will be omitted.
• Blue Links: Hyperlinks will not be present.
• References: All footnotes and references will be removed.
• Toolbar: The toolbar, which includes options like language selector, downloading PDFs, and editing, will be excluded.
• Info Box: The information box will not be incorporated.
• See also: We will exclude this one too.

General Notes for Design:

• Font & Typography: Render the text as it appears on the mobile version of Wikipedia.
• Collapsing mechanism: Retain the same behavior for collapsing and expanding sections and subsections as in the mobile view of a wikipedia article.
• Image placement & size: Maintain the image placements, sizes, and captions as they appear in the mobile version.
• Scrolling behavior: Keep the scrolling experience consistent with the mobile version of Wikipedia.

a) Successful states
b) Error states

Acceptance Criteria

• Users can view article title and text under the lead section.
• Users can view images in line with the text, similar to the mobile web experience.
• Users can collapse sections to view more text + sub-sections, similar to the mobile web experience.
• Users can navigate to related articles at the bottom of the article, similar to the mobile web experience.
• Users can view fine print, terms & privacy at the end of the page, similar to the mobile web experience.
• Users will not see items listed under the exclusion list:
  • Branding: The Wikipedia wordmark will not be present.
  • Header/Chrome: The standard Wikipedia header or Chrome will be omitted.
  • Blue Links: Hyperlinks will not be present.
  • References: All footnotes and references will be removed.
  • Toolbar: The toolbar, which includes options like language selector, downloading PDFs, and editing, will be excluded.
  • Info Box: The information box will not be incorporated.
  • See also: We will exclude this one too.

Test Scenarios

TBA

Open questions

• Should a user be able to view & navigate to highlights?
  • No.