Using the Gaussian Blur to Find Path Clarity in UX Design
It’s clear that blurry backgrounds have become a popular design choice in today’s applications and websites. The style has a calming effect and allows users to focus in on something while still understanding what’s hidden behind the Gaussian blur.
But did you know this blur technique also works the opposite way? It can provide you with a map as to what attracts a user’s eye first and where it is likely to go next.
When you’ve been working on something for so long it becomes normal to you, and this creates its own blindness in that it can prevent you from seeing through your user’s eyes. Applying a Gaussian blur a useful and quick technique to help you determine if your user’s eye is actually going where you want it to go.
“We feel like all the world is so clear to us when really only this very small area is clear. We get less color perception and less acuity, the further you go out in space,” said John Whalen, a UX psychologist who recently spoke to Adobe about what he calls “the Six Minds.”
This Gaussian Blur Trick Gets Two Thumbs Up
To help you understand what Whalen is saying, take your two thumbs and extend them out in front of you at arm’s length. This represents about two degrees of visual angle, which means the area between your thumbs is quite clear and in focus, while the objects in the distance appear blurred.
“If you’re staring at something, whatever it is in the distance right now, even if you look at a bookshelf, and you try to read the book title just two books over, you’ll realize you can’t read the label. You might know it from memory, but if you didn’t you probably wouldn’t be able to do this,” Whalen said.
Without the focal point, our eyes tend to jump from one place to the next. Part of designing an effective user experience is designing a pathway that feels seamless to your users. The question is, how do you determine where a user’s eye will decide to go next?
“The answer is you use a map that’s essentially black and white, and it’s also a very blurry map,” Whalen said. “The differences you see there will typically help you decide where the eye should jump to next.”
Applying Gaussian Blur
Here’s an example of this technique using a sample photo I pulled from Adobe Stock:
This photograph of a desk is has a lot going on, but the desk itself is white, making it consistent with many web/app interface designs today.
When I first looked at this image, the cup with colorful pens caught my eye, followed by the cup with the paintbrushes. If this were a web design, you could probably see that this may not be a desired path, but lets continue.
Step 1: Apply a Gaussian Blur to a screenshot of your design
I opened the image of the desk in Photoshop and applied a basic Gaussian blur filter. You can actually make it blurrier than this if you like, but I used the filter default, which is set to one pixel.
Step 2: Turn down the color so that the image is almost black and white
Then I duplicated the layer. I converted the duplicate layer to black and white and turned both the opacity and fill down to 95 percent. This is my preferred method, but feel free to use whichever method works for you.
Once the color was removed, my eye focused on the cup with the paintbrushes in it first followed by the tablet in the middle, then the cup with the pencils.
“While color can be taken into account, I usually ask people to turn down the color because it’s not as big a factor in the periphery,” Whalen said.
This is because our eyes determine what we are seeing through light, just like a camera. While the human eye is able to see millions of different colors, our eyes can actually only detect three wavelengths of light: green, red and blue. The distinction is less important outside of our central vision. Based on the light our eyes receive, our brain puts the pieces of light together to determine what it is.
“You figure out borders to shapes, then you figure out okay that shape looks like a noodle shape and it seems to be attached to a cylinder shape, maybe it’s a coffee cup. Or maybe that noodle shape is on the top, okay maybe that’s a bucket on the beach with a handle,” Whalen said. “You gradually build up these pieces to understand your world and we typically do that in a gray scale format.”
This can be seen clearer when I repeat the above steps with a Gaussian Blur of three pixels. By doing this, it is less clear what the objects in the image are, meaning are eyes depend more on the contrasts in light and dark to direct the flow. These contrasts are already there, they are just illuminated when we apply these techniques.
By using a blurry representation of your design, you can predict the way a user’s eye will typically flow down the screen regardless of what’s on it. These subconscious layers of our perception play into how we interpret an experience, including whether it is smooth or jarring.
So there you have it folks. Use this quick Photoshop trick to test the flow of your designs to ensure your users will be on the right path. No heat map required.