tips & tactics

Tips & Tactics

Close the Deal - Get an instant boost in conversions by ending your pages with a clear Call to action (or next step...but for real - do a call to action)

A new user comes to your site - eager to have their problem solved by your business. They aren't 100% sold from your value proposition at the top of the page. 

As they begin to move down the page:

Benefit 1 = YES

Benefit 2 = that would make my life so much easier!

They gain more excitement that YOUR business can solve their problem. What is this.... raving testimonials! People just like me who have the results I want...YES!

Stop it - another free add-on. They are salivating at your product and reaching for their wallet.

They arrive at the bottom of the page to the footer..... and leave the site.

"WHAT HAPPENED!" You scream as you view your luckyorange video.

I can tell you what happened. You did 99% of everything right...

accept....

Asking them to take action. Reintroducing a the call to action for a user to buy / contact / sign up / etc for your product.

One of the most valuable strategies I always propose to my clients are to make sure that there is a clear and concise call to action at the bottom of the page. 

Just one line of copy and a button. That's it.

Take a look at these 2 wireframes. 

 

The one on the left is the EXACT same layout (and same copy writing) but leaves the user hanging and not knowing exactly what they need to do next. As soon as this "I don't know what to do next" enters the user's mind they are more likely to leave - even if the product or service is perfect for them.

The one on the right introduces the Call to Action Section at the bottom of the page. This layout guides the user down the page and then gracefully prompts them to take action (or the next step). 

It is 100% clear what the user needs to do next (both visually and by the location on the page)

Taking it to the next level

For an extra impact, implement your Call to Action Section at the bottom of every page.

Why?

Odds are your users are coming to a blog post, an interior page, or other pages rather then your main landing pages. To ensure all users know what to do, place the Call to Action Section right above your footer on all pages.

Never lose another conversion to users who don't know what to do next. 

Tips & Tactics

Up engagement by harnessing the power of great page flow - Create overlapping elements

I bet you have taking a look at a good amount of sites. On some you find yourself easily moving down the page with ease and others you just seem to get stuck up towards the top.

One of the main strategies being implemented here is Overlapping Elements.

Overlapping Elements can be used on really any page but especially pages like:

  • Homepages
  • Landing Pages
  • Sign up pages
  • Product pages
  • Product story pages (Yes sir - Elegant Seagulls)
  • About pages
  • Pricing pages
  • etc

Take a look at these 2 layouts.

Layout 1

Layout 2

Which one do you notice yourself easily moving through the design?

Yeah, the second one.

The first one has almost the identical layout but the second by having a few areas of interest that overlap make all the difference in having the user move down the page, maybe to learn more about a product or see benefits of a service.

A few things to keep in mind:

  1. Use overlapping strategically - like anything if you do it too much it isn't effective
  2. Be mindful of the depth you are creating on the page - if you think of looking at the page from above, create a Z-index grid to only have a few levels to keep your layout looking clean and organized
  3. Be thinking "how will this look on mobile" - Probably something you are keenly aware of at all times, but with a smaller horizontal space, you might not be able to overlap sections as elegantly on mobile devices.

Want to take it up a notch?

Play around with subtle and elegant animations as the user flows down the page. Animations to draw the user into the page to up interest and engagement are a great component to add.

Bonus - If no overlapping is present (to overlap the various sections requires more custom design and strategy to execute) could be an indicator that your site is from a template or little strategy has gone into the design. This isn't always the case but it is worth noting. 

Tips & Tactics

The down and dirty 5 point checklist for successful form fields - Boost the effectiveness of any form on your site or app.

Intuitive forms = more conversions and better engagement.

I'm willing to bet that EVERY site or app has a form field that is critical to conversions or engagements. 

We are talking:

  • sign ups
  • registers
  • contact forms
  • webinar sign ups
  • billing info
  • login information
  • forgot password
  • personalization of products
  • etc

Here is an example of 3 form fields with very poor UX

At face value it looks clean and simple however if you dig a little deeper it is missing key principles that make a great form successful. Questions arise such as:

"I got distracted and forgot what I will filling in for the second form field"

"I just moved and don't have my zip off hand"

etc

To make sure your form is as effective as possible you want to make sure all these elements are present for each field:

  1. Titles for each form field
  2. Hint text (not critical but can be very helpful
  3. Indicate if a form was filled out correctly or incorrectly (I have always hated completing a HUGE form and then something is incorrect but I have no idea where the error is located)
  4. Clear visual states (completed, incorrect, active, etc)
  5. Aids to help the user complete the form quickly and accurately

This form is on point with great UX for the user:

Ahh much better. Lets take them one at a time:

1 - All fields have clearly indicated what needs to go in the form field

2 - clear "hinting" text of what would go in each text box

3 - the complete fields clearly indicate if this is an acceptable entry (ie. email doesn't have an @ or .com/.org/etc) - this reduces the time and effort a user would have to take to figure out which is incorrect

4 - Clearly showing the user exactly what state they are on

5 - Helping the user complete form fields by presenting functions like "use current location" for them to quick click and their current zip is placed in the form field

But Zach, that looks so boring. 

Allas! You can take these same principles and make forms that are more on brand as long as those 5 principles are present.

Or this

BAM! Options are endless and only bound by your creativity and innovation.

Go get em!


Want to see if your forms are effective? I'm not just saying looking at google analytics and seeing how many people come to the page and how many sign up. I mean understanding at exactly which field you are loosing them? How to streamline a sign up or opt-in?

Sign up for my newsletter to receive insights like this on how to improve your site. 

Tips & Tactics

Instantly get more conversions right from your top navigation

Ahhh, yes. The nav bar (navigation bar at the top of your page). The eyebrow of your website.

Ok no one call is that but it is a critical area to focus on for conversions.

When looking at your nav bar your main focus is 2 fold:

  1. The name of your business
  2. Directing users/customers to do what you want them to do

That is it.

Everything else is just in support of those 2 objectives.

This would be the wrong way to go about it:

When you first look at this, I'm sure you see the business name first and then for a moment lock up because everything else has the same visual weight.

Though it is clean there is WAY to much going on:

  1. logo with business name
  2. social media links
  3. numerous links to who knows where
  4. a call to action
  5. social media links
  6. phone number
  7. fax number

 

7 elements in total may not seem like a big number however that is 7 different elements that a user has to mentally process before moving on or taking an action. The more mental energy your users/customers use the more fatigued they will get which will result in a poor user experience. I'm sure all of these are important to some degree in your business, however you don't need ALL of them in your header to have users convert or take a step towards converting.

Instead of that do this:

 

Notice the difference.

Distraction free and focused on a goal :)

You know EXACTLY where to go - the CTA

How do you do this...Easy

1 - From your business goals - what is the main action you want a user to do on your site (sign up, buy, register, download, etc)

That is your Call to action for your site

2 - Your navigation should help drive users to that call to action. That could be providing additional features or benefits, pricing, etc. Your navigation should be as minimal as possible to reduce clutter and distractions.


What are some of your hang ups on creating conversion focused navigation on your site?