The first impressions: What makes me leave your website?

The first impressions: What makes me leave your website?

Recently, I gave a presentation with the same title in the fabulous Four Seasons Hotel in Budapest, Hungary. My goal was to give a few ideas about how users think, what affects the bounce rate and how you can test and research to improve user experience and keep your visitors from bouncing.

The presentation was quite a success so I thought it would be a good idea to put together a quick summary for you.

OK, I won't lie to you straight away... it won't be short but I tried to make it as engaging and interesting as I could so bear with me, all right? :)

We'll cover:
1. What could cause a visitor bounce?
What are the factors that drove your customer away from your website.
2. Let's identify the problem!
Learn how to use analytics to uncover problems.
3. Dig deeper and understand the user.
Why does the problem exist? I'll show some UX research techniques that you can execute right now.
4. Change your website, iterate your product.
If you know what to change you just have to do the hard work.
5. Test again
6. Rinse and repeat!

So let's get started, no one wants to be here all day :)

What are the reasons that could make your visitors leave your website?

1. You don't show the relevant content to the relevant audience

Confused Jack Sparrow

This is a tricky one because it's not about the product it's about targeting.

Are the right people driven to the page?
Do you show the content they were looking for? Or you just showing off on your home page...

Targeting is very important. Put yourself in your customers' shoes:

  • You are searching for something in Google
  • You have a pre-concept of what you are looking for and in general how the results should look like (this is why you know it when you find out)
  • You have an even stronger concept when you browse the hits page in Google. You see an extract of the page - your expectation gets stronger
  • You land on the page and find something different.
  • This is where you will probably feel scammed and leave the page

What to do
Always make sure you target well and show the content they came for.

For example, if they came through an ad which says "dietary supplements" make sure that the page they land on has the same title in a visible way.

2. You visitor couldn't find - or not fast enough - the information he's looking for

Jackie Chan - what's this?

That's a bad information architecture.

What is information architecture?

Information architecture is about helping people understand their surroundings and find what they’re looking for, in the real world as well as online.

As a visitor, you need information and need it fast. You don't want to spend even minutes trying to dig for an information.

People don't read on the web, they skim.That means they want to get a sense of what the content is about before they would start reading it. When you skim, you browse the headlines, look for eye-catching elements, like bigger sized texts, quotes, images.

Therefore, having great and explanatory headlines are essential. If your visitor doesn't think he would find the relevant content based on the headlines he'll probably leave and won't read further.

Users want to get a sense of what the content is about before they would start reading it.

What to do
Make sure you have a clear content structure and an easily skimmable content. Have a clear overview, use headlines, quotes, bullet points, images (and captions) - make sure it's engaging and inviting for reading.

3. It's just not the proper visual language...

Jackson Pollock painting

Nothing wrong with Jackson Pollock. He was a great artist. But wouldn't make great websites, would he?

In a few seconds - in which people decide whether to leave or not - you are not able to read and understand websites. It's not like deciding whether to buy a book in the store. It's more like browsing a magazine. You will look for impressions and signs which could be interesting and engaging for you.

That means, it all comes down to visuality.

Let's say you want to rent a car. Before you would search, you have a projection of how would a car rental website looked. Now imagine you arrive at a car rental page which is designed with comic sans, rainbows, unicorns. You would leave instantly, would you?

That's because had projection and a mental model of how a car rental should look and that page didn't fit this model.

Proper visual language will...

  • increase trust - it's a match with the mental model in their minds
  • help the user to navigate through the design
  • help the user to better understand the content structure
  • please the user and increase experience

The bad visual language, on the other hand, will...

  • decrease trust - this is not like what they expected
  • harden the users way of navigating
  • not support content structure
  • create frustration in the user

What to do
Do some research to better match your audience visual taste. Do some research on the best practices in your field. What are customers accustomed to? You can choose alternative ways and new design solutions for problems but first, make sure you know what is the starting point.

4. It's just not the proper way of communication

Torrente - who else?

In the real world, we all know - well, the better of us - how to act and how to communicate with different people in different situations.

You use completely different language for your family, friends, colleges, teachers, business partners, strangers. And all of these are divided into dozens of subgroups. And you know how to handle them.

It's funny, though, it's not the same on the internet. It's like greeting a stranger on the street: "Hey yo, brotha. What up doe?"

Would it be weird? It thinks so. But this is what happens when you don't pay attention to communication.

What could be bad communication?

  • not using the correct tone (Yo)
  • frustrating the user with too much to read or too difficult to understand
  • your website lacks personality - no one likes impersonal communication - it's just not for me is it?
  • bombarding visitors with ads - that's intrusive. You have to know when and how to show ads. It's for them not for you.
  • poor grammar, spelling mistakes - it's just makes you unprofessional and negligent. Would you buy something from a slob person?
  • Low-quality content - bad content is better than no content is it? It's really not. Bad content will build a bad reputation.
  • using bad photos (or stock photos) - Yes, images are part of the communication! If they are ugly or too sterilized (like every stock photo on Earth) visitors will find your communication ugly and sterilized.

What to do
Write relevant content. Make sure it's not full of grammatical errors and spelling mistakes. Pay twice the attention to the website's copy and image set then you normally would. Don't bombard visitors with ads - learn how you can implement them without disturbing the user.

5. There might be technical reasons as well...

Technical anger. Should be treated.

Oh yes, there are! Here's a list of my favorites:

Not having a responsive website
If you came by on a mobile you sucked.

Slow page times
If you want to learn about the true nature of a person, give him a notebook with slow internet connection and see what happens. In fact, it might be a new way of torment.

“I love slow web pages.” – said no one ever

People usually give up after 4 seconds. Make sure you wave goodbye!

Cross-browser problems
Trust me, I know how pain in the ass browser compatibility is. Should I just fire an internet explorer joke? I won't. But if your users prefer a type of browser then you can't ignore it.

Here's an IE joke anyway.

Internet Explorer Joke
It's funny because it's true.

Security problems
Now that Google - finally - starts preferring sites with SSL (https) secure connection it's important to check the security checklist. You don't want your user to see this when landing on your page:

What is mutual in this four technical problems above is that each of these alone could prevent your user to explore your website.

You are not even letting your visitors leave because of your crappy design. I'm kidding here (if not, contact us anyway).

Seriously, technical factors are a must. You can't allow yourself to let visitors leave because of these.

Subscribe

Like the content?
We let you know when we have something fresh!

Let's identify the problem!

What is analytics good for?

Analytics is a great thing. But you have to be careful: you have to know how to use it (it's like a lightsaber - in the wrong hands it could cause tragedy).

Analytics is for measuring and identifying the problems. Analytics doesn't answer why the problem exists.

Repeat: Analytics doesn't answer why the problem exists. You could have intelligent guesses but this is a measurement tool.

How to use analytics?

Analytics and data-driven design is completely another story so I would not go into detail here. What I will do instead is sharing a few important pieces of advice and guidelines that will make you use analytics smarter (and prevent analytics using you).

But before that, let me explain why.

I've never met a person who didn't want to use analytics and measure everything. Let's use Google Analytics, track everything, set conversions, set demographics. Here's a tool called Hotjar and it can create heat maps based on visitors click on your website. Awesome! I need it! Let's create heat maps for everything, set up funnels, allow visitor recordings. Here's another tool which allows you to track purchases in real time. Yeeeeah...

Okay. Until this point? Everything is fine. We measure.

What happens next?

Information overload.
Information overload. Watch out, it's coming for you!

What to do with all this data? What is important for me from all this? And for God's sake, do I have to change anything on my website? And if so, what and how?

Does it seem familiar? This is what I call information overload (and other smart people too). You don't set goals, you don't know what to look for you just measure.

How to use analytics in a smart way

1. Always set smart and clear goals

Before you would analyze and measure. Ask yourself: what are you interested in?

Smart goals could be one the following:

  • increase conversion
  • increase the number of page views
  • increase the engagement of a specific target segment
  • increase the number of returning visitors
  • (so on)

These goals help you stay focused and keeps you from being lost among the infinite amount of data.

2. Concentrate on one metric at a time

This is an addition to goals: always concentrate on one, relevant metric. Now, why on Earth would you concentrate on one?
Because if you set it right...

  • It answers the most important questions you have
  • It forces you to have clear goals
  • It helps your company to maintain focus
  • It will truly represent growth

This technique called One Metric That Matters (OMTM). I really recommend you to spend a few minutes reading these articles:
One metric that matters
Your first growth hack
Single startup metric

3. Ask the right questions!

It would be my number one advice but we follow a logic order here. But this is all about identifying problems. To identify problems you have to ask questions:

  • Why is the conversion rate low on page x?
  • Why this and this type of visitor wouldn't buy?
  • Why have we such few returning visitors?
  • Why is the average time spent on the homepage 00:05?
  • Why is the bounce rate so high on page x?
  • Why is that the homepage have great traffic but our subpages don't?

These questions will help you to improve both your marketing (how to drive visitors) and your product (how to turn visitors into customers).

If you know where the problem is and you asked a question - it can be answered.

And it can be answered by...

UX research - dig deeper and understand the user

UX research is a qualitative study which introduces the user to you, uncovers feelings, motivations, explains why the problems exist and what are the users thinking.

The funny thing: not many of the companies do UX research. But again, in reality, it would look like this:

You have a small boy aged 6. Tomorrow you will fly to Köln, Germany for a conference. Every time you attend to a conference like this, when you came back you bring a present to you son.

But somehow you just can't seem to choose his taste. The last 5 times you bought a present he was disappointed. And so were you. But you didn't ask him: "Why?"

Anway, you fly to the conference and look for another gift. You don't really now what your son likes, and why the presents you bought before were not good enough. You buy something anyway.

When you arrive, you give the present to your son. And guess what: it's a no again...


At this point, what would you do?

You should ask questions: "Why? What's wrong? What would like instead? What didn't you like in the former gifts?"

Now, the moral of this dumb story is that in the real world we ask questions. We want to dig deeper to understand the situation, emotions, thoughts. We won't buy another gift without asking first: what would you want?

This has to work the same in the digital world as well. You have to build a relation with your customers and uncover their feelings, thoughts, needs.

With UX research you can understand:

  • if something is not clear enough
  • if something causes frustration
  • if the user couldn't find the information he is looking for
  • why doesn't the user become a customer?
  • if something is difficult to a user or problematic
  • what makes him comfortable and indicate trust?
  • if something is wrong with the communication

There are many research types. In this article, I'll show you 2 small, quick but really effective research types that you can try out and apply today!

Testing the perception: Five-second-tests

This is a really simple and effective tool. I'll often use it in my everyday work. It could be conducted in person or online.

What is a Five-second-test?

Basically, visitors are shown a design (logo, website design, application etc) for exactly 5 seconds. Afterward, they are asked to answer a few simple questions.

This is an extremely short amount of time! What is it enough for?

Yes, this is really quick. But here's the point: it is a tool that will measure impressions and perception. 5 second is not enough for deeply studying a design, or reading text on a website.

In 5 seconds you will have an impression of what you've just seen.

Whenever first impressions count, use five-second test. - Usabilityhub

Questions that could be answered with five second testing

  • Is my brand/logo memorable?
  • Do they know what my brand is about? Or what my product is?
  • With which words would they describe my product?
  • Can they recall certain elements on my web page? (the important ones)
  • Do they know what my page is about?
  • Do they like a design?
  • Do they find it desirable or trustworthy?
  • Do they know what to do on a page?

What you can test with this:

  • Logos, brands
  • Website layouts, landing pages
  • Print material

Okay, stay with me, a case study is coming!

[CASE STUDY] How we redesigned a page using Five second testing and increased conversion rate with 255%

Sounds interesting? Let's get into the nitty-gritty parts!

So we had this page, seen below:

Case study - MindMaze the escape game. Home page.
Original website: Home of the escape game.

Our initial assumptions were:

  • The design doesn't match the audience
  • It's not obvious at the first sight: what this page is about?
  • You are not able to see what to do here without scrolling
  • When you want to explore an escape game and decide where to go, one of the main factors are the room themselves - are they interesting? The current page had a text heavy and hard to skim introduction for the rooms and it felt cheap and not interesting

Conducting the test

Disclaimer: unfortunately I'm not sponsored in any way by Usabilityhub.

We used Usabilityhub for conducting the test remotely. It's a great service I really recommend it to everyone.

You can set up tests and start getting feedback on your designs in a few minutes. Five second tests, click tests, preference tests, navigational test could be conducted through Usabilityhub.

It's free to start and if you take other people's test you earn credit that is used to get feedback on your own tests (that's called Karma points). It's really a fun way to start and you can learn much about how to (and how not to) do certain tests.

So we uploaded the original site's designs and asked follow-up questions.

The results?

1. When we asked the users what they think the page is about, they answered this:

Game stands out - that's great. But video? Not so good. By reading through the full answers it turned out that people thought the site is about some video game. If you know what is an escape game like then you know it's the least thing you want people to associate it with.

Five second testing results
Game stands out but the others? Not so good of a match.

2. When we asked what did they think they could do on this website?

Five second testing results
People knew they have to booking something

It's not that bad. Essentially, despite the fact that the booking button was below the fold, people knew they had to book something, and a lot of people wrote "game" also so it's okay.

3. Then we asked what did they think the target audience was for this page?

Five second testing results
Let me introduce the target audience! Not really...

Now, this comes the interesting part. Our users were quite sure, this page was targeted for male gamers, ranged from 20-30. Words techy, nerdy, teenagers, youngish also appeared.

Grumpy cat - no it's not good.

Nope, this is not what we wanted. But the page has a visual language which makes people think it's a techy thing.

What did we learn from testing?

1. Users have no idea what this site is about

Our initial assumption was true. It's not about video games and the design and communication shouldn't support this. We have to make the homepage's message clearer: it's about a physical game which is enjoyable for not only techy people but for a wide range of people.

2. Users thought the target audience is male gamers

Again. Visuality. We proved to be right again (but we never dreamed people would associate it with tech and gamers). We need a different visual appearance which is interesting and adventurous to show the feeling of the game but one which does not narrow our target segment.

3. We have to find a better way for showcasing the rooms

Rooms are very important. They have to be interesting and engaging and upfront. They mustn't be placed in a sub-sub-sub page with a boring visuality.

Our redesign

Hold on, here comes the redesign. We put our best efforts to create an engaging homepage, seen below.

Or check it out live, here: http://mindmaze.cz/en

Clearer message - you know what this is about. Focused call-to-action.
Clearer message - you know what this is about. Focused call-to-action.

The message is clear - you know what is it about
The CTA (Call-to-action) is clear - you know what to do here
More engaging visuality but not determinative

Visually more engaging way of showcasing the rooms
Visually more engaging way of showcasing the rooms

display of rooms had a better placement (actually, this is all one page)
and better visuality - it's more engaging and fun with the video background

All this made an extremely big difference in conversion. The original site had a conversion rate of 4,5% - which is nice by the way.

But after the redesign, it went up to 11,5%.

After our colleagues at Abstract Marketing take over and started to take care of SEO and launched marketing campaigns the conversion rate increased again.

Resources for five second testing:

Test if your users know where to click: Introducing click tests

This test is also one of my favourites. I'm a big fan of usability testing, sitting down with users and see how they make their way through the product.

The first click test is like a micro usability test - and it's a great addition to it.

What is a first click test?

Users are shown a design/layout and are asked to perform certain tasks (that is click somewhere).

We use scenarios for this. Like:

"You want to shop sports shoes. You've arrived at this page and already selected a shoe by your liking. Where would you click to select the size of the shoe?"

As you see, we gave a story for the task - this is important because it helps people understand the situation. The itself is clear and precise.

This test is good for testing if users can easily find where to click to perform certain tasks.

When analyzing the results, there are two factors that are important:

1. The precision of clicking

That means, how many people managed to click on the right place. Usabilityhub also gives you a percentage of how precise the task was. The more precise the better. I would say, aim at precision above 90%

2. Time of completion

This is also very important. People are not stupid - let's not argue on this, we have no time -, they WILL find where to click in time. But the goal of these test is to design this interaction in a way that's easy and FAST to understand and accomplish.

So, durations ranging from 0 - 10 seconds are great. That means the users can instantly find where to click.

Durations ranging from 10 - 20 seconds are not so good - go back and work on it.

Above 30 seconds - go and think about your life.

But before you would run out and create your first test, please PLEASE read this great article from Kissmetrics on how (badly) people use Usabilityhub. If you don't have much time then just read the headlines:

10 Things I Learned From Taking 100 Usability Tests by Kissmetrics

And this is a nice guide for writing GOOD usability tasks and tests:
How to write tasks for usability tests

My advice for Usabilityhub testing:

  • make sure you pick the right test types and use them correctly. If you don't you'll suck
  • Don't test options that are almost identical. The truth? No one cares. Just you.
  • Don't use these test as an A/B testing platform. A/B testing is a whole different thing for a reason. Don't create an unviable mule.

Subscribe

Like the content?
We let you know when we have something fresh!

[CASE STUDY]

Again, we'll have a look at the escape game's booking site. We conducted usability tests for this to see how user cope with the full process.

We used click testing to double-check the sensitive parts.

Here's how the booking page looked like (where you could start the booking process):

The original booking system
I want to book now! But how?

It's just not inviting, is it?

Our initial assumptions were that it is...

  • not a good idea that you can start the process from multiple places - it weakens the focus
  • not clear where do I have to click to start the process
  • not showing the right and important elements in terms of the booking
  • not looking trustworthy

Our goal with the booking system:

The users should click through the booking process with no questions asked and without actually thinking about the process and how to perform each step.

Test results

1. It's nearly not clear enough where to click

The average time of locating the booking button were 41 seconds. Remember what I've written about benchmarks? Above 30 seconds dead, stiff, gone.

2. Users clicked on unclickable places

Weird? Likely. People thought they could click the centered booking text with the icon in the background. Are they retard? No, they are not! But that's confusing so it has to be changed.

3. Precision was awful

53% of people clicked on the right place. That's nearly not good.

4. It took an awful lot of time to go through the whole process

As I mentioned earlier, we already did usability testing on the booking process. The average completion time of the whole process was 8:13.

Even though it's a multi-step booking process, it shouldn't take this much.

The redesign

So with all this in mind, we made a complete redesign of the booking process:

(or check it out live, here: http://mindmaze.cz/en/booking)

The redesigned booking system - easy to complete
We created a cleaner, easier to follow booking process.
The redesigned booking system - you know where to click
You always know where to click next.

The result?

The average time of the booking completion decreased from 8:13 to 4:08 which means, that users spend time with only filling in the inputs, selecting options but not wasting time for searching for what to do next.

Average completion time went down from 8:13 to 4:08

Resources for click tests:
Getting the most out of first click testing

So, what's next?

Firstly, let me thank you for bearing with me for this article, I know it was long and you would deserve better :)

Here are the key takeaways:

Know what could cause your visitors leave your website.

There are dozens of great articles on this topic, go out and find them.
Start here:
Why people leave your website
and here:
14 ways you are driving people away from your landing pages

Use analytics to uncover problems.

Use it wise: set goals, focus on the right metrics and ask the right questions. Check different analytics software like Hotjar and Kissmetrics

Research and validate your hypothesis.

Understand your user, conduct usability tests. Test often! Great way to start with a quick brief of the remote test you could conduct in the next half hour:
Build better websites through remote user testing with UsabilityHub

Change and improve you product! Rinse and repeat!

So thank you again, if you have any questions, feel free to ask me in the comments or drop us a line!

Got a burning question?
Or are you ready for the next step?

Schedule a quick 30 min call with us,
we would love to help you!

Schedule a call with our expert
Seven Step UX

SEVEN STEP UX: The Cookbook for Creating Great Products

Our co-founder and UX expert, Csaba, wrote a hands-on, down-to-earth approach to UX design that provides a complete overview of the Seven Step UX product design process that we use every day at Webabstract. This book is a practical, step-by-step guide that will take you through all of the steps and teach you all of the methods you need to know for UX work from planning an app or website to wireframing, research, and design. It is a must-read for understanding user experience design.

What can we do for you?

  • Product UX/UI design
  • Mobile applications
  • Consulting
  • UX research

Let's talk

Daniel Knaust

Daniel Knaust

Co-founder, CEO
danielknaust@webabstract.io +36 30 626 29 66
David Dorosz

David Dorosz

Co-founder, COO
daviddorosz@webabstract.io +1 314 919 6461
Let's talk
Thank you for contacting us! We will get back to you as soon as possible.
Copyright by Webabstract 2017
Thanks for subscribing!
Want a Free UX Consultation?

We can review your product, get expert feedback or discuss UX and design issues.

No, I'm fine

Thank you! You are awesome!

We will contact you shortly!

Return to the blog

Schedule a friendly call with our expert

Enter your email address and we will contact you to schedule the call:

No, I'm fine

Thank you! You are awesome!

We will contact you shortly!

Return to the blog
Free eBook

Improve your product’s UX with these 10 simple steps [FREE EBOOK]

Sounds interesting? Enter your email and download the ebook for free!

No, thank you

Like the content?

We let you know when we have something fresh!

No, thank you