ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel

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

Updated on September 11, 2019
profile image

Phillro Industries is a family business that has been established as a specialist supplier of high quality, reliable coating equipment.

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.

The art of pathfinding

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.

Play with contrast

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.

Play around with the focus of the image

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.

Play around with animations

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.

Sort out your priorities first

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.


    0 of 8192 characters used
    Post Comment

    No comments yet.


    This website uses cookies

    As a user in the EEA, your approval is needed on a few things. To provide a better website experience, uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

    For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at:

    Show Details
    HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
    LoginThis is necessary to sign in to the HubPages Service.
    Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
    AkismetThis is used to detect comment spam. (Privacy Policy)
    HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
    HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
    Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
    CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
    Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the or domains, for performance and efficiency reasons. (Privacy Policy)
    Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
    Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
    Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
    Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
    Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
    VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
    PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
    Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
    MavenThis supports the Maven widget and search functionality. (Privacy Policy)
    Google AdSenseThis is an ad network. (Privacy Policy)
    Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
    Index ExchangeThis is an ad network. (Privacy Policy)
    SovrnThis is an ad network. (Privacy Policy)
    Facebook AdsThis is an ad network. (Privacy Policy)
    Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
    AppNexusThis is an ad network. (Privacy Policy)
    OpenxThis is an ad network. (Privacy Policy)
    Rubicon ProjectThis is an ad network. (Privacy Policy)
    TripleLiftThis is an ad network. (Privacy Policy)
    Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
    Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
    Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
    Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
    ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
    Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)
    ClickscoThis is a data management platform studying reader behavior (Privacy Policy)