Background

This task describes how each highlight should look like and behave:

• Made up of an image + text that's 1-4 sentences long OR <=300 characters.
• The image on each highlight is related to the text.
• Each highlight has a maximum of 5 slides.
• Navigate left or right to view all the slides.
• Navigate to another highlight 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 media ad,
I want to land on a highlight that has a collection of text & related images,
so that I can get a quick understanding of the subject matter.

Design

List of all the content to be used.

Highlight Display Guidelines

• Full-Screen layout: Each highlight should be displayed using the full screen, maximizing the device's entire viewport.
• Content division: Start with a default layout where 50% of the viewport height is designated for the text and the other 50% for the image.
• Image orientation & display:
  • Portrait images: Use the full reserved space to maximize visibility.
  • Landscape Images: Adjust dynamically based on image dimensions, ensuring it doesn’t appear too small.
• Adaptive behavior: If the text content is brief, the image can expand into the space not occupied by the text. Conversely, if there's more text, the image area can be reduced. Ensure all text is visible without scrolling. This means, in cases of more extensive text, the division might look like 70% text and 30% image.
• Highlight Title: Display this only the first highlight. Fine-tuning of its repetition or introduction of a cover can be decided later.

Swipe-Up navigation:

• "Swipe up for more" is displayed at the bottom of each highlight.
• Upon interaction, take user to next part of the highlight.
• After the user's first interaction with the swipe-up feature during a session, the "swipe up for more" instruction will no longer be displayed. This instruction will reappear in a new session

Scroll behavior

• Implement a full-page scroll similar to platforms like Tiktok or Youtube shorts. Upon swiping up, the user should experience a snap effect, transitioning directly to the next content piece without any partial overlaps.

Fixed Status Bar:

• A horizontal status bar, fixed at the bottom, indicates progress through the highlight as the user scrolls.
• The bar fills up proportionally to the scrolled content, reaching full when the user arrives at the end of the highlight.

End of Highlight Sequence: Once the user has finished reading the highlight, transition smoothly to a new highlight. This ending view might contain options like "More like this" but that would be explored as part of other task.

Design file

Acceptance Criteria

• On the 1st page, users can view image, text and swipe for more instruction.
• Image & text presentation is adaptive to the layout of the image (landscape, portrait) ensuring that the image is properly visible; and together with the text, they all fit into 1 page without the users scrolling to read the text.
• Swipe for more instruction only appears once during the users session.
• Every highlight has 2-5 pages of content with the bottom status bar indicating to users their reading progress of the entire highlight.

Test Scenarios

Open questions

• Should a user be able to view & navigate to the longtext article??
  • No.