Subtle web design features can go a long way. Here are six design elements for your website  aimed to boost your conversions.

Increase conversions with these 6 modern web design trends

sep
4
min.
to read
sep

As web designers learn more about how people browse and make decisions online, it’s no surprise that many of the highest-traffic sites are starting to share many of the same modern website design principles. Minimalism, flat and material design, and elegant colors and formats drive conversions by streamlining the user’s experience on the site and encouraging them to complete forms, download assets and engage with your brand.

There are many UX and UI website widgets that marketers can integrate into their sites that will help generate new leads and guide users through their marketing funnel. These modern on-page elements – from buttons to scalable images to social icons – can encourage clicks and conversions by building navigational momentum for the user and allowing them to easily engage with the site.

Effective websites are dynamic, intuitive and often visually stunning. To bring your site into 2016 and beyond, take advantage of these six interactive, on-page elements to modernize your site and boost your conversions and engagement along the way.

1. Try ghost buttons instead of ‘plastic’ buttons

Ghost buttons are hollow or transparent buttons on landing pages that often serve as CTAs linking to digital marketing assets. They are easy to create, give off an elegant look and load fast due to their small file size. Their transparent design also lets the website’s branding shine through them, as seen in the example below from Slack.com. According to Top Design Mag, ghost buttons boast a high CTA response rate because of their pleasant, encouraging and clean aesthetic.Slack's sign-in option is a ghost button that lets the textured graphical background of the site show through.

2. Use cards with material, semi-flat design

Following similar visual principles as ghost buttons, the modern online “card” draws inspiration as much from Google’s aesthetics as it does minimal Swiss Design. The popular use of cards on websites follows what is known as material design – flat and simple, but intuitively suggests order, hierarchy and mobility. They can keep up with skimmers and scanners by presenting information in small, digestible chunks. Sites like Pinterest, Hotels.com and Etsy (pictured below) take advantage of these cards to improve their sites’ ease of use.

Etsy uses on-site cards to promote products and shops.

3. Engage users with micro-interactions

Online micro-interactions are quick, practically mindless actions, which include anything from clearing a Facebook notification to moving a slider to swiping down on a mobile page to refresh. Micro-interactions help to make your page more tactile, engaging and human. This helps keep the user involved at several stages throughout their journey and facilitate a connection between them and the machine.

Micro-interactions are the glue that keeps your audience using your site. The Next Web explained that users learn to love a product based on how it feels to interact with it – it’s “the details that make users love or hate an app or website.”

4. Make your page scalable

Use scalable vectors to ensure that your graphics and videos look uniform across platforms. When a page looks beautiful, and loads efficiently, users will have an easier time interacting with your content, and their path to a conversion will be easier. Large, bold graphics look great on a website, but there’s no magic image size that will satisfy the dimension of every computer screen, phone and tablet.

What might work well on a widescreen display might be cropped on a phone, or illegible on a watch. You work hard to ensure your graphics and video will look just right, so make them scalable so they can reach your entire audience, load quickly and have the same effect on your customers regardless of screen size.

5. Animate your site

Modern and rich navigational animations can make your site more effective at guiding your users toward action. Whether it’s something like a simple page-load design or a slight movement when the mouse hovers over a button, the animation will give the user some momentum when navigating toward a sale or conversion. As long as they don’t hurt site performance, some larger motion animations can also help drive conversions by catching the user’s eye, assigning visual hierarchy and even displaying products.

6. Use nonintrusive, subtle icons for social

Facebook social icon Twitter social icon Instagram social icon

Use clean, simple icons sparingly, on only the right pages, to modernize your social media marketing efforts. Share icons should be included on blog and creative content that you want people to engage with. Follow buttons should appear on most pages, within the margins at the top or bottom of the page. For more brand cohesion, develop custom social icons that map to your site style.

Whether a social media icon is designed to get your readers to share your content or to follow you, nobody likes a desperate or intrusive plea for social interaction. In some cases, if your social icons are too prominent in the deeper-funnel parts of your website, they can even detract from your conversions because they distract (and even irritate) the user and can cause them to navigate away. Additionally, if your share numbers are low, and publicly displayed, it can act negatively reinforce your audience’s readiness to convert.

There was a time for buttons like these:  Remember gifs like these form the 90s? Don't use them. Remember gifs like these form the 90s? Don't use them. And that was long ago.

Modern website elements that guide users toward conversion goals should be responsive, bold, artistic, minimal and simple. When their purpose is to remove the friction in your customer’s journey toward converting, your on-page dynamic content should make that trip as easy and natural as possible.

Want to dig deeper into the “invisible” elements that improve UX? Download our “Marketer’s Guide to UX” today.

Ben Silverman
Ben Silverman is a former marketing writer for Brafton. His writing experience dates back to his time reviewing music for The UMass Daily Collegian at UMass Amherst. Ben comes from a background in marketing in the classical and jazz industries.

Thoughts?

  • http://www.globalwebforce.com/ Hitesh Parekh

    Always good to change up our landing pages and primary pages with modern designs and these points are very handy as I am in the midst of content engagement audit where it is time to freshen up some content.

    • Ben

      Thanks Hitesh!
      What are some of the points your are considering in your audit?

  • Ben

    Thanks for reading Cara – glad you enjoy our blog!

  • Rahul Aggarwal

    Hey Ben
    Yet another great post as always, but most of these points focus on making the website more interactive. If we consider the fact that most of the marketing on websites happens in the blog posts and not the website/ homepage then the methods above seem insufficient. Rather the content itself needs to be interactive. What do you say? Also, what are your thoughts on Interactive Calculators as Lead Gen tools. Can you take a look at- http://goo.gl/GdX9yB and give your thoughts?

    • Ben

      Hi Rahul – thanks for reading.
      I think that the more interactive a site is, the better it can drive conversions. Many of the above examples can in fact be used on a blog – ghost buttons in inline CTAs, flat modern design, animations, scalability etc.
      I think tools like interactive calculators, quizzes, animated annotations and popovers are all great tools.

      • Rahul Aggarwal

        Since you mentioned, I am writing an article ’10 Quintessential Interactive Content Types’ to be published on Monday- Which is basically a listicle containing quotes from industry experts about – how well interactive content has worked for them sans static blog posts, and which interactive content type (surveys, calculators, quizzes etc) is working well for them

        Wonder if yo’d wanna contribute?

        • Ben

          Thanks Rahul! Let me know what you might need from me, and I’ll look around and compile some examples of interactive content that we’ve published in the past.

          • Rahul Aggarwal

            It’s basically a listicle of quotes from top experts on the following types of interactive content. Interactive Calculators
            Assessment
            Polls and Surveys
            Interactive Infographics
            Quizzes
            Graders
            Games
            interactive call to action( in ads and elsewhere)
            AR
            Contests

            So if any particular one of these worked well for you/clients/collaborators in the past that you wanna quote that would be great.
            Here’s the quote that I received for Interactive short videos for example- “As a digital marketing blogger what’s important for me is to find new ways to truly engage with my audience so that it does not turn into yet another blog that depends on keyword crunching and ‘SEO tactics’ to get traffic or revenue. And that’s exactly what short videos do. Almost all my top ranking articles that get maximum traffic and revenue contain at least one short video. Like this post about on-page SEO that ranks #1. I can’t say enough on how videos boosted the performance of my posts. And now I use them in almost every single post.

          • Rahul Aggarwal

            I wonder if my last reply ever reached you.
            The article has been delayed due to lack enough content.

            If you could still give me a quote, that would be awesome!!
            Thanks

          • Ben

            Hi Rahul – send me your email address, and I’d be happy to send you over a quote!

          • Rahul Aggarwal

            Sure it’s rahul@outgrow.co
            Thanks.

  • https://www.amrowebdesigners.com Roel Mahalin

    great article, I want to apply this to increase my conversion. My conversion rate is very low I will redesign my website again :)

    Cheers,
    Roel
    http://www.amrowebdesigners.com