Headed to INBOUND '16? We'd love to connect with you!  Meet With New Breed

New Breed Blog

Get Blog Updates

6 Web Design Elements that Will Increase UX and Conversion Rates

Zane Gundersen
Jun 23, 2015 9:15:00 AM  |  Zane Gundersen

web_design_elements.jpg

Companies today are investing more than ever in their online presence and have adopted many leading user-experience trends seen previously only in the B2C space. This adoption has resulted in cleaner and more compelling designs that can bring life to a brand and create an experience that leads to higher on-site engagement and conversion rates.

However, clean design alone isn't always enough. In today's post, we're going to look at six key user-experience elements that can help you heighten the design of your website.

Incorporate these six Web design elements for higher conversion rates and improved user experience:

Hover states

Use different CTA hover states. This effect helps make it clear that the button is clickable and creates an interactive feel.

For example, Linium, an IT consulting firm uses hover CTAs to strong effect throughout its site, most prominently on its homepage. Whenever you hover over the CTA button, the arrows disappear and the microcopy centers itself. Additionally, if you hover over the images for featured solutions or case studies, a green outline appears so you know it's clickable.

Here's another example of a more subtle hover state that we use on the New Breed site:

Hover over this CTA and see what happens

Fade-in elements

Load time is a critically important piece of both user experience and Google's algorithm. However, sometimes you're required to include an element on a page that can't load as fast as the other pieces (HubSpot CTAs and sharing modules with CSS styles are a perpetual offender of this).

You can use fade-in elements to help accommodate this load time while still optimizing the visitor's experience, but be careful. One wrong move and you could hinder the user experience rather than enhance it. Be sure to keep fades to one second or less, so as to not distract the viewer and force him or her off the page.

See how Bizible's pricing page uses a simple, one-second opacity effect to ensure that the free trial CTAs load nicely with the rest of the page.

Full-image CTAs and clickable areas

Mobile responsiveness is necessary, so consider different design elements that elevate the user experience on both desktop and mobile devices. Almost always, the best design for mobile use is one that is simple, clean and actionable.

There are a number of ways to go about making your designs transferable for mobile. One way, for example, is using full images as CTAs and links, rather than solely a CTA button.

Did you know that 90 percent of information transmitted to the brain is visual? Visuals are processed 60,000 times faster in the brain than text. If you're working toward increasing a click-through rate, on-page time, visitor-to-lead conversions, full-image CTAs are a great way to do so. Check out this awesome example from ScreenSteps' website.

screensteps_cta.png

Smooth scrolling from anchor links

Have you ever clicked a link on a page and were suddenly placed on a different section of the page? That's because you clicked an anchor link, which can navigate you either to a different site or to a different place on the current site. If you utilize anchor links to jump to different places on a page, it can be jarring and disorienting for the user.

To accommodate for this, use secondary navigation and smooth scrolling. The goal is to get the visitor to the destination content quickly and smoothly. To be successful, the page needs to move at a rate that brings the visitor where he or she wants to go quickly, but not so quickly that he or she doesn't recognize the content being skipped over.

Minify and Lock the Menu Bar

Navigation is one of, if not the most, critical components of a website when it comes to the user experience. Traditionally, visitors have to scroll to the top of the page to access the navigation menu. But as design has evolved and sites have leveraged longer-scrolling pages, this practice is no longer user-friendly. To remedy this, use fixed or "sticky" menus, which can help visitors explore your site easier (and longer).

A study conducted by Smashing Magazine, tested two nearly identical websites. The only difference was that one had standard navigation and the other had sticky navigation. Participants were asked to do five different tasks on each. The study found that the participants could navigate sticky menus 22 percent more quickly, and 100 percent of participants preferred sticky menus without knowing why.

Our advice in leveraging sticky navigation:

  • Be sure the menu follows the user down the page
  • Minify the header so that it takes up less visual real-estate and allows the user to consume the necessary content.

At this point, you should even be able to see our own minified navigation as an example, or check out WorkflowMax. Another great usage of this technique can be seen on the ScreenSteps pricing page. As you scroll, you'll see the different package options are locked to the top of the featured-pricing table.

Interactive forms

Interactive forms are an emerging trend that we're beginning to see more and more, especially at the bottom of the funnel. Conventionally, forms ask visitors to input only their information. New strategies invite interaction—which leads to increased conversions—and place the form directly on the site page instead of on a landing page. Encouraging this buy-in without asking for explicit conversion is a strategic way to draw visitors further down the funnel.

Bizible has done this with great success; check out the inline form at the bottom of its homepage.

These elements may seem secondary to your website design. They are not. Instead, they'll help take your website experience to the next level. Visitors will want to come back time and again not only to consume your content, but also to enjoy the experience you provide while they are on any page of the site.

new-breed-marketing-website-redesign

Convert
Design

Comments

Comments

Zane Gundersen

This post was written by Zane Gundersen

Zane is the Lead Designer and Developer at New Breed and is the brains behind many of our impressive web projects.

Connect with Zane

    Inbound-Marketing-Guide