Big, Bold, Bright, and Beautiful = A Potentially Problematic Design?
While doing research for a Denver web design client, I found myself on Mozilla's primary landing page.
My initial, gut reaction was "Wow, what a bold and beautiful design."
After further inspection though, I found myself surprised by two of the design decisions the Mozilla team made. Both go against best practices and both made it significantly harder for me to use their page and find the information I was searching for.
The web page design
Take a look at the landing page I arrived on:
Here are the two immediate design problems I saw.
Problem #1: Look at alllll the people...
Research shows that humans' gazes are instinctually and immediately drawn to faces—and specifically, the eyes of others.
With all the photos of people sprinkled across the page, I found myself momentarily but repeatedly looking at these faces (especially the ones that weren't faded). The faces acted like perpetual visual detours that distracted me from finding the information I was looking for.
Scroll back up to the screenshot above. Do you find yourself looking at the faces?
If you're human, you do.
Here's the problem: people aren't coming to this landing page to look at faces. They're coming to this landing page hoping to find specific information, solve a problem, or take an action.
Problem #2: Rainbow Brite
A successful web design helps visitors find the information they're looking for and guides them down a path toward taking a specific action (call, download, buy, etc.).
In the screenshot above, nearly all the visual elements compete against one other. Bright red, bright orange, bright yellow, a bright green box with a fox in it, photos of smiling faces, a smaller bright pink rectangle, a larger and darker blue vertical rectangle.
Look at the page. Your eyes bounce all over, back and forth, around and around without rest.
Calls To Action and arrows within the top portion of the design shout at you to click, learn, donate, become, get involved, volunteer, understand, and download!
What's a gal like me to do? I use the web all day every day, yet this page's design left me dazed and confused.
Remind me to never send my mom to this page. Ever. She'd probably start crying.
Proof showing these problems are real
Every person involved in the web design industry, including myself, has oodles of opinions about what makes an effective web design and what doesn't.
So, here's something rather fascinating to back up what I've shared with you today.
Take a look at the image below.
It's a computer-generated eye tracking heat map I ran on the page. With rather high accuracy, this type of heat map simulates where on a page visitors' eyes will be drawn and what visitors will (and won't) see.
It doesn't take a scientist to see that visitors' gazes will zigzag back and forth all over the place. Visitors will look at the color blocks, look at the faces, and struggle to determine which elements they should focus on. Nearly everything on the page is clamoring for attention.
A successful webpage makes it easy for visitors to find information and understand what action(s) they should take.
So, in contrast, let's take a look at an example of a more successful landing page design:
Here is the eye tracking heat map I ran on this web page:
What's better about this design?
You'll notice that with this web page's design—which is far less bold, bright, and exciting—there are far fewer elements and colors to distract you. Therefore your gaze can rest on they key, most important page elements this company wants you to see.
These elements include the big Call To Action button, the man and his testimonial at the bottom of the screen, the video play button to watch the testimonial, and the logos sitting across the design offering social proof that the company's service is highly respected.
You'll note the designers who created this page used the knowledge about how people look at faces to their advantage, drawing your eyes to the powerful, persuasive testimonial.
The moral of today's story
Today's post was written in the spirit of last week's post, in which we urged caution about falling into a middle school mindset when it comes to your website's design—a mindset intent on being cool, different, and creative.
A creative, colorful, unique design does not necessarily translate into effective web design, happy website visitors, more conversions, or a website that offers an excellent user experience.