Encourage scrolling through animated transitions
Animated transitions add interest, break up the monotony of a page, and give a sense of energy. They also promote scrolling by hitting that reward center of our brains. Animated transitions distinguish one block of content from the next, pushing us to move forward in a design.
This website for the French electronic music festival Lattexplus uses guiding text to entice scrolling, but it's the animated transitions that really lead us down the page. Each scroll-triggered transition brings up a glitched-out photo of a musical act performing at the festival.
The image shifts and wobbles into position before coming into focus. With the sound turned on, EDM pulses in the background. Transitions from one artist to the next mimic the building anticipation of a DJ’s set.
And while we’re talking about scroll-triggered animations busting through the illusion of completeness, we can’t forget parallax. Parallax gives an artificial sense of depth to otherwise flat designs.
By designing the foreground to move faster than the background, we get a sense of space. And the movement in the layered graphics, images, and text prompts visitors to scroll, revealing more as elements slide into place.
ESPN uses an arrow to persuade scrolling through the subsections of athletes in their best signature moves in NBA history. Scrolling triggers a parallax effect, shifting from one professional basketball player to the next and the decade they’re known for. We get the message that we’re at the end when the word FINALE shows up on the last screen, and downward scrolling gives us nowhere else to go.
Be careful with horizontal layouts
Horizontal scrolling is popping up more and more, but because it breaks free from standard navigation, it can be less intuitive. As with standard vertical designs, animated transitions, graphic cues, and cutoff content are all indicators to get people scrolling laterally.
This design for Proud and Torn, where the focus is on Hungarian history, uses a couple different techniques to encourage scrolling. Cutoff images and a rare horizontal parallax hint that scrolling will reveal more content. There’s also a friendly prompt to, “Scroll normally as we continue horizontally.”
It pays to remember that, no matter how obvious an interaction may seem to us designers, it won’t necessarily be obvious to our audience. A little extra guidance won’t ruin the experience for those who “get it,” but can be tremendously helpful to those who don’t.
People navigating the web are used to horizontal dead ends, with things like carousels signalling a hard stop. Proud and Torn takes us through an unconventional layout that makes it immediately apparent that there’s more content to see.
Beware of using solid, horizontal lines — we’re trained to treat them as the end. A signal to stop.
Let them know there’s a bigger picture
The illusion of completeness gives you the false sense that there’s nothing left to see. It’s like going to the Grand Canyon, walking fifty feet from the edge and thinking, ”Wow! Look at those pretty rocks.” And then returning to your car.
Your design needs guideposts to lead people through the beautiful expanse that is your creativity.