Breaking the illusion of perfection in design.
Everyone scrolls – we know that now. But a website's design can lead visitors to believe they've reached the end of a page, creating what's known as "the illusion of completeness." In this article, we explore best practices for guiding visitors through your website and avoiding the illusion of completeness.
We're still rolling.
There was a time when designers obsessed with keeping things "above the fold." But scrolling has become so intuitive that it's a design practice that's no longer necessary.
A report from April 2018 of Nielsen Norman Group This supports the claim that we scroll, but not very far, depending on interest levels. Their data showed that “users spent approximately 57% of their viewing time above the fold. 74% of viewing time was spent on the first two screens.”
We're cool with scrolling, but sometimes we need a little guidance.
To guide visitors through a design
Minimalism relies on negative space, but too much white space can create a false bottom where it seems like there's nothing else on the page. People may skip ahead before realizing there's more content. While minimalism provides distraction-free space to highlight content, visitors need cues that contain content below the fold.
One way to do this is by showing partial slices of what's to come. Arranging parts of text or images will encourage scrolling.
Mathieu Levesque This approach is used on their photography portfolio website. The desktop view on their landing page shows a cropped image of a swirling glass of milk. We instinctively know there's more to see, encouraging us to scroll. There are also animated transitions with the title sliding into place, signaling the transitions from one content block to the next.
Content cropping also works in non-minimal designs. This layout is for a skateboarding magazine. Thrasher , The content is pushed slightly down the page and interrupted by the fold, clearly signaling that there is more to see.
Use graphics and text to provide direction.
Sure, an arrow can lead the way, but not all clues need to be so forceful. Something as subtle as a single line can guide people in the right direction.
This project for the Land Life Company This shows how suggestions can be integrated into the design while still serving their navigation purpose. A single line in the center of the bottom of the screen signals us to scroll.
The designer André Givenchy Use a small animated icon on your portfolio website to encourage scrolling. This is another example of a graphic cue that is subtle and effective.
Suggested text and calls to action can also lead to a website. The creative agency NOHAU It uses the phrase "See what we can do for you" as an invitation to keep rolling.
Encourage scrolling through the animated transitions.
Animated transitions add interest, break the monotony of a page, and give a sense of energy. They also promote scrolling by targeting the reward center of our brains. Animated transitions distinguish one block of content from the next, leading us to move forward in a design.
This is the website for the French electronic music festival. Lattexplus It uses text to guide scrolling, but it's the animated transitions that really take us to the bottom of the page. Each scroll-triggered transition brings up a photo of a musical act performing at the festival.
The image shifts and oscillates in position before coming into focus. With the sound on, EDM pulses in the background. Transitions from one artist to another mimic the anticipation of a DJ set.
And while we're talking about scrolling animations that shatter the illusion of perfection, we can't forget the... 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 the elements fall into place.
ESPN It uses an arrow to coax scrolling through athlete subsections showcasing 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 are best known for. We get the message that we are at the end when the word FINALE appears on the last screen, and scrolling down takes us nowhere.
Be careful with horizontal layouts.
Horizontal scrolling is becoming increasingly common, but because it breaks away from standard navigation, it can be less intuitive. Just like standard vertical designs, animated transitions, graphical hints, and cropped content are all indicators designed to make people scroll sideways.
This project for proud and torn , The documentary, which focuses on Hungarian history, uses several different techniques to encourage scrolling. Cropped images and a rare horizontal parallax suggest that scrolling will reveal more content. There is also a friendly prompt to “Scroll normally as we continue horizontally.”.
It's worth remembering that, however obvious an interaction may seem to designers, it won't necessarily be obvious to the audience. A little extra guidance won't ruin the experience for those who "get it," but it can be tremendously helpful for those who don't.
People browsing the web are used to horizontal dead ends, with things like carousels signaling a difficult stop. Proud and Torn takes us through an unconventional layout that makes it immediately apparent there's more content to see.
Be careful when using solid horizontal lines – we are trained to treat them as the end. A signal to stop.
Let them know there's a bigger picture.
The illusion of perfection gives you the false feeling that there's nothing left to see. It's like going to the Grand Canyon, walking fifteen meters from the edge and thinking, "Wow! Look at those beautiful rocks." And then going back to your car.
Your project needs guidelines to lead people through the beautiful expanse that is your creativity.
