One-Page Design

Simple and easy to navigate. Usually. One-page websites are a unique way to display content or information in a format that doesn’t require the user to navigate page-to-page or find the next link to click. By design, they are scrolling intensive, and because of that fact, since continuous scrolling requires less work from the user than finding the next button, one-page designs have the potential to be much more immersive than ‘standard’ websites.

Their advantages, of course, comes with disadvantages; a lot of scrolling. If a user needs to find information quickly, making them scroll through half of the page to find one thing, then scroll back up a third for another, then scroll down four-fifths for the final bit of information is not very efficient. That being said, the effectiveness of one-pagers comes down to what its purpose is. We will see examples that solve this problem pretty effectively, as well as some others that take a creative stab at it, albeit introducing other problems.

Let’s get the most glaring examples out of the way first. News feeds or archives, such as Twitter, YouTube, Facebook, Instagram, Apple News, et cetera all utilize this single-page design without requiring the user to click ‘next page’ or ‘show more.’ It gives the user a sense of endlessness, as the page (with some buffering here and there) affords the user to scroll non-stop until they hit the end or run out of computer memory. This affordance allows the platform to be incredibly immersive as users scroll through their Twitter feed, seeing some mediocre posts but, once in a while, finding some content that compels them to scroll further. Although these platforms aren’t strictly one-page, as you can navigate to other channels, profiles, settings, and other sorts, they take advantage of one of its most potent weapons: immersiveness.

Endless YouTube feed of LTT

Feeds aside, there are creative ways to immerse the user. KitKat’s comical parody of the tech and gaming industry’s specifications porn utilizes a single page to bombard visitors with quip after quip about how good their candy bar is. The intention of each section is to get the user to laugh, then keep scrolling for more. On top of that, the page utilizes animations and parallax images to give it a more dynamic feeling. Interestingly enough, they also add a navigation bar on the right-hand side for users to easily return to their favorite remark or whatever catches their attention. The only problem with this function, in my experience, is it fails to jump the user at all. The disadvantage of the site is that it is resource intensive, taking quite a while to load upon visit. This is an easy problem to come across when building one-page sites with many images or graphics. However, since this site is only an extension of their main web domain, and specifically targets a niche audience of tech enthusiasts (specifically Android), it doesn’t seem to be too much of a problem for KitKat to do this.

kitkat.com/android

A more traditional example of a one-page website is Campo Santo’s promotional page for Firewatch, the video game. You may have seen this example in previous posts, but I think it’s worth bringing it up again. Upon loading the page, the user is greeted with a full-window splash of a sunset scene, presumably from the game. It gives us sense of the gameplay and art style, as well as the overall theme of its story. The splash also complements the marketing content on the page, touting the game’s striking visuals. Although the rest of the page is what one would expect from a web page, the splash screen at the start is utilized to make a strong impression right away. The experience of the scene parallaxing as the user scrolls down works well to ease the visitor into the content about the game.

firewatchgame.com

Going a step further, the next example is a single page that has a variety of vector graphics and visual effects beyond just parallax. Thinkful.com’s blog page on “What is Data Science” is, at its core, an informative page. The writers could have simply written a long post, published it, and called it a day. But instead, organizing the post the way they did makes the content more interesting to people who have shorter attention spans (like millennials) and lose interest once they see a big block of text. The disadvantage of this format is as it usually is: a hassle to the opposite group; the people who prefer succinct posts with a few images here and there. The information is spread out across a significantly lengthy page, and there is no navigation bar to quickly jump from section to section. There are also some portions where the visuals are arguably a distraction from the content, working against the page’s core purpose of teaching the visitor and maintaining that knowledge in the long term. Overall, it’s not a bad concept, but the execution could be tweaked to make it better.

Distracting background on Thinkful.com’s post

Finally, I will end on a more artistic example. The promotional website for the film Cargo utilizes the continuous scrolling of a one-pager to fulfill a metaphor present in their movie. As visitors scrolls down, they get the feeling they are sinking, due to the visual effects. It works very well to convey what to expect from the movie. The disadvantage, similar to previous examples, is that the website can be resource intensive, with a noticeable lag when scrolling. There is also no navigation bar to quickly jump from section to section.

 

Leave a Reply

Your email address will not be published. Required fields are marked *