The solution to the challenge lies in the positioning of the design elements within your website.
Not sure what that means or how to do it?
Don’t worry. We’ll guide you every step of the way.
There’s an easy answer to that question!
52% of website users choose to not purchase from a website due to poor navigation and the overall aesthetics of the website.
In short, the position of the design elements of your website matter – a lot!
Strong call-to-action buttons, directional cues, large visuals and a consistent flow should never be ignored when designing a website.
If they’re neglected, they’ll cost you in the long-run.
If you're a business owner looking to give your website a facelift – keep reading.
The bite-size tidbits in this post will put your company on the fast track to better collaborating with your design team when creating your website.
If you’re a designer, this blog will provide you with great design positioning cues to ensure your clients are getting the maximum return on investment.
Whether you’re thinking about a website redesign or working on a client’s website, it’s important to first understand the value of a website audit.
Before diving into a redesign, conduct a website audit on your client’s site or your own.
Understand its existing challenges and find solutions for element positioning and content-word selection.
Below is an example of an audit, done by FlightMedia.
Pro-Tip: Try using tools such as CrazyEgg, a heat-mapping software that enables you to gain a better understanding of how visitors are interacting with your website.
Or you can try MouseFlow, an analytics tool that records users’ behavior in real time.
Want to convert website visitors into customers? Here’s how to harness the power of design element positioning to your benefit.
We’ll use the redesign strategy for Simply Investing – a small business offering financial tools for investing - as a guide.
We’ll dissect the 10 design elements you need use to get the visitor’s attention and position them to make online purchases.
Telling a convincing story allows users to connect with the product or service.
In this way, you can leverage the user’s feelings and evoke emotion - a strategy that results in action, such as making a purchase.
The original home page design, below, lacks real-life imagery and doesn’t connect the audience with the product or service. The two-toned coloring feels dated and the limited call-to-action provides an unclear path for what the user should do.
In the new home page design, we carefully selected the copy, images, and colors. We focused on the personal touch (such as using images from real life, product or nature) to connect with emotion and ultimately convert the user into a buying customer.
Highlight your product or service value through design.
Give users the chance to “test drive” or preview the product before purchasing. Some options include letting visitors “Watch a Sample” or “Download the Report” to get an up-close look at the product.
Allow the user the opportunity to make decisions.
In the below course page design, we emphasize value by using contrasting headlines, breaking up the text and giving the user options. As a result, the value proposition looks much more enticing to the user.
Strategically use images that will direct the users to the “bulls-eye.”
Note that below, the woman’s hand is directly positioned to point to the call-to-action “Get Report.”
This wasn’t a mistake. It is intentional.
By pointing towards the actual product, 84% of users look at the product on the home page. The user’s eye follows straight down the woman’s arm to the purchase call-to-action.
Organizing and prioritizing your navigational elements are critical for the user to understand the site’s structure. In order to ensure visitors get to where they need to be, you must first map out a clear path.
Below, the blue “Invest” button on the redesign is the primary call-to-action for the user. It directs visitors to the purchase page for products and services offered.
This is where you will make the sale. So drive the user there!
Change the color, use a larger font, or position the hook natively to the other navigational elements so your potential buyer sees it.
The site’s original blog content was quite heavy and it lacked visual breaks.
The blog didn't allow users to get a quick snapshot of the article. Instead, it forced them to scroll through an entire post before getting to the next one.
The user experience was lost.
You should tease your audience.
Have them saying “I want more!” and follow with a strong call-to-action.
In the redesign, we provided a summary of the blog articles on the main blog page, so that users could preview several blogs at once and click-through to read more.
The simplified design promotes engagement and interactivity, simplifying the way users can get to content.
Make your visuals large and in charge!
The user needs to be able to visualize what you’re telling them.
The original blog’s design had limited visuals. The articles that did use images failed to convey what the story was about.
Great design element positioning happens when you use great visuals that convey the story’s idea. In addition, the location of the image matters, too. It changes the way a user interacts and clicks through websites.
In fact, using detailed branded images can help gain 67% more audience attention.
Design elements like advertisements and social links can take the user away from the direct business goal – the reason why your customer is visiting the website.
Limiting and/or repositioning these elements to flow within the design could increase the number of users that join your mailing list, respond to free offers, and ultimately purchase your product or service.
8. Distinct Color-Inspired Calls-to-Action
Color has almost everything to do with how your user interacts with your website. Interestingly, 85% of shoppers will purchase products based on color.
The content should directly complement the calls-to-action. Here’s how:
The action has to be easy. Design must be big, bold and on point.
Choose button colors on purpose. There should always be a reason behind every color choice.
Selecting blue for Simply Investing’s calls-to-action creates a sense of trust and security.
Pro-Tip: Avoid taking users to third-party websites as much as possible. Website visitors will get confused and wonder if they’re still on the same website. In addition, you’ll increase the likelihood of losing the lead. Keep the experience familiar, consistent and on the same website whenever possible.
Make your call-to-action is simple and creative.
Allow your website to show a little business character. Users are intrigued by visual differences. Don't take the safe route. Try something different.
Here’s an example of how NOT to do design. The original design lacked flare in these areas:
The graphics are small and content is hard to read.
No calls-to-action were used to guide visitors to where they should click.
The icons are outdated and not visually appealing for today’s industry trends.
The site featured limited visuals to the complement content.
The rule of thumb here is: Embrace creativity, and don’t be scared to go outside the box. But go beyond it with a purpose.
Say the same thing multiple times throughout the visitor’s experience, only visually display it differently every time.
You maintain the same goal (closing the sale) but stimulating the user and keeping them engaged.
Take a look at these calls-to-action.
All of them serve the purpose of collecting the user’s email address in order to grow an email list. Visually, however, they look different on each page.
But the directive (to “Sign Up”) is consistent.
Keep your user engaged by changing up the scenery. In doing so, you’ll find that you’re able to close more leads and generate more revenue.
Designing for the web is a challenging task, given that most users view a page for less than 15 seconds.
With careful attention to design element positioning, you can boost conversions and drive sales.
Here are a few more design tips:
Use A/B Testing. Try variations of design elements by testing different shapes, colors, typography and positioning of elements. A/B testing is essential to ensure you understand how users interact with your website.
Add Character. Take your own photos when possible. Website visitors respond better to real-life photography. Select graphics that are inspiring and stay away from ones that look like stock photos.
Test Your Calls-to-Action. Tweak the content. And try again!
Grabbing the attention of website visitors isn’t easy.
You’re competing for valuable seconds in the life of the average customer, and your competition is pulling out all the stops.
Incorporating results-oriented design element positioning will help you convert leads into customers. It’s also a surefire way to send prospects directly to the checkout line!
What's the main element you've found has converted well on your website?