Use These 5 Design Elements to Create the Optimum Blog User Experience

This post is by Mark Acsay III of Webby Thoughts.

One of the main unacknowledged problems with today’s websites is that many just follow the favorite design of the month. When Flash was born, we got bombarded by Flash-based sites that took forever to load. When sliding banners came along, almost everybody wanted to have one too.

Many bloggers and business websites today only focus on search engine optimization, trying to make their way to top rankings just to get a chunk of traffic. Yet when they do, they waste a lot of that traffic and lose the confidence of their potential audience through of bad user experience.

Websites must not only be optimized for designs and for search engines but also for “visitors’ thought sequences.”

We need to understand that every time there’s a visitor on our website, we must answer the thought conversations that they have while navigating our sites. Take this thought sequence as an example:

1. Where am I?
2. Where should I begin?
3. Where did they put the ___?
4. What is the most important thing on this page?
5. Why did they call it that?

If your site does not answer most of those questions, then you are not giving the best experience for your users. It means that you are not guiding them to accomplish their objectives on your blog.  Fortunately, there are five primary web design elements, and we can use them with the intention of guiding the visitors through a clear sequence of thoughts.

What are the five primary web design elements?

1. Size: Size does matter. We use size to emphasize something. Whether it’s the font, image, or shape, we instinctively understand that the bigger it is, the more important it is, and vice versa. Just like when we speak, the louder the sound, the more we emphasize.
2. Shape: Shapes are among the first things we learn as toddlers and they have an innate connection to all of us. Shapes direct and communicate. They have a big appeal to our emotions and thoughts. Just seeing a heart shape gives many of us an impression of love. It is said that shapes are processed by the brain many times faster than words.
3. Color: We all know the suggestive power of colors. This is one of the most powerful elements of design. Red is known to induce appetite, which is why it’s used by many restaurants.  By using colors to guide the thought sequences of a visitor to accomplish your main objective, you get to increase your conversions and give your users a better experience.
4. Position: This element is one of the trickiest if it’s not carefully implemented. It is obvious that when you put something above the fold of the website, it’s important—but not all the time. Since we usually skim web content instead of reading it, positioning should be based on the eye movement patterns of your visitors. So position your most important messages and navigational cues where the eyes are scanning the page.
5. Motion: The effective combination of shape, color, size and position to create motion in directing the focus of visitor’s attention dramatically impacts the user behavior. A simple .gif arrow moving back and forth and pointing to the “Subscribe Now” form can impact sign ups.

Now that we have an overview of the design elements, let’s put them into practice and see how we can use them to, firstly, guide visitors’ thought sequences; and secondly, focus the attention of visitors to achieve their—and your—objectives, while giving them the best user experience they could ask for.

As a note, I cherry-picked these example sites from different niches so we can learn how they applied the elements of design to serve a better user experience.

The design elements in practice

1. Emphasize the most important objective

Let’s take a look at what UPrinting.com did for their Black Friday campaign. UPrinting is one of the top printing companies in the US.

Let’s see how they used the design elements here.

Size

Since it was Black Friday, the designers put the biggest banner in front of the site’s visitors. Look at the size of the word “sale”; they also used the number 20% to emphasize their main objective.

Shape

They used a rectangle to identify the banner ad. Notice also the green button, which led visitors to a page where the offers were, and where interested people can learn more about the sale.

Color

I really like the way they used color contrast here. A black background was aligned with the theme, Black Friday. Then they used the contrasting color of white to emphasize the word “sale”. Finally, the use of red behind the words “20% off everything” automatically drives our eyes to this message, and eventually to the green Learn more button.

Why use green instead of the usual red or orange? This might signal to users that clicking the button is safe to do, and that there’s more on the next page. Green is also the color of their logo at the upper left hand corner. The subliminal message here—that when I click on that button, I will find things that are about printing and learn more about the promo—is very clever.

Position

Obviously, this ad is above the fold. But the position of the green button does not distract from the other messages in the banner. It’s at a spot where, after your eyes have scanned the whole message about the sale, you will naturally end up.

So here’s how the thought sequences are answered in this page:

1. Where am I? The logo at the top-left says you’re at UPrinting’s site.
2. Where should I begin? Begin with this large banner that says SALE, 20% off everything.
3. Where did they put the button? Right beneath the 20% off message.
4. What is the most important thing in this page? The Black Friday discount sale.
5. What printing services are discounted by 20%? Click the button to learn more about the offer.

2. Use just the right number of design elements

Let’s take a look at what Amazon did for their Cyber Monday promotion. Amazon is the largest online retail store in the world—they could really give us some great lessons in design.

• The business emphasized their Kindle Fire sale because it was Cyber Monday.
• Despite the volume of products they sell, they limit the elements above the fold to reduce the noise and to focus visitors’ attention on what’s important.
• By reducing the clutter and highlighting their own product—Kindle Fire—in the top position, they leave you no other option but to first consider it. When you leave your visitors on their own to try to work out what’s most important, it slows down the buying thought sequence, because they have to stop to make meaning of the options.
• Giving a lot of options to the potential buyer can actually reduce conversions. If you have to give more than one option, be sure to guide users’ thought patterns to decide on the best one for them.

3. Make effective use of balance

SEOMoz is one of the most prominent organizations in the SEO and inbound marketing community. Let’s look at what they do with balance.

1. SEOMoz’s design uses the right contrast and a color combination that’s easy on the eyes.
2. There is symmetry between the text on the left and the image on the right, except for the hiring ad banner that temporarily interrupts that flow, and grabs the attention.
3. A strong emphasis was also given to the Free trial button.

4. Communicate the right messages effectively

Let’s analyze the how ThinkTraffic.net communicates its key messages about attracting traffic.

1. Think Traffic presents a consistent brand message: think about your traffic. Obviously, they want to attract users who need more traffic for their sites.
2. To display the brand’s unique selling proposition, the designers used a box to highlight relevant questions for users. They used shapes and colors in the background to show an upward trend, which reflects the fact that users want to have an upward trend in their traffic.
3. In the third box, the designers used an arrow to communicate that the solution to the traffic problem is to fill out the form. Users just have to enter their email addresses to get a traffic toolkit.
4. Then, they used the right color combination, with just right to contrast, to present the call to action, “Let’s do it”—a message that conveys, “We can help you. Let’s work together.”

5. Use the right flow

Recently I updated Adobe Flash Player and after everything was done, I was redirected to an installation success page that contains a banner for Adobe‘s newest Photoshop Elements packages. Let’s take a look.

1. Color: The designers used color saturation to guide my eyes to the button at the right-hand side. My attention was drawn seamlessly right to the button.
2. Size: They used font size to emphasize the availability of their new Photoshop Elements product.
3. Balance and the right combination of design elements were carefully mixed to guide visitors’ thought sequences, from the moment they see the “Now available” message. This leads them to the Adobe Photoshop Elements II message, then to the leftmost box, then back to the leaping person, which points to the “Learn more” button.

Are you using the design elements on your blog?

When you work on your blog’s design, don’t just optimize it for search engines or for a fashionable design. Think of how you can best serve your visitors by giving them the best user experience.

You can do this by guiding them through the sequence of their own thoughts. This approach builds trust in your site and helps you communicate your message clearly, which supports higher conversions.

People buy from people. Talk to your users through these design elements.

Do you have other ideas you can share based on the examples I’ve mentioned here?

+Mark Acsay III is an online marketing consultant, the owner of Webby Thoughts blog that talks about inbound marketing topics.