Do you remember the last time you waited for the bus, without scrolling through your Instagram feed, or doing some sneaky Tinder swiping at the same time? Whether or not you’re a fan of the T, the chances are, you don’t often find yourself doing just one single thing at a time. Our lives seem to be getting busier and busier, as we simultaneously juggle multiple activities, conversations, and screens. Arguably, this contributes to our generation’s patience levels not being what they used to be, and as a result, our attention spans are going down the drain.
But before this takes too much of a dark turn, let’s think of the positives: this new situation means that designers are facing new and exciting challenges, leading to high levels of creativity in the world of web design. Having to compete with so many other things that our site visitors could be doing while browsing our websites means that we have to, more than ever, design in a way that will captivate our audience and attract their attention. While there isn’t one simple definitive way to do this, here are some insights into the direction web design should be going in this era of short attention spans:
Incorporate movement and interaction
In order to compete with the overload of information constantly bombarding our current audience, you need to stimulate them. That’s why static screens don’t really make the cut anymore. Using interaction in web design is a great way of engaging your audience and grabbing their attention, especially as our eyes are automatically drawn to movement. However, be careful of overdoing it, as too much movement can end up distracting your visitors and having the opposite outcome that you were going for. There are multiple ways to use motion effectively, from integrating animations, to creating addictive scrolling experiences with multi-layered parallax and adding hover effects.
Who said websites were just for looking at? You can use various tools, such as sound and video, to create a whole environment and draw in your site visitors. Notice how the minute you enter Sani Resort’s homepage, hear the relaxing sounds and see the slow movement of the visuals, you can’t help but be transported to a lovely, virtual world. The mesmerizing sensation of watching the fullscreen video, and switching between the different scenes makes you almost forget you’re looking at a website.
Another powerful technique is adding animation on a specific part of your page, to draw your visitors’ eyes to there. Studies show that movement subconsciously triggers our attention. Pinpoint the most important elements of your site, such as the areas that you want people to click on, and add movement there. You can go for entrance animations, hover effects or videos.
Sani Resort‘s website
Add an indication of progress
Nobody likes uncertainty. There may be a few lucky free-spirited people out there, but generally, we like to know where we stand and more or less where we’re heading. The same goes for websites, especially at a time in which no one has time to waste. In case this metaphor was a little too cryptic, what we mean is that including an indication of progress as people scroll down your website is a good tool for dealing with today’s lack of attention span. As soon as a certain action is broken down into steps, and you know how much you’ve completed and how much is left, the likelihoods are that you’ll have a little more patience. Think about watching a long presentation – if you know in advance what to expect and there’s a number indicating how many slides are left (or how much longer you’ll be trying to keep yourself awake), the whole process will be more bearable. By the way, the same goes when creating a LinkedIn profile – there’s a visual indicator showing which stage you’re at, making the whole creation process much more gratifying than, let’s say, setting up a Facebook account.
On Chobani Food Service’s website, a horizontal bar above the recipe indicates what stage of the recipe you’re at, by gradually getting longer, until all steps of the recipe are complete. A Year of Conscious Practice blog use a similar technique, with a small circle in the corner of the screen that fills with color as you scroll down the page. This method can also used in long-scrollers, like Adelaide Wang’s design portfolio created with Wix, that incorporates a subtle element on the right-hand side that indicates how far down the page you’ve scrolled. Any visual aspect that shows gradual change can be used, from a simple line, to a shape or image that is eventually formed once the user has reached the final point.
Chobani Food Service‘s website
Create a clear and simple navigation experience
Along with thrilling animations, interaction, movement and sound, don’t forget that a key part of ensuring your website is accessible is to have clear and simple navigation. The research done on average attention spans decreasing to a mere eight seconds may or may not be entirely accurate, but it definitely stems from somewhere. Hence, if someone enters your website and doesn’t understand within a few seconds what it’s all about and whether they should be doing anything, the chances are that they’ll leave your page. As well as making sure to have a distinct visual language and branding that set the tone, make your UI simple and your navigation clear. There are a few points to take into account here:
– Every action should be completed within the shortest possible time and the least amount of clicks, so as to lower site visitor’s frustration levels. – Of course there are exceptions, but generally, the logo that leads to the homepage should always be visible and remain in the same place on each page. – Make sure that the current page your site visitor is on is made clear. For example, if it appears in the menu bar, that page should be indicated in some way, like on illustrator and graphic designer Zitro Tinta’s Wix website. Her menu bar is crystal clear and a subtle use of a paler shade of grey clearly demonstrates what page you’re on at any given time. – Ideally, the link in the menu bar to the page you’re currently on should be disabled, so that the user doesn’t click it and waste time waiting for the page to reload. – If your website contains a blog, you can feature your ‘top stories’ on the homepage, enabling visitors to easily get hold of valuable information.
Make your CTAs and buttons accessible
Great navigation is no use if your site visitors can’t find the right buttons on your website. When it comes to designing the actual buttons and CTAs, once again take into account your impatient visitors that don’t have the time to play hide-and-seek with your website. Take note of prime pixels (the areas of the screen that are easier to reach) and consider placing your buttons there. On desktop, it’s the corners of the screen, whereas in mobile web design, it’s the center.
Many websites are now spreading out their menu in the screen’s four corners, like in design studio Studio & More’s Wix website. This style works well with the design, while keeping the buttons visible and accessible. Another way to make sure they stand out is by size and color palette – try contrasting them with the background color, or making them larger. On Mild Design’s Wix website, the CTAs are placed in the center and on the images themselves (as opposed to the edges), but they’ve made sure to bring just the right amount of attention to them. How? They’ve used contrasting colors and their clean design stands out from the patterned visuals in the background.
Mild Design‘s online portfolio
Maximize your content above the fold
It’s true that scrolling is pretty much our second nature these days, and we’ve all become more accustomed to one-pager websites, but that doesn’t mean that the top fold of your site is any less important. In fact, research done by the Nielsen Norman Group shows that people still spend 57% of their page-viewing time above the fold and 74% of the viewing time is spent in the first two screenfuls, up to 2160px.
What does this mean for our website design? Clearly, the area above the fold is still crucial in grabbing your audience’s attention and determining whether they stick around to explore your site further. As well as experimenting with the other techniques mentioned above (movement, interaction, indication of process, etc.), place high-priority content where your users can immediately see it, keeping slightly less important information further down the page. The area above the fold should be the one in which users get a real feel for your brand’s vibe, and depicts your major goals and contains the most attention-grabbing visuals and important CTAs. Keep any text here super clear, and to the point, using fonts that are easily legible.
Design Matters’ Wix website does just this – all the important links are above the fold in an efficient and simple navigation bar that contains a large amount of information in an organized way. You also get an immediate understanding of what the website is all about, with a clear sentence right at the top of the page. The colorful background is absolutely mesmerizing and draws you in immediately.
Lower your loading speed
You may think that if your website is utterly gorgeous, cutting-edge and in fact, absolutely genius, people won’t mind waiting for it to load. Well, think again. Because that’s just not going to happen. Short attention spans means that things need to happen faster to keep your audience engaged, no matter how fabulous your site is. This also connects to navigation – you want to create a flowing sensation on your website, giving users the freedom to browse and search, frustration-free. Recent research on “The Need for Mobile Speed” has shown that 53% of visits are likely to be abandoned if pages take longer than 3 seconds to load, and as the loading time increases, the probability of bounce increases at a rapid rate (read more here).
Don’t let these numbers scare you, because there are ways to conquer site loading time issues. Firstly, cut down on anything that isn’t absolutely necessary, especially when it comes to mobile web design, where your real estate is considerably smaller. Also, reduce you size of your files by considering the use of SVG files that are lighter and scalable. You can also consider adding loading animations that indicate to the user that something is happening. However, they can also create the perception that you’re waiting longer than you actually are, so be aware of this and make sure your animations make the wait worthwhile, and appealing enough to ensure users won’t leave your site.
