Redirecting Focus: 4 Different Ways You Could Direct User's Attention on Websites

I once had the pleasure of tutoring a few 14-year-olds and that was the first time I discovered just how hard it is to try and direct their attention and keep them focused on the task at hand. I accepted the gig because I thought kids at that age would be much less hyperactive but it turns out that I was wrong. You could only tell them to focus for so many times before realizing that does not work at all and that you're going to have to think up of a creative way to capture and direct their attention.

In a world where immediate distractions are always aplenty, attention is a commodity. It's not just the fact that content creators would have to jostle one another for attention, those very same creators would have to be smart about how their contents are arranged, laid out and positioned so that users’ attention are directed at the right place. In the world of web design, this can be an especially useful skill to have as you want to subtly direct users for the purpose of conversion without using blatant sales tactics.

In the first-person parkour video game Mirror's Edge and its newer sequel Mirror's Edge: Catalyst, the player controls Faith, a "runner" whose job is to deliver messages and packages across a futuristic, dystopian city using the practice of parkour. Faith has an ability described as "runner vision" which manifests in-game as a visual aid that emphasizes helpful objects and environments. Let's say you're running across a rooftop and the runner vision would automatically colors several railings, boxes or other objects in red so the players will have an idea on where to go.

In video games, this is known as pathfinding, where players are given direction on where to go next and they come in various shapes and forms. In Mirror's Edge, the application is subtle and natural as you can easily pick up your next destination even while you're in movement. Others aren't as subtle, requiring players to repeatedly check the map until they arrive at the destination. Personally, I find the former, subtler approach to be more preferable as the guide so to speak, exists naturally within the game while the latter requires the player to break immersion every now and then.

The same principle also applies in web design. Sure, you could simply use gigantic arrows to blatantly direct user's attention to an equally gigantic red button labeled "Buy Now" in capital letters but I'm pretty sure we could do much better than that. The idea is to draw in their attention without calling for it and there's an art in how you could achieve that. For starters, the following 4 tips should provide you with several easy examples on how to subtly direct users’ attention on your website.

This is the tactic Mirror's Edge used. While the general environment is mostly rendered in grayscale, interactable objects are rendered in bright red, making them pop out and definitely hard to miss as the contrast between the loudness of the red contrast heavily with the muted color of the environment. Playing with this contrast is one way of capturing users’ attention and this contrast isn't strictly limited to color as you can play around with the stark difference in brightness, size and style to control the focus of the users.

Humans are visual creatures and as such, our eyes naturally gravitate towards images. With this fact in mind, it's natural for web designers to make use of images to try and grab users’ attention but what if we use those very same images to try and direct users’ attention to something else? For example, if we're using an image of a person, we could use said person's line of sight and subtly nudge users to look at the direction that person is looking at. By playing around with where the image is 'facing', you could make it so that the image is pointing at your CTA button.

Try picturing static scenery. Do you not agree than when you detect a movement in that scenery, you could easily pick up on that movement no matter how subtle it is? It's a bit how you could easily pick up even the smallest of sounds in the dead of the night and you can easily take advantage of this fact by employing animation in your website. It should be noted however that animation should be used only sparingly as too much of dynamic elements can be distracting or even overwhelming, which would have a negative impact on the usability of your website.

Don't be like Hermione Granger who seems to think that getting expelled from school is somehow worse than getting killed. For the three techniques described above to work, you're going to have to sort out your priorities first and deciding which element in your website to emphasize. Remember, attention is a commodity and that no matter how hard you try; it's going to be quite impossible direct users’ attention on every section of your website. Prioritize which section of your website you would want to give the most attention to and focus on those sections first before giving attention to others.