Have you ever managed to reach the bottom of your social media feed? Probably not! Because it applies the concept of infinite scrolling. That’s definitely a trending and dynamic way to replace the pagination links and to display the vast amount of data on both mobile devices and websites.
How does it work? This one-pager makes clicking to see new or more content redundant. Because the main functionality of an infinite page is that the user scrolls the content and every time the end of the screen apparently has been reached, new content is continually and automatically loaded .
The only thing that should be kept in mind, because it might limit the use, infinite scrolling considerably triggers the user’s attention and although it’s kind of optimistically tempting and challenging to never be able to reach the end of the page, it can also be very exhausting and frustrating.
Now let’s have a look how such infinite scroll pages can be created in Pidoco. And here’s how it goes …
1. The project setup
To visualize the infinite scroll page, I created a mobile project called “Friends”. That’s the prototype of an app where you and your friends can update each other on the latest things such a news, thoughts or images etc. These updates are shown on the screen of the mobile device and if you scroll the page more news by your friends are displayed.
As one-pager, my prototype of course consists of 1 page only and additionally has some layers. And here’s a little confession: Although we’re about to create an infinite scroll page, and usually you won’t be able to reach the bottom of the page, our project will have an end. But as a prototype, it of course will help to demonstrate the behavior of the infinite scroll page. That’s why my infinite scroll page can be scrolled three times and then the end will be reached. So a total of 7 layers is needed, whereas there’s 1 layer for each scrollable content to be displayed (here: 4 layers). Additionally, a loading symbol should appear for a short time when new content is loading while scrolling down the page. That’s why 1 layer for each loading screen (here: 3 layers) is needed, too.
Preview of the finished app “Friends”
2. Creating the infinite scroll page
2. 1. Building the infinite page
Based on the default height of 640px, we increase the page size using the toolbar at the top of the canvas by a little more than 3 times and set the height to 2100px and also added some elements like a status bar and icons.
Create a page with an increased page height
2.2. Creating the scrollpage content
Now that we have built the basic structure of our project, we continue creating the content of the infinite scroll page. That’s why we create the first layer by clicking on “+New layer” in the layers panel and add some placeholders such as an icon, image stencil and some text. For a realistic scrolling experience, the first screen ends with the default page height. Hence, the content won’t exceed the height of 640px.
Add content to the first layer of the scrollpage
Repeat that step for the other layers that are continually loaded. The content of the next layer then starts where the content of the previous layer has ended and so on and so forth.
2.3. Creating the loading page content
Let’s go on and add the loading page icon. To do so, we add a new layer again and add a loading icon. Just use the quick search bar at the top of the stencil palette by entering “load” and drag the icon to that position where the layer that contains all the news ends.
Display the load page icon at the end of each screen
Repeat that for the other loading icons.
2.4. Adding interactions to load the page content
We continue with the interactions. When about to reach the end of the screen, more content should be loaded. That’s why we make use of action areas on each content layer. The first action area starts at the half of the content layer. Since first a loading symbol should be displayed and then the new content should appear when the user scrolls the page, we add the following interaction pairing in the interaction dialog: When the user hovers, then change layer visibility. (Note: We use an hover action here, because while scrolling the screen we inevitably hover with our mouse over the entire screen!) Now we select the layer that contains the first loading icon (Here: Load 2) and set the visibility to “show”, the next reaction makes it invisible again by selecting change layer visibility and setting the visibility to “hide” and adding a delay of 1 second. The final reaction to be added is change layer visibility, choosing the layer with the content to be displayed next (Here: Content 2), setting the visibility to “show” and using the delay of 1 second.
Adding interactions to load the next content of the infinite scroll page
Repeat that for all the other layers.
Hint: Don’t forget to deactivate the layers again that we only activated to align our action area. To start the app only the layer needs to be displayed that contains the first content.
2.5. Jumping back to the start of the news feed
Having reached the end of the news feed, there should be an option to automatically jump back to the start to avoid annoying scrolling back to the top. Therefore we add an arrow as well as some text to the bottom of my last layer (here: my layer is called “content 4). Then we use the following interaction pairing: “When the user clicks/taps” then “scroll the page” and select “to top” as position with a duration of 1 second and then add for every content and loading layer the additional reaction “change layer visibility” and set the visibility to “hide”. But don’t forget to display the first content layer (here: Content 1) as it represents the start of the feed.
Use interactions to automatically jump back to the start of the news feed
3. Simulation
Voilà! To test your infinite scroll page open your browser to experience the behavior and start the simulation of your project by selecting it from the project list.
That’s it! You just finished your first infinite scroll page.
Do you need help? Then do not hesitate and drop us a line via support@pidoco.com or Facebook and Twitter.
Happy Prototyping!