brand icon indicating copy to clipboard operation
brand copied to clipboard

[Feature request] Story scroll river

Open nsolerieu opened this issue 1 year ago • 3 comments

Problem

As we scale the F2 template we noticed the usage of the river as a primary utility to present value propositions and visuals. The repetition make the page vertical flow very heavy and doesn't offer the variety needed to fit the often large features sets. As we have established a framework to scale our UI demos, we are looking for way to improve the reading/scroll experience for the user and open possibilities for our PMM and Writers.

Typical page featuring many stacked rivers

Suggested solution

Adopting an sticky element that update on scroll would allow to extend the scroll narrative while reducing visual load. The visual would sty fixed to the same position while the text update.

Desktop

https://github.com/user-attachments/assets/21aee994-8461-4a25-8d65-317a358431ad

Mobile

https://github.com/user-attachments/assets/950df1fe-7e4e-49c2-bfa6-c4c68da19a9c

Fallback: static (regular) rivers

Urgency

This request come from the solution page template project where we are expecting lots of river and complex, industry specific narrative that could use this upgrade. Project is expected to ship mid-late july

nsolerieu avatar Jun 20 '24 22:06 nsolerieu

Here are some additional specification (circa 2023)

These have been reviewed by accessibility:

In order to accommodate people with cognitive or visual impairment that are unable to visually process information because of complex visual motion we offer the ability to disable the stack effect and simply collapse the section into rows.

To optimize for harm reduction (for user that know that have an issue with fast motion perception) we suggest to enable the collapsed mode for users with prefers-reduced-motion active.

Includes:

  • Responsive mobile
  • Accessibility mode
  • Video support
  • Layout

Image


@jesussandreas any extra notes/comment from the recent copilot workspace ship? Especially around accessibility?

nsolerieu avatar Jun 21 '24 17:06 nsolerieu

Added further animation specs here

Image

nsolerieu avatar Jun 24 '24 22:06 nsolerieu

This has shipped for React in 0.35.0. Interface guidelines are up-next.

rezrah avatar Jul 26 '24 10:07 rezrah