0

I see some interesting UI behaviour on this landing page which I've not seen before, I'm trying to do some research on similar implementations but I'm unsure of the appropriate UI terms that designers might be naming such behaviour with. I'd describe it as some sort of vertical scrolling carousel with a progress bar, though vertical scroll and carousel feel like contradicting terms to me.

Can anyone advise what the correct terms would be that designers would user to describe this feature? And any other live examples of such behaviour?

1 Answer 1

2

That is not a carousel by any means. It just changes content on scroll, you can usually find this as "on scroll animation".

If you want an example with code, here you have one (and you can navigate the Codrops site for more depending on what you want, but this specific tutorial has all the elements of your example). Or you can try the AOS library. The trick is that instead of making the page scroll, they use position:absolute so the slides stay in place

One thing though: your example is barely usable and completely unaccessible. I'm not sure if this is caused by the on_scroll behavior (you'll see that all examples in Crodrops site using on_scroll have very important usability issues). Mentioning this because if you plan to use this on a site, you should be extremely careful and test it a lot

EDIT: Usability and accessibility issues

Some of the most notable usability issues:

USABILITY

  • It's not clear it's a slider (as a matter of fact I' wouldn't notice if it wasn't for your question, I was like "what is he talking about?")
  • There are no affordances or information about what to do
  • There's some kind of navigation bar that actually doesn't work
  • It's not clear how to get back to previous information if someone accidentally scrolls.
  • "Slides" aren't identified and they look very similar to each other

ACCESSIBILITY

  • It's almost impossible to navigate with screen readers
  • There are many images, none of which have alt information
  • ARIA labels are scarce and some of them incorrect
  • Huge cognitive load for people with certain medical conditions such as dyslexia, some forms of autism, and OCD
2
  • 1
    Thanks for the helpful explanation @Devin which helps me understand what was happening on the page example I gave. Would you be kind enough to summarise the very important usability issues you see with this animation behaviour for the benefit an amateur like me?
    – jbk
    May 18, 2021 at 8:59
  • 1
    @ jbk - Usability issue that I can understand from this type of scroll animation is - discoverability (unable to discover page interaction or movement) as users would believe the page move upwards (which ideally happens after few scrolls). However, by flipping the contrast button the page looks slightly appealing and contextual (very minimal improvement yet discoverability is an issue)!
    – inkmarble
    May 18, 2021 at 16:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.