Summarify.net

Why Beautiful Websites Don’t Convert

Toonu-cTE60 — Published on YouTube channel Malewicz on September 2, 2024, 2:45 PM

Watch Video

Summary

This summary is generated by AI and may contain inaccuracies.

Here is a brief summary of the key points in the transcript: The transcript discusses why fancy, overly-animated websites often perform worse than simpler, more functional sites. The key points are: - Fancy animations and visuals may work for well-known brands, but most companies need a site that clearly communicates the product's value. - The goal of a site should be to get people to click "buy" as quickly as possible. This means having clear, concise copy explaining the product's benefits. - Social proof like testimonials and awards help convince visitors your product is worthwhile. - Overly busy, distracting sites cause cognitive overload and drive visitors away. Focus should be on the CTA button. - Sites should load quickly. Long load times will cause visitors to leave before seeing the animations. - Some animation can guide the user's gaze, but avoid too many competing elements. - Always test changes to copy, design, etc. to see what improves conversions. - Know your audience - some products need more detailed pages to convince business purchasers. The key is balancing aesthetics with clarity and simplicity to effectively communicate to visitors and drive conversions. Avoid overly fancy sites that distract from the core message.

Video Description

❤️ Subscribe and I'll do PART 3 of this. View part 1: https://youtu.be/aGTqFp7GAKE

Why do beautiful websites usually have low conversion? What's the secret of Ugly Web Designs that they bring in more money for the company? Let's explore these things in a lot of detail, going through both pre-made examples, and a real, client project we worked on.

The UX/UI Design of a website is important, but there are more important parts in that process that are often overlooked. Focus on the fundamentals, see my diagrams, unique approaches and a step by step guide to better conversion on the web.

Your website can sell better!


==============================
🔥 Limited time only!!!
Get my courses 25% cheaper at:
https://hype4academy.gumroad.com
with the code: OEJYCQZ
==============================


------------------------------------------------------------
See my agency at:
https://squareblack.com

Join our daily design challenges and community:
https://square.one
------------------------------------------------------------


#webdesign #webdevelopment #conversion



00:00 Intro
00:11 Beautiful website design fails
00:28 Ugly UI converts better
01:20 Overview
01:28 Increase website conversion
02:17 More CTA clicks
02:41 How users make purchase decisions
02:52 Most important focus
03:38 Testimonials & Social Proof
04:15 Talk about yourself
04:50 Sheer Numbers Technique
05:09 Start fixing like this
05:59 Loading time
06:22 Cognitive overload
06:58 External example website
07:17 Aesthetic usability effect level
08:00 The Gaze principle
08:25 CTA Button best practices
08:51 Problems with Parallax web
09:31 Steps to fix this
01:19 How much animation?
11:00 Target audience?
11:31 Squareblack client example
12:26 Make design like this!
12:53 Little quiz

Transcription

This video transcription is generated by AI and may contain inaccuracies.

Speaker A: Cause every time you talk it sound like blah blah blah blah blah blah blah blah blah. I'm just hearing blah blah blah blah blah blah.

Speaker B: Impressive parallax animations and beautiful graphics are often like the best way to decrease your sales and have a poorly performing website.

Speaker C: Distracted, annoyed and not willing to click.

Speaker B: Ugly websites seem to perform better. Let's find out why there's this misconception.

Speaker C: Among startups and designers and people building.

Speaker B: Products that they need a beautiful website.

Speaker C: In order to make good sales.

Speaker B: This style of a website where you.

Speaker C: Have a parallax animated background, multiple layers.

Speaker B: Scrolling in and out and everything is animating and transitioning and moving may work for Apple.

Speaker C: Because everybody knows Apple and when people.

Speaker B: Go to their website, they already know.

Speaker C: What they want to buy.

Speaker B: They're already interested.

Speaker C: So by seeing a couple of animations about headphones or the new MacBook, it doesn't really deter people from actually purchasing them.

Speaker B: For most people, however, it doesn't work like that. For most companies, you need a website.

Speaker C: That primarily communicates.

Speaker B: And there are a couple of issues with those fancy visuals. So how to make a website actually perform better?

Speaker C: What is the reason for a website to exist?

Speaker B: In most cases, the reason is to get people to click on the button as quickly as possible. The button usually leads to somebody buying something. So yes, as a business owner, I want as many people as possible to buy from me.

Speaker C: Let's find out why this website is.

Speaker B: A lot better than this website on a couple of simple examples. That way you can make your websites better. I created a little diagram that shows.

Speaker C: How a website actually works and what.

Speaker B: Are the elements along the path, including.

Speaker C: The best possible path the user can take.

Speaker B: You can use this guide as a reference when making your own websites.

Speaker C: The best path is always when a user actually already wants your product, goes.

Speaker B: To your website and clicks on the buy button in the first few seconds.

Speaker C: This is the golden route and this.

Speaker B: Is something that can also mess up.

Speaker C: Your analytics because you might think that people are so excited by your product.

Speaker B: That they're buying it in 5 seconds. That's never the case, they knew about it previously. A more typical route is a little bit longer. It takes a little bit of convincing on the website to make it work. The convincing happens on a couple of different levels. The most important one is clarity. When they enter the website, they need to be able to understand why your.

Speaker C: Tool or your product or your app.

Speaker B: Is the best out there for their needs and they need to do it in the first four or 5 seconds.

Speaker C: Which means that your copy has to be extremely clear, very to the point.

Speaker B: And potentially also taking care of all.

Speaker C: The little doubts they have.

Speaker B: That's why some of the better performing.

Speaker C: Websites actually have quite a lot of copy. They have one big slogan at the.

Speaker B: Top and then they have a couple.

Speaker C: Of smaller points right above the bottom. This is cluttered, looks a little bit clunky, it doesn't look as aesthetically pleasing, but it seems to perform better.

Speaker B: And that's the whole reason a landing page exists.

Speaker C: Now, if you have a convincing copy.

Speaker B: The next thing you need is social proof, and that can come in a couple of different forms.

Speaker C: The most obvious is testing testimonials from your previous clients. Practically every website needs that because nobody wants to be the first to the party.

Speaker B: They all say they do.

Speaker C: They want to kind of go the new paths, but nobody really does. They want others to try your product first to be sure it works. Let others take all the risk. So when you have a lot of.

Speaker B: Testimonials and reviews and they're all positive.

Speaker C: It is convincing people to jump onto that group as well.

Speaker B: Another thing is that if you have.

Speaker C: Any reach or are pretty well known.

Speaker B: In any circles, then adding who made.

Speaker C: Your product and who made the website.

Speaker B: Can be a good idea because it.

Speaker C: Shows that there is a serious team of people behind it.

Speaker B: Another thing is awards and different kinds of scores.

Speaker C: So if you've been rated five stars by some blog that is rating products in your category, write about it, show it if your customer average score is 4.9, also add this and the last.

Speaker B: Thing, and something many people kind of forget is sheer numbers. This is what we do in the header of our platform. We basically show how many projects and how many people are on there, right in that slogan that gives people the social proof so they know that the platform is alive and has a lot of people, a lot of projects. So it's worth registering. If your website is unclear in any.

Speaker C: Way, you should upgrade the copy first. This is what people are actually reading if they are going to spend money.

Speaker B: And there are billions of ways to.

Speaker C: Do it, and likely asking AI to do it for you is not going.

Speaker B: To be the best way. Chances it's going to be converting better and performing better are quite low.

Speaker C: It's really best to listen to your users and to listen to your own thoughts as the person that made the.

Speaker B: Product, because you should actually have the perfect copy somewhere in your head.

Speaker C: You just have to dig through to get it.

Speaker B: And once you find it, test it, see how it performs, then tweak it or make an A B test with a different kind of copy and constantly test it because you never know what's gonna work. Sometimes something completely unexpected does. Another problem with those overly beautiful websites.

Speaker C: Is that they take forever to load. People don't have the time for that. If I have to wait 40 or 30 seconds for a website to load, chances are I'm gonna actually switch it off and go to a different website and I'm not even gonna see your fancy, beautiful parallax animations at all.

Speaker B: The next thing on the list is cognitive overload. If everything is moving and animated and.

Speaker C: Flashing and kind of jumping right in.

Speaker B: Your face, we get overloaded. Our brain has a pretty limited processing power and the more stimuli come from.

Speaker C: The outside, the less we want to.

Speaker B: Be in that situation. Many people will go out of a website if it's too overwhelming. If everything is moving and distracting you.

Speaker C: From the main action, you're not gonna take that action.

Speaker B: This is why the best performing websites.

Speaker C: Have barely any animation. Look at linear, a very popular example.

Speaker B: They went from really crazy animations in the header into just a simple isometric.

Speaker C: Platform view, just kind of showing up.

Speaker B: There are no micro animations happening in there. Thats because they want you to focus.

Speaker C: On what the platform can do for you and click the button.

Speaker B: But of course there is a level.

Speaker C: Of aesthetic that is necessary to achieve. Yes, it was a little misleading. Its not that landing pages need to be ugly to perform better.

Speaker B: They need to be made with the proper focus. And the focus should never be on fancy animations and transitions and everything moving. All those things will contribute to lower.

Speaker C: Clicks and lower conversion.

Speaker B: Obviously the website has to be beautiful, and it can be beautiful even with extra information above the fold. And even if there isn't really enough white space, you just need to plan for everything. Use consistent typography and use all the.

Speaker C: Psychological principles that we're aware of. You can use the case principle I talked about in the previous video in the series.

Speaker B: You can have the characters pointing at.

Speaker C: Something and potentially looking at it, or looking at you and pointing at something, and that way your eyes will draw the attention, but then it will shift to the hand and the gaze will.

Speaker B: Follow the pointed finger.

Speaker C: You know what to do.

Speaker B: You can point at the CTA button.

Speaker C: Another thing those ugly websites do well is they make the CTA button a single color.

Speaker B: Meaning it's a color that only exists.

Speaker C: In the button on the website, nowhere.

Speaker B: Else, especially nowhere else in the header. And it's the most visible, most standing.

Speaker C: Out color of them.

Speaker B: All that leads to your eyes instantly focusing on the button, and that is.

Speaker C: Also a factor that can increase conversion.

Speaker B: The problem with our rocket landing page.

Speaker C: Is that it takes 8 seconds for.

Speaker B: The header to completely load and show everything. If we put it online, it would.

Speaker C: Take an extra 20 or even 30 seconds to load everything because these are.

Speaker B: All beautiful bitmap images and the copy is completely unclear. Plus the button is so vague it.

Speaker C: Doesn'T really tell you why you should click it.

Speaker B: All of that fancy animation and all those beautiful graphics don't bring any value.

Speaker C: To the users, don't tell them what.

Speaker B: Problems they're solving and how, and it's basically not convincing. While it may look good, it just won't work. All of the problems that I mentioned.

Speaker C: Today can be fixed, and once you.

Speaker B: Fix them, by either making your website more aesthetic, loading faster, removing animations, removing cognitive load, making clearer copy, which is.

Speaker C: The most important one?

Speaker B: Always remember to test. Deploy the website, make an a, b test, or just test it live on production, see what happens, see how many people click and then tweak something. Change the copy, change the button color, see how many people click them. It's a never ending journey of modifying and changing and seeing what performs and what works. It's a lot easier to modify and.

Speaker C: Change a rather simple website than removing or tweaking animations every single time in every little piece of the header.

Speaker B: A good rule of thumb is to use a single little animation in the.

Speaker C: Header so it's not distracting, and make it into an animation that actually guides the eye of the user so it has to move in the right direction.

Speaker B: In many cases, the animations are vertical.

Speaker C: And we already talked about it in the previous video, how vertical animation follows.

Speaker B: Your gaze up and down. And we should be going left and.

Speaker C: Right to read the copy and get to the bottom.

Speaker B: By going up and down, we're just.

Speaker C: Getting away from it, distracted, annoyed, and not willing to click. And one last thing that's also really.

Speaker B: Important with landing pages, I'm gonna show.

Speaker C: You on an example.

Speaker B: You need to know your audience, because all the audiences are different. Sure, most people have eight second attention spans. They want their problem explained and a solution provided and all that shoved right.

Speaker C: Into their face as quickly as possible.

Speaker B: That means you need to simplify, simplify and simplify some more. But there are some specific industries and some specific products, especially more expensive products.

Speaker C: Products that are business oriented, that don't.

Speaker B: Follow the same rule.

Speaker C: We worked on a rebranding and a redesign for a medical startup, and in that case, the target audience is the directors of hospitals. These are people that don't take these.

Speaker B: Decisions lightly because jumping onto a new.

Speaker C: System can be a pretty daunting step.

Speaker B: So in cases like that, the landing.

Speaker C: Page can actually be pretty complex.

Speaker B: You can have multiple sections where you.

Speaker C: Have subsections and even menus that show different reasons for it.

Speaker B: So it doesn't have to be all front and center, it doesn't have to.

Speaker C: Be super simple, and it can even.

Speaker B: Have subpages that are landing pages in their own right. Because for a difficult decision like that, those people want to be 100% sure.

Speaker C: So they're all gonna read everything you put on that website.

Speaker B: Sure, you still need to use the.

Speaker C: Right principles to guide them, make it.

Speaker B: Visually appealing, and most of all you need to make it convincing. Focus on getting the aesthetic usability effect.

Speaker C: In place, but dont overwhelm your users.

Speaker B: With fancy visuals which are one of the most popular kinds of tutorials that they make online.

Speaker C: And you know what?

Speaker B: Theyre completely useless. Thanks for watching this long.

Speaker C: If youre not subscribed yet, click that button and subscribe.

Speaker B: Liking the video and leaving a comment always helps. And as always, I wish you all a beautiful day.