5 Tips for Controlling Focus
Some bits of your website’s content are more important than others; that’s just a fact. The “Buy Now” button is almost certainly more important than the entire “About Us” page, and you need to direct the user’s focus accordingly, if you really want that sale. That’s why we’re here: you might call this the newbie’s guide to controlling focus.
1. Contrast
The first and easiest way to catch the eye is to use contrast. By “contrast”, I mean that the important elements of a design need to stand out from the rest in a meaningful way. See what I did there? Now, there are several kinds of contrast to discuss:- Light/dark contrast
- Color contrast
- Size contrast
- Contrasting styles
Light/Dark
Light things stand out from dark things, and vice versa. Pretty simple, right? Well… that depends. If most of your site is pretty bright, then making your Call to Action big and dark (or at least a bit darker than everything else) makes sense.
Color
Okay this one is self explanatory. A splash of color, or even just a different color, is enough to make things stand out. In this example, color is used to cut through a lot of typographical noise.
Size
Make the important buttons bigger than other buttons. Make your headline text bigger than other text. Size contrast can not only make things stand out, but also help to establish hierarchy in the page.
Style
A difference in style can be illustrated by something as simple as the bold text joke I made earlier. But to look at a more UI-focused example, let’s talk about “Ghost buttons”. Ghost buttons are buttons with an outline, but no background color, and they’re often used in combination with regular buttons, like on the home page of IndieGoGo:
2. Images
Whether we’re talking about photography, illustration, painting, or 3D graphics, images grab eyeballs. You can redirect anyone’s attention easily enough with a picture. The only real exception to this would be pictures that are surrounded by other pictures. You can use images as the objects of focus on their own, of course, but you can also use them to draw the eye to other things, such as text or buttons placed on top of them. You didn’t think those were just pretty backgrounds, did you? That may have been how things started, but everything is a lot more calculated these days. If you really want to go all out, place your call to action in such a way that it looks like the picture is pointing to it. This is what your manager would call “synergy”, and it tends to work, despite sounding so very corporate.
3. Animation
And if you think we like pictures, let me tell you about moving pictures. No but seriously, if there’s nothing more interesting going on in a room, my eyes will inexorably be drawn to any TV that’s been left on, no matter what’s playing. It could be sports, daytime talk shows, or even a soap opera, and I’ll have trouble looking away. Most of us would. Motion just catches the eye that way. It started out as a survival reflex, and now we just have to know if Brian will ever regain his memory and marry Patricia, or if she’ll remain forever trapped by his evil twin Drake. Use that reflex to your advantage, by incorporating some light animation into things like buttons, helpful tooltips, and any text you really want people to read first.
4. Convention
Lastly, take advantage of your user’s default behavior patterns. As web users, most of us have been trained to look for navigation near the top, Calls to Action right under that, and more CTAs at the bottom. Putting important bits of information and functionality where people expect to find them is a perfectly valid strategy. Also keep in mind whether you’re designing for people who read right-to-left, or left-to-right. English speakers, for the most part, will look at the left side of their screen first, for example. While there is something to be said for breaking the mold, never underestimate the power of simple yet deeply-ingrained habits.
5. Use Emphasis Sparingly
When everything is bold, bold text just tends to blur together, rather than burning important information into the user’s brain. When there are many pictures on a page, and you’re not running a photography portfolio, users may just get distracted. And don’t get me started on the overuse of animation. When everything’s moving, how do you expect them to read any of your text that’s more than a sentence long? To really draw and focus your user’s attention on one or two things, you need to eliminate, or at least deemphasize things that might compete for their attention. Compete with other sites, not your own content.Ezequiel Bruni
Ezequiel Bruni is a web/UX designer, blogger, and aspiring photographer living in Mexico. When he’s not up to his finely-chiselled ears in wire-frames and front-end code, or ranting about the same, he indulges in beer, pizza, fantasy novels, and stand-up comedy.
Read Next
30 Most Exciting New Tools for Designers, 2023
As we near the end of 2023, we wanted to take a look back over all the tools we collected over the past year, to pick…
3 Essential Design Trends, December 2023
While we love the holidays, too much of a seasonal theme can get overwhelming. Thankfully, these design trends strike a…
10 Easy Ways to Make Money as a Web Designer
When you’re a web designer, the logical way to make money is designing websites; you can apply for a job at an agency,…
By Louise North
The 10 Most Hated Fonts of All Time
Remember when Comic Sans wasn’t the butt of the jokes? Long for the days when we actually enjoyed using the Impact…
15 Best New Fonts, November 2023
2023 is almost over, and the new fonts are still coming thick and fast. This month, we’ve found some awesome variable…
By Ben Moss
Old School Web Techniques Best Forgotten
When the web first entered the public consciousness back in the 90s, it was primarily text-based with minimal design…
By Simon Sterne
20 Best New Websites, November 2023
As the nights draw in for the Northern hemisphere, what better way to brighten your day than by soaking up some design…
30 Amazing Chrome Extensions for Designers and Developers
Searching for a tool to make cross-platform design a breeze? Desperate for an extension that helps you figure out the…
By Robert Reeve
Exciting New Tools for Designers, November 2023
We’ve got a mix of handy image helpers, useful design assets, and clever productivity tools, amongst other treats. Some…
The Dangers of Doomscrolling for Designers and How to Break Free
As a creative professional, navigating the digital realm is second nature to you. It’s normal to follow an endless…
By Louise North
From Image Adjustments to AI: Photoshop Through the Years
Remember when Merriam-Webster added Photoshop to the dictionary back in 2008? Want to learn how AI is changing design…
By Max Walton
3 Essential Design Trends, November 2023
In the season of giving thanks, we often think of comfort and tradition. These are common themes with each of our three…