Blog Insights
Creating Delightful Experiences with Immersive Scrolling and Micro-interactions
Immersive scrolling websites or experiential sites have grown in popularity over the past decade and many organizations are using this feature to create delightful and engaging experiences for their audiences. Immersive scrolling sites differ from traditional websites in that they are usually dedicated to one subject or narrative and are typically confined to a very long page.
Immersive scrolling is all about the details
Immersive scrolling websites are similar in design and function to museum exhibits that guide people through an experience. These types of sites have been designed with extra attention to detail paid to the presentation of the content and strategic use of video, photos, and other rich media to create an interactive and seamless experience. Here are the details that matter most when thinking about what goes into an immersive scrolling site.
- Focus on a single story: This type of site works best when you have a specific event or story you would like to showcase. Think about it like a storybook or interactive exhibit that tells a single story about the topic, event, or headline that you are trying to showcase.
- Narrative is the focal point: The key to creating a delightful immersive scrolling experience is in how you approach it. The process is most successful when you think of the long page as an animated video: start with the story you want to tell, create storyboards, and write a script before you get into the web design.
- Length is relative: Don’t worry about the ideal length because there is no such thing. Focus instead on how each step of the scroll provides a new and interesting part of the puzzle by using interactive elements such as video, animations, and images. If the site and content are engaging, then users will stay with the experience.
Here are a few examples of immersive sites that have paid attention to these details to create a truly engaging experience.
The 1619 Project website was created by the New York Times as an extension of their 1619 initiative that was published in 2019. The initiative is ongoing and the website serves as a complement to the special issue, live events, and multi-episode podcast series. The 1619 Project website is a stunning example of how to create a highly engaging experience that tells a focused story and serves as an extension of the overall campaign.
The site doesn’t include traditional navigation so that users are not distracted by the option to leave the experience. Instead, they have kept it simple by providing a share button in the top right corner and featured content at the bottom of the experience. While scrolling, there is a powerful juxtaposition of photography and typography. Every photo has been carefully chosen depending on the role it plays in the experience: a background image, a frame for pull quotes, or presented on its own. Micro-interactions throughout the experience fade the background color from one color to another and fade pull quotes in and out to create a seamless experience. There is a mix of vertical and horizontal scrolling, which provides a different opportunity for wider images and pull quotes that you otherwise wouldn’t see in a traditional web experience. A variety of recognizable patterns start to emerge with the use of pull quotes and page transitions. This is an excellent example of how immersive scrolling can be both surprising and engaging but not so unpredictable that a user feels disoriented.
2℃ Earth communicates the demonstrable impacts of global warming in a compelling narrative with the use of rich media. This website is a terrific example of how animated type, audio, video as texture, page transitions, layered elements, and parallax can be used together to create an engaging and immersive experience. A page transition occurs when a user clicks on a link and a common element such as a photo remains on the screen, leading the eye to the next page. This is a common technique in animation and is becoming more common in web design to create a seamless experience by guiding the user from one page to another gently instead of to abruptly flashing to the next page.
One Day in My World is a joint collaboration between Witness Change and Handicap International to bring awareness to mental health and tell the stories of those who experience mental illness issues. This site is great for its editorial style layout through multiple columns and micro-interactions that fade content in and out as the user scrolls down the page. The site ensures that there is always something on the page to ground users in the experience. The design has been kept simple putting focus on the powerful photography and use of pull quotes. This is a wonderful example of how to create an immersive scrolling website that tells a story without designing something overly complex.
This is an immersive website our team at Forum One created for NRDC’s 50th anniversary. The experience is centered on NRDC’s impact with a narrative thread that moves audiences through an interactive journey of a series of key events throughout the decades. The experience was designed to illustrate NRDC’s long history of accomplishments, from large-scale legislation to practical changes that benefit users’ environments and local communities.
Our process focused on how to tell the story by developing the overall script, mood, and tone, and how a user would experience the overall design. The design uses full-screen photography, large typography, and negative space to build the experience. Users have the freedom to explore events by easily scanning content arranged by the decade in the menu or experience the chronological storyline. The website follows a vertical scrolling pattern to introduce the storyline and a horizontal scrolling pattern to explore the details by decade. This approach creates a predictable pattern that helps ground the user in a place in the timeline. By combining different micro-interactions with different scrolling orientations, the experience is kept familiar while introducing opportunities for delight.
From a user experience perspective, this website is a great example of the limits of immersive scrolling in terms of the amount of micro-interactions and simplicity in which the content is presented. The first micro-interaction upon scrolling reveals a photo through the color in the typeface sliding down to reveal the photo is incredibly engaging. These are the kind of transitions that change how you think about average page length and potentially what a website experience can be. As the user scrolls, the site presents many ways for type, photos, and colors to transition in and out of the page. This is an example of pure visual delight because of how different it is from your usual web experience. The overall experience isn’t jarring because the speed at which elements transition in is entirely controlled by the user’s mouse.
Immersive scrolling websites are becoming more common as companies recognize the endless potential they offer. Here are a few other examples we enjoy:
