Subscribe
Join 40,000+ sales and marketing pros who receive our 4x a week insights, tips, and best practices.
Thank you! You have been subscribed.

Free Course: Elements of a Great They Ask, You Answer Website

Start the Course Subscribe
Join 40,000+ sales and marketing pros who receive our 4x a week insights, tips, and best practices.
Thank you! You have been subscribed.
Learning Center
Learning Center
Close
The IMPACT Learning Center

Free resources to help you master inbound marketing and They Ask, You Answer

Access the Learning Center

Access the Learning Center

Access the Learning Center
learning_center_grey__What is They Ask, You Answer-v2-black

What is They Ask, You Answer?

What is <span>They Ask, You Answer?</span>
Articles, Podcasts, & Updates

Articles, Podcasts, & Updates

Articles, Podcasts, <span>& Updates</span>
learning_center_grey__Free Courses and Certifications.svg

Free Courses & Certifications

Free Courses & <span>Certifications</span>
On-Demand Keynotes & Sessions

On-Demand Keynotes & Sessions

On-Demand <span>Keynotes & Sessions</span>
Events
Events
Close
IMPACT+ Membership
IMPACT+ Membership
Close
Services
Services
Close
Navigation_8_2021_taya

They Ask, You Answer Coaching & Training

They Ask, You Answer Coaching & Training
They Ask, You Answer Workshop

They Ask, You Answer Workshop

They Ask, You Answer Workshop
Navigation_8_2021_workshop

Inbound Marketing Services

Inbound Marketing Services
Navigation_8_2021_website design - monitor

Website Design & Development

Website Design & Development
Navigation_8_2021_hubspot implementation

HubSpot Training & Implementation

HubSpot Training & Implementation
Navigation_8_2021_virtual selling

Virtual Sales
Training

Virtual Sales <br>Training
Navigation_8_2021_swell - paid ads

Paid Search & Social Services

Paid Search & Social Services
Become a Certified Coach
Become a Certified Coach
Close
... Inbound Marketing Web Design
Close
Elements of a Great They Ask, You Answer Website

Free Course:

Elements of a Great They Ask, You Answer Website
Start the Course
Elements of a Great They Ask, You Answer Website
Free Website Course
View Elements of a Great They Ask, You Answer Website
Elements of a Great They Ask, You Answer Website

Free Course:

Transform your website into your best salesperson and get set up for inbound marketing success!

In this course, you’ll learn:

  • What content and features your website needs to succeed with inbound marketing
  • How to design your website to best educate your audience
  • How to gradually make improvements or redesign entire elements of the website

4 UX Hacks for Reducing Visual Friction On Your Homepage

By Christine Austin

Christine Austin also recommends this free course, Elements of a Great They Ask, You Answer Website.

4 UX Hacks for Reducing Visual Friction On Your Homepage Blog Feature

All of us are constantly faced with elements of visual friction whether we choose to acknowledge them or not.4-ux-hacks.jpg

Even when sites are internally tested and revised in an effort to remove friction, some areas remain overlooked or invisible to its creators.

When it comes to designing and developing out your homepage, it’s important to first understand how your users will most likely behave on it. This will help you better understand how it’s layout, design, and interactivity should look and function.

Free Course: Elements of a Great They Ask, You Answer Website

And even when you think you have your users all figured out, your design may open up entirely new areas of friction you failed to see until your users started interacting with it.  

To understand how to design or clean up your homepage, here are four insightful tips to help create a more seamless and lean user experience.

Create Visual Balance

Visual elements exist in many ways such as images, colors, typography, and graphics.

When using them properly, you have the power to direct the user's cognitive interpretation of your web page and attract their attention to proper areas in a certain order.

 ux-hacks-visual-friction-nixon.png

Look at the ecommerce website Nixon who chooses to avoid overwhelming the user with multiple products on their homepage. Instead, they use a hero section with button linking visitors to a more robust list of products. The section below the hero only highlights a few specific products.

In terms of design, Nixon uses large visually stimulating background images set in a gridded structure to separate sections. Even the content in the hero section is carefully placed in an open area of the background image away from the watches to avoid creating a visual disturbance.

By simplifying your layout and using similar design elements throughout your page, your website will feel unified. From here, you can leave it to small visual cues to pick out specific areas you want your users to pay attention to.

Keep Layout and Branding Consistent, but Interesting

As your homepage is being designed, it can be tempting to make your designers stray away from your branding guide to try bringing attention to certain buttons, headers, content, or images.

While you don’t want every button to be the same color and each background image to be a group of people in suits pointing at things, too many visual inconsistencies could end up confusing the user, rather than helping them.

Instead, you need to keep the rhythm of your website interesting to avoid losing the visitors’ attention and keep them on the visual flow you have created.

ux-hacks-visual-friction-invision.png

Take a look at Invision’s home page. Despite the grey and black color pallette and similar section layout throughout the page, they use large, animated images with specific accent colors to show their product in action before you even use it.

Another welcoming element is the use of people's’ images and testimonials. Rather than spending time and space telling you how awesome they think their product is, they tell you what people who are using it think. Adding their users’ photos to the quotes also provides a human element and transparency, helping your users gain more trust in the product you may be selling.

The trust these types of images and graphics build will automatically ease users initial uncertainty about a product, and will create a desire for them to learn more about it. This will drive them to further explore your homepage and the rest of your site.

Section it Out

Just like chapters in a book, your visitors will need your information put into sections so they understand what content is where and have an easy time digesting the page.

You need to look at the information you want to display and choose how to properly section it off based upon what makes sense together and in what order. After you figure out that, you can let the layout and design do the rest of the job to bring proper visual hierarchy within each section.

ux-hacks-visual-friction-hubl.png

Hudl separates each section with a unique layout and design that fits the needs of the content. Each section has a different colored background to easily visually separate them before reading anything. The content in the sections are also chunked into smaller bits and are occasionally accompanied by icons to add a visual stimulation and differentiate each part further

Sectioning off content like this also increases the likeliness that they will want to engage with the content. As long as it’s chunked properly, users will also be able to retain the information more easily.

Keep The Page Short

We all have a lot of information we want our visitors to absorb but we can’t expect users to always read all the content we want to put on our homepage.

The battle is trying to decide what content is the most important to your users and eliminate or move what isn’t needed. Afterwards, you then simplify those sections so that visuals and content are condensed the most they can be, without losing quality.

ux-hacks-visual-friction-pipeline.png

Pipedrive's old home page contained large amounts of content, multiple calls to actions, and other places of friction along the user’s journey down the page.

Through many rounds of testing, Pipedrive realized that the most suitable option would be to remove a lot of the dense content, and put a CTA for a free trial with quick bullets about the product near the top of the page. There are also testimonials below which allow users a chance to read about how others liked the product if they are unsure about trying it.

Key Takeaway

Friction comes in many different forms and it can be hard to figure out where it is occurring on your own page.

Before you go jumping in and change a bunch of items blindly, try creating different prototypes of your site and implement usability tests. This will allow you to rethink the flow of your site and allow you to gain a deeper understanding of your potential customers and how to develop the proper usability for them.

 

Elements of a Great They Ask, You Answer Website
Elements of a Great They Ask, You Answer Website

Free Course:

Elements of a Great They Ask, You Answer Website

Transform your website into your best salesperson and get set up for inbound marketing success!

In this course, you’ll learn:

  • What content and features your website needs to succeed with inbound marketing
  • How to design your website to best educate your audience
  • How to gradually make improvements or redesign entire elements of the website

Topics:

Web Design
Marketing Strategy
Published on June 9, 2015

Recent Articles

8 Crucial Elements Every Homepage Should Have [+Video]
January 15, 2022 • 6 min read
What Does a Great Inbound Marketing Website Look Like in 2022?
January 10, 2022 • 11 min read
What Makes a Good Website Design? 7 Award-Winning Examples To Be Inspired By
December 18, 2021 • 9 min read
What Is a Learning Center and Why Does My Website Need One?
November 22, 2021 • 6 min read
5 Prep Secrets for a Smoother, More Successful Website Project (+ Infographic)
October 14, 2021 • 7 min read
7 Self-Service Tools on Business Websites to be Inspired By
September 29, 2021 • 7 min read
Google Shares New Tools to Audit Website User Experience
August 12, 2021 • 3 min read
New HubSpot CMS Hub Starter Tier Released for Growing Businesses
August 6, 2021 • 4 min read
ICYMI: Digital Marketing News Update for July 26, 2021
July 26, 2021 • 6 min read
ICYMI: Digital Marketing News Update for July 19, 2021
July 19, 2021 • 6 min read
What the Heck is Going on With All the Google Updates? (Content Lab, Ep. 54)
July 15, 2021 • 1 min read
8 Best Business Website Designs (Updated for 2021)
July 15, 2021 • 5 min read
ICYMI: Digital marketing news update for July 12, 2021
July 12, 2021 • 5 min read
Too many internal links in content can confuse Google about site structure
July 9, 2021 • 5 min read
Google July 2021 core update rolling out over next 2 weeks
July 2, 2021 • 4 min read
6 tips for building a great diversity and inclusion page (+examples)
June 29, 2021 • 7 min read
Google punts third-party cookie ban to 2023 for 'responsible planning'
June 25, 2021 • 6 min read
8 types of website performance metrics you should look at on a monthly basis
June 24, 2021 • 11 min read
Finally, Google page experience core update is rolling out
June 18, 2021 • 3 min read
8 Business Blog Design Examples That Keep Readers Engaged
June 16, 2021 • 6 min read
5 ways you can use the StoryBrand framework to make a better website
June 14, 2021 • 5 min read
What is a Featured Snippet? [Definition + Examples]
June 10, 2021 • 4 min read
Google June 2021 core update live, July core update coming
June 4, 2021 • 3 min read
Google's June page experience core update will be mobile first, then desktop
May 21, 2021 • 3 min read
Every website agency talks about strategy; How is IMPACT different?
April 19, 2021 • 5 min read