Little Big Details - ‘Keep it simple’ and Reduce friction | ‘Be My Guest’

Reflection on my 3rd Week of Conversion XL - conversion optimisation degree

Again, so .. much .. juicy content in my 3rd week of CXL optimisation course!

Today I’m going to cover visual hierarchy and ways to keep design simple and reduce friction (and abandonment) to improve conversions.

Again I’m going to focus more on e-commerce (e-comm signups, shopping carts & logins), however we are all humans, and many principles still apply for somebody in the B2B marketing space! (the same biases and psychology comes in to play when you’re researching a larger business purchase).

One continuous theme with CRO/ something that stands out within the CXL teachings is, ‘common sense’ isn’t always that common, or rather we all need to step back and ‘see the forest through the trees’, but also sometimes we need to zoom in, it’s about the Little Big Details.

You can visit here https://littlebigdetails.com/ to see well researched, and crafted User Experience and User Interface improvements CRO and UX experts have put in place. Ultimately these hacks can build loyalty and stickiness and sometimes can improve conversions, if you prompt somebody and you ultimately make their life easier (based on insight from observed behaviour in user testing studies).

No alt text provided for this image

FOCUS!

FOCUS!

No alt text provided for this image

Visual hierarchy, and ‘keeping it simple stupid’ is super important.

It’s actually not always easy to do either, as Braden Kowitz puts it “Why you should move that button 3px to the left”, sometimes you need to be a perfectionist to keep the homepage clear and clean https://library.gv.com/why-you-should-move-that-button-3px-to-the-left-c012e5ad32f7 

Start with prioritising, something a lot of people and businesses don’t do well. What is the business objective and one clear call to action you want on your homepage?

Updatey has 4 large font keywords, and a different coloured button ‘Get Started for Free’. They appear to have done some market research also, as they’ve ‘nipped in the bud’ and answered what must be a common objection, and included in grey font ‘no credit card required’ (as user most likely thinks, “looks good, I don’t have time, bugger it, lets give it a go!”).

First impressions really count on a homepage!

No alt text provided for this image

I’d recommend not using a fancy wireframing tool, but get drawing like your kids do (if you’re lucky/ unlucky enough to have kids LOL!). Get out a piece of paper and layout it, 1, 2, 3, 4 (with pencil, rub it out and start again if necessary). What hierarchy of visuals do you want for your homepage? And do it for other pages while you’re at it. An example is below.

As CXL puts it “The biggest eye catcher is the huge piece of meat (make me want it), followed by the headline (say what it is) and call to action button (get it!). Fourth place goes to a paragraph of text under the headline, fifth is the free shipping banner, and the top navigation menu is last. This is visual hierarchy well done.”

No alt text provided for this image

Can you have more than 1 call to action? Yes but think...very...carefully about whether you really need it, you are most likely to dilute the conversions by having too many places for somebody to focus or too many CTAs.

Remember Noise = distraction

I saw in the chatter on the excellent Conversion XL Facebook page (open to those who enrol in CXL courses) a similar question asked yesterday “I'm working on a home page where the client wants to address four different target groups. The idea is to have four CTA as the home page's main feature to lead the visitors to their respective landing pages. Can you think of websites that have done something similar? Has this approach worked for you before?”

As one member of the community pointed out, Hubspot does this/ has more than 1 CTA, see below, but these are 3 distinct products, and they still have 1 core message, ‘There’s a better way to grow’.

As Peep Laja (founder of Conversion XL) put it, ‘self segmentation is often the goal for home pages... it works if it’s a natural choice”. In other words make it easy for someone to self select and move further down the funnel (get out of their way!).

You can see how Hubspot uses similar calls to action too, ‘Get Started’ and where relevant ‘Get Free CRM’. (action orientated). Note Hubspot don’t say Register (more on that latter under ‘Be My Guest).

No alt text provided for this image

These buttons are also in the Hubspot brand colour, so they contrast and stand out.

POP!’

I kind of cringe at that overused word, when someone is giving a bad brief to a designer (‘make it ‘pop!’), however it is completely true with Calls to Action on a homepage or  website. Use colour, and make it contrast!

Oh and it was refreshing to read on CXL that it doesn’t matter what colour you use for the button. I used to hear people claiming winners/ debating colours years ago in various agencies I worked for.

No alt text provided for this image

Here is a quote I picked up from CXL that I love

“Good design, when done well, should be invisible”

- Jared Spool


BE MY GUEST

This leads me to my next point, in regards to e-commerce, let someone check out as a guest! According to CXL “1 in 4 abandon online purchases due to forced registration.”

Where possible don’t mention the word Register! Let someone purchase as a guest or login with their social media account, just assume they can’t remember their password or which email they used! (lets face it they probably used some email that they purposely use to sign up for e-comm sites, as they know they’ll be spammed 3 times a day with your emails! Don’t do that either!)

On this note, here is an amazing case study on ‘How Changing a Button Increased a Site’s Annual Revenues by $300 Million’ Jared M. Spool did research, as you should and uncovered

“We were wrong about the first-time shoppers. They did mind registering. They resented having to register when they encountered the page. As one shopper told us, “I’m not here to enter into a relationship. I just want to buy something.”

https://articles.uie.com/three_hund_million_button/

Here is an example of a good checkout, where after purchase they incentivise you to ‘Save Your Details’ and purchase again from them!

No alt text provided for this image

If you don’t have a website that is mainly the baby boomer generation (i.e not massive social media users and/or are more suspicious), then why not give someone the option (choice is good, embrace it!) of logging in with Facebook or Google!

Why? Because social logins give you more accurate data about your browsers, including verified email addresses, age, gender, relationship status, and interests. You now have a clearer picture of your audience and the ability to create Look Alike profile for social media ads or potentially remarket to them.

No alt text provided for this image

Here is the resounding case for why you should give the option for social media login;

1. 86% of users report being bothered by having to create new accounts on websites


No alt text provided for this image

54% of users said they may actually leave a website and go to another rather than complete an individual registration form, according to a survey conducted by Blue Research.

https://www.prweb.com/releases/2012/1/prweb9086226.htm

2. 77% of users believe social login is a good registration solution…


3. THIS ONE IS AN E-COMMERCE KILLER! 92% of users will leave a site instead of resetting or recovering login info

According to a poll by Blue Research, and “one third of people say they leave frequently when forgetting their login information.” This % number may vary, but I know I’ve abandoned sites because I just can’t be arsed and the site didn’t sell me the value of the product/ service that much any way...

https://web.archive.org/web/20171209150724/https://www1.janrain.com/rs/janrain/images/Industry-Research-Value-of-Social-Login-2013.pdf


A MOUTHFULL, BUT A WORTHY ONE, PROTOTYPICALITY

Don’t say this one, after a few drinks on a Friday night! :) Nah, it’s easy, just 'chunk it', proto-typicality.

What does it mean? PROTO-TYPICALITY is the basic mental image your brain creates to categorize everything you interact with, you 'fill in the dots' in a way (like heuristics - a mental shortcut).

Why is it relevant to marketers? I learnt it’s important to have consistency in design, like Hubspot have done with their consistent design and social proof, it establishes trust, people buy from brands they trust.

INTERNAL SEARCH/ SITE SEARCH

Still on the note of e-commerce, some of us out there are searchers! I am, having worked at a SEO agency. 

Voice search is also growing, my kids now use it as the default, they can’t be bothered typing, so generations to come may not want to browse your site as much, particularly if you’ve got a large site and you haven’t put in things like product badges or you don’t have good filters (see my rant last week!).

Here is an interesting insight below that CXL highlighted. What might seem like a small gain in terms of %, can mean a large revenue uplift figure!

If you can answer someone's query/ search on your site effectively, and therefore the conversion rate is high, and you can increase the rate from 5% to 8% or 10% it could mean tens thousands or hundreds thousands $ in a year!

So include an obvious Site Search (make it full screen width if possible), and make sure you maintain and improve your product feed, categorise and tag your products properly so people can find them quickly and buy!

No alt text provided for this image

SITE AND PAGE SPEED

Having worked in SEO agencies I thought I knew a bit about site speed optimisation, but I actually learnt a lot of new stuff from CXL!

Once upon a time it wasn’t part of Google ranking algo, and it still isn’t a huge factor determining ranking, HOWEVER slow page load will affect conversions (and will particularly hurt you if you’re an e-comm site) and it does affect the User Experience.

Go to your GA and Behavior -> Site Speed, and look at;

  • Average Document Interactive Time: How many seconds until the page is usable?
  • Average Page Load Time: How many seconds to load the page fully?

Next go to Google Pagespeed Insights here and read this document too

Here is a handy flow chat, see below, and here is something to go and research if you don’t know much about it!

Minimize round-trip times (RTTs). Combine images with CSS sprites by using Compass, SpritePad, Spriteme tools and combine Javascript files into one to minimize requests back and forwards (RTTs), you can go to Google Closure Compiler here https://github.com/google/closure-compiler

No alt text provided for this image


A/B Testing and Stats for A/B Testing/ for Marketers

On Sunday night I’m going to write about A/B Testing and Stats for A/B Testing/ for Marketers. I promise to cut to the chase and make it insightful! Stats are not scary




要查看或添加评论,请登录

社区洞察