Close
Close

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.

Uprinting

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.

Amazon

  • 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.

Seomoz

  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.

thinktraffic

  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.

Flash

  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.

About Guest Blogger

This post was written by a guest contributor. Please see their details in the post above. If you'd like to guest post for ProBlogger check out our Write for ProBlogger page for details about how YOU can share your tips with our community.

Problogger.net runs on the Genesis Framework

Genesis Framework

The Genesis Framework empowers you to quickly and easily build incredible websites with WordPress. Genesis provides the secure and search-engine-optimized foundation that takes WordPress to places you never thought it could go.

Check out the incredible features and the selection of designs. It's that simple - start using Genesis now!

Comments

  1. marty says:

    I have spending the last few days redesigning so this is wonderful info.Since I need a new starting part

  2. Great information. Some I have in place and can see there’s more I can do and more to focus on.
    Thank you

  3. Deny Saputra says:

    Agree with your 5 points Mark!
    Basically, simple navigate with clean attractive blog (I think just like ProBlogger’s one) is always gave a good user experiences.

    • Mark Acsay says:

      Shinzow Urticaria, there’s definitely a lot of things to consider to improve your site’s UX and this is just the basic.

      Deny Saputra, yes, I love how ProBlogger has neatly done their design. This is also one of the best example of course!

  4. I totally agree with you that design is very important when it comes to getting our most wanted response from our visitors. And thanks for laying out the basics for those of us who might want to handle our designs ourselves for the time being.

  5. Rohit Sharma says:

    Hey Mark,

    Very nice post, and thanks for reminding that sites are eventually for humans and not for crawlers!

    The rat race schema has to be avoided and quite few times we are so engrossed with our own horse views to hinder best user experience and confuse particularly our first time visitors!

    • Mark Acsay says:

      Rohit Sharma, Thank you for the kind words. I’m in your side with that.Even if there are no search engines, I believe we still have to create websites that are for visitors.

  6. Richard Ng says:

    Hi Mark,

    Great post.

    Agreed with the 5 elements of the design, increasingly, I noticed that some of the newer blogs/websites are practicing minimalist approach i.e. lesser but bigger text and graphics. What do you think about such design?

    Thanks.

    • Mark Acsay says:

      Richard, I love those minimalist design for blogs. Since blogs are intended for mostly readers, minimalist design is perfect for them.

      Just think of what are the possibilities your visitor’s condition are when the land to your blog. They maybe already from Facebook, email, etc and their eyes are already tired. Minimalist design are very easy to the eyes and will keep your visitors stay on your site reading your long blog posts even if they are tired because of the comfortable user experience. This is why minimalists are

      Second is its simplistic approach. One example is Neil Patel’s http://www.quicksprout.com. It’s one great example of putting the right emphasis which are the 1. Blog post and 2. Free Course sign up in the top right area above the fold. He minimized the header since all he want’s you to see first is his awesome content. I think I should have included his blog as one of the examples.

      Another example is Jason Acidre’s famous blog, http://kaiserthesage.com.

      Jason usually writes long posts than others. So same principles where applied to make the user experience awesome and keep them coming back.

  7. Semidoppel says:

    Now I know what’s lacking on my site. Nice post Sir Mark, will try to re-evaluate my site with the points you tackled.

  8. rahul says:

    I am fully agree with you that design is very important. so now am gonna try this on my blog..

  9. UI and UX is now an integral part in Digital Marketing along with SEO.
    UI is how easy to navigate from where you are to your destination and UX is the overall experience- design, usabilty ,etc
    Cheers!

  10. rahul says:

    very nice post…it can be summed up as tips to design an attractive blog

  11. Helpful article. I always think of how the eye travels down the page from left top corner to right bottom. I hadn’t considered color, emotion, size. Back to the drawing board for me I guess.

  12. Hey,

    Your IDEA is realistic.
    Thanks for the valuable tips and links.

    Regards,
    Jenifer Taylor

  13. Mark,

    I agree with your 5 Design Elements. Any serious blogger must take your ideas in consideration in order to have a successful blog. Thank you.

  14. Tony H says:

    Awesome Post! There is so much great information here that I am bookmarking this so I can come back later and review it a few times to integrate the information. The information on the flow of design elements is interesting. I am going to play with that for sure and use a heat map to see the results or changes. Thank you!

  15. Lee Atherton says:

    Very interesting article with lots of good information I used to evaluate my own site. My challenge is in finding a compromise between my designer and my SEO expert. They both have different ideas.

  16. Anne A says:

    I can appreciate the last comment, from Lee. Good design and good on page SEO seem to an interesting mix of elements. There is a lot to be said about creating a site visually that flows with the clients thought process and gets them to the call to action. A web designer who can do that, and drive organic traffic would be pure genius in my book!

  17. Paul says:

    This is one fantastic post. The information is price less for sure. This website is going into my bookmarking and I will check back often for more great information. I did not know about these 5 design elements but will be putting them to use in the next site that I build for sure. Will probably try different things one at a time to make sure that I know which ones are making a difference. But thanks for the great post, one that I will put to use for sure.