Long-scrolling or infinite-scrolling sites with products are more widely accepted on e-commerce sites. It’s hard to give general tips about this issue, as it largely depends on the type of industry or niche the site is in. Too much content can overwhelm users and result in a bad user experience. Too much content will overwhelm the user. Our navigation bar takes the visitor to different sections, from which he or she can navigate further within the site.Ī big challenge with long-scrolling sites is determining the optimal length for the user. ![]() Tour / Our Customers / Pricing / Integrations / BlogĮach of these pages has different parts, but we chose not to use long dropdown-menus. It makes more sense to have a horizontal navigation bar with the most important categories on your website. Theoretically you only need one page, although this is not reasonable in most cases. This is also important from a SEO perspective. One challenge with long-scrolling websites is structuring the content in a way that makes sense. This can’t happen with long-scrolling websites. If the page takes too long to load, the danger of the user leaving is relatively high. Scrolling also keeps the user focused and on topic instead of instead of having him click around all the time. Parallax scrolling and animations can partly be controlled by the user, giving him or her a feeling of control. Users can navigate long-scrolling sites at their own pace: they can stay on relevant content or keep scrolling if the content is not interesting for them. Long-scrolling gives users a feeling of control, which is extremely important for user satisfaction. Examples are animations or parallax scrolling (more on this shortly).Īlternating between different types of content, text, pics, videos and gifs is another thing that makes long-scrolling more attractive. There are multiple design possibilities and effects for this. The challenge for designers and marketers is telling a story with their website. Scrolling is especially convenient on the small screen compared to using buttons for navigating a website. The more the content becomes irrelevant to the user, the more likely they are to abort a session.Īnother reason for the popularity of long-scrolling websites is the growing usage of mobile devices. ![]() Users keep on scrolling as long as the content is interesting to them. The longer a user stays on your website, the more likely he or she is to react to your call to action. Quite the contrary, it keeps the user entertained. You can see the difference at first sight:Ĭontrary to the original idea, endless scrolling is not causing higher bounce rates. The front page may contain the main claim and maybe a teaser, but it might not contain all of the relevant information. The argument for above the fold content therefore only partially applies to websites. The conscious decision would be to stop scrolling. When scrolling, the user just keeps doing what he or she is doing already. The teaser determines if the user will click on the blog post or Facebook ad or not.īut this is exactly where the difference lies: When clicking something, the user makes a conscious decision. It still applies to Facebook ads and blog post teasers. There was even an expression for that: above the fold. What was changed through Long-Scrolling or Infinite-Scrolling Websitesīack in the day, Websites followed the same rules as newspapers: The most important content was supposed to be on top. Because long-scrolling or infinite-scrolling alone doesn’t mean the user is going to spend a long time on your website. That isn’t about to change, which is why we wanted to give you some tips and best practices in this article. sites that let you scroll down for an extended amount of time, have been around for years. This is an example of a simple fade-in animation. In this case, we’ll be animating the elements with the class name scrolled. In the demo above, the elements were assigned the class name js-scroll so the HTML looks something like this: ĬSS does a lot of the heavy-lifting as it determines the style of animation of each element. This class name is what we’ll be targeting in JavaScript. We’ll create the layout of our page using HTML and then assign a common class name to the elements we want to animate on scroll. Our implementation relies on CSS for animations and JavaScript to handle triggering the necessary styles. Here’s an example of how animating elements on scroll works: ![]() The main advantage of using a custom implementation (as opposed to a library) is that it allows us to optimize our functions for accessibility and performance.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |