Web Design & the Art of Conversion

User Experience and Conversion Tips from Cuppa SEOWhat’s the first thing you see when you look at the image in this blog post? I’ll bet it’s one of four things:

  • The Tandanori Yokoo headline
  • The man displayed over the rays
  • The baby in the lower left corner
  • Or the hand in the lower right

This piece of art was created by graphic designer Tadanori Yokoo in 1965. Although this piece, and much of Tadanori’s work, is known for the layering of red rays into culturally charged art, it’s also an excellent example of how graphic design can control the eye of the viewer.

How Tadanori’s Art Relates to Conversion on Your Website

When it comes to web design and conversion, there are best practices that we often look to follow. These best practices are based on testing that has determined where a viewer’s eye is naturally attracted to on a web page. But just because something is a best practice, doesn’t mean it’s your only option — or the BEST option for your website. In this blog post, we’ll be focusing on graphic design and conversion strategies for a homepage. But first, a quick definition …

What is Conversion?
Conversion is a strategy that takes a website visitor from where they are, to where you want them to go. For example, a visitor lands on your homepage, and you want them to call to make an appointment (let’s say you’re a dental office). Conversion occurs when the viewer clicks on the “Call Now” button (on their smart phone) or dials the number they see on their desktop. The button and the phone number are typically referred to as a call-to-action (CTA) — a visual cue that helps move the viewer along to where you want to them to go.

But in order to be found, the CTA can’t just go anywhere — it needs to be seen, which is where best practices for conversion come into play.

The “F-Zone”
The sketch below identifies the hot spots of a web page. In other words, areas where the human eye is naturally drawn to. These are the areas we typically want to place our important information, in this case, the call-to-action.

F-Zone Conversion Hotspots

The Alternative to the F-Zone
What Tadanori’s art shows us is that through the use of aesthetic, we can break the rules here, and instead of depending on the eyes natural tendencies, actually direct they eyes to where we want them to go — keeping the level of conversion high and ensuring an excellent user experience.

Here’s an example of how Tadanori’s image can be translated into a desktop homepage, with all of the important elements appearing above the fold:

Desktop Web Design Conversion Strategies

As you can see, the bottom right element is completely out of the F-Zone, but is easy to spot and still catches the eye.

Here’s an example as to how it can be further manipulated to be effective on a mobile device. Since the F-Zone doesn’t come into play on mobile as it does on desktop, there’s a different set of best practices. The sketch on the left is a Tadanori-centric solution vs. the image on the right which offers a more traditional solution for solid conversion. The modified design still works, and actually fits quite nicely into the typical best practices for conversion on mobile — in this case with two clear call-to-actions visible without the need to scroll.

Mobile Web Design Conversion Strategies

In addition to delivering a solid conversion strategy, keeping desktop and mobile design elements in mind WHILE creating a website offers additional perks, including:

  • An excellent overall user experience (UX)
  • A high level of continuity between desktop and mobile aesthetic, which helps you position your brand in a cohesive way

We hope these concepts help you think differently about your conversion strategies and the design elements of our homepage. 

Need help with conversion strategies?
Contact Cuppa SEO to schedule a complimentary consultation, very possibly over a cup of coffee!

Tagged with: , , ,
Posted in Conversion, How To, User Experience (UX), Web Design

Leave a Reply

Your email address will not be published. Required fields are marked *

*

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Subscribe to Our Blog

Enter your email address to subscribe to this blog and receive notifications of new posts by email.