I’ve built a scrollytelling site that animates through sections using some complex scroll interactions.
While doing UX testing to prepare for launch, almost everyone gave the feedback that it’s too much scrolling — which is hard to deny, and also a big accessibility hurdle.
What I’d like to do instead of (or in addition to) the scrolling is to have buttons which the user can click to advance through the piece, almost like “slides.”
(Surely, if I were more experienced I would have known better and come up with a better layout or known what Javascript library to make this a simple user experience, but I’m really just a novice — so I’m hoping to learn from and share my mistakes in public, with all your help.)
The solution I’ve come up with so far is to link to anchor divs at the exact points in the scroll interaction, matching the “stopping points” in the animation. This wasn’t difficult, all I had to do was add a div inside the scrolling in view parent, position:relative and height: 100% so that I could place empty divs with IDs so that I could link to them, and place them with position: absolute at different percentages from top which match perfectly the percentages in my animation. (I’ve given the anchor divs a temporary color fill, just so that they’re visible while I’m designing.)
In my site, (read-only link here), I’ve added a temprary “nav menu” on the left hand side of the first “Chapter” in the story. This provisional nav menu contains static links to the divs placed at regular percentage increments from the top of the scroll parent container The numbered buttons seen on the left demonstrate that the linking concept does indeed work as intended: clicking on them properly advances through the scroll interaction parent’s container.
What I’d like to do is instead of the numbered buttons is to have two arrows on either side of the screen, where the right arrow advances to the next anchor point, and the left arrow goes to the previous. I’m struggling to figuring out how to structure this… I imagine that the solution involves placing the two arrows as link blocks with an empty target, and using some custom code that determines the target of the link.
Can anyone help out?