Of course it is important that a website looks “pretty”, attractive, fresh, but it is even more important that it works correctly. We have all come across a website that takes us time to understand, and that produces disinterest.
What are those common web design mistakes that negatively affect the performance of a web page? Let’s see!
#1. Stock photos
We have ALL used stock photos, be it Stocksnap, Pexels, Pixabay, there are so many! Let’s say you bought a beautiful WordPress theme, you’re ready to put together an AWESOME website, and you want to make it look amazing. The images are fundamental, apart from the texts, so that your page is striking, is understood and generates the desired conversion.
It is important to remember that page layouts are currently minimalist. Just look at that of marketing gurus like Neil Patel or Gary Vaynerchuck.
Lots of white space, clean typography and pops of color (Gary prefers black and blue, Neil prefers orange).
The best Websites have in common the use of personalized professional photographs about the brand, product, clients, experiences, etc. This is perfect if the brand offers products or services, for customers to be able to see real results or products “put” on someone is an attractive element that also builds trust.
Visual Website Optimizer carried out a test that compared a real photo with a stock one. They only made a variation of the image, they wanted to verify which one resulted in more clicks from the CTA (call to action), that is, more registrations. The result was that the real image increased by a 161% increase in CTA clicks and a 38.4% increase in page registrations.
Remember that it only takes 13 milliseconds to subconsciously understand an image, always choose the best ones! Images can also increase engagement by 94%.
So what do you do if you have no choice but to use stock images, or don’t have professional photos to use?
Scrollea. Do not stick with the first image you see on the image bank pages.
Edit the image: Be sure to look for images with rights (free) for commercial use (Flickr allows you to apply this filter when searching). Then, edit the image and add what you need, change colors, etc. Check out what Gary Vaynerchuk does:
Also, as in the previous example, you can use images not so produced to make a composition.
Make sure that the stock images you select have a common graphic line: That is, establish criteria for choosing these images: similar color palettes, similar styles, image type, etc. For example, for a blog of a brand of yachts, boats, etc. it would be best if the images met similar criteria:
- Color palette blue, white, touches of red if necessary. It would be very strange that suddenly there is a black and white image, right? It would break with the harmony of colors.
- Photos, not illustrations.
- Elegant or family themes. For example, an image of a worn-out fishing boat, no matter how blue it may be and even if it is a photo, would be discarded because it does not identify with the lifestyle that the brand wants to project.
#2. Images too big.
Ok, we agree that stock images are not the biggest mistake of your brand, as long as they are beautiful, match the brand’s personality, have harmony between them, etc. But choosing images that are too large can work against you. For example, check out this background video on a page:
It looks good, right? When the page opens, it stretches across the monitor and looks perfect. But what can be wrong?
This. It’s very slow. It takes about 12 seconds to load, which can result in losing 31% of your traffic.
People don’t like to wait, no matter how beautiful a website looks. According to a Google report regarding the speed of the pages in its mobile version, the probability of a bounce increases by 113% if the site takes more than 7 seconds to load.
The good news is that Google has a tool to check websites and show recommendations to improve loading time. It’s called Test My Site.
Page loading speed is given so much importance because it not only generates bounce but also damages SEO. You can see in this post some SEO Tips to improve the positioning of your website with little budget. As you can see in the same Google report that we mentioned before, it says that if the number of elements on a page goes from 400 to 6000, the probability of conversion decreases by up to 95%. Therefore, although we have a deep-rooted saying “merchandise that is not displayed, is not sold”, your page should not show EVERYTHING at the same time. Avoid overloading your website with elements, images, audio, etc.
Here are some tips to keep in mind:
- Crop and resize images to fit in specific places on the site.
- Compress the files with tools like WP Smush.it.
- Use tools like CloudFlare to upload your images.
#3. Call to Actions
If you came across a Call to Action like this, would it be clear where to click?
There must be a hierarchy between the titles or texts to know which are primary and which are secondary. The logic behind this isn’t very difficult: people need to know which of what they read to value the most, so explicitly signal the call to action with flashy buttons and catchy verbs. CTAs such as: Download it now!, Find out how, Sign up and get a discount, etc. they tell the user exactly what to do or what they achieve by clicking on them, and they are incentivized.
#4. Confusing messages.
Has it happened to you that you enter a page and do not understand exactly what it is about? You even have to go to the “About Us” tab to get a clue, and already that starts to get you down.
Ask yourself: How clear is the message of your website? The user should not be wandering around to find out what your brand does, who is behind it, where to buy a product or service, etc. Maintain readability as if the content was intended for 7th and 8th grade students. No, this does not mean that it is “childish”, but very technical or far-fetched words distract the user from what you really want to convey. Studies ensure that what is easy to understand (words, names, etc.) increases the credibility of a brand.
What does this have to do with design?
You can have the best texts, but if they do not “see” easily, if they are displayed with so much movement that they cannot be read well, if the color or shape of the font is not adequate, the page will not generate conversions because nobody will understand it. Success is the combination of the right message with the right design.
#5. Extremely «Flat» design.
Don’t Make Me Think is one of the best books on design and usability to drive conversions. The premise of the book is quite obvious from its title. Have you seen a child pick up a tablet, smartphone or iPad for the first time? It won’t take you long to figure out how it works.
In an ideal world, websites should offer this same facility, but unfortunately this is not always the case. When the minimalist design of a page is efficient, it is immediately understood. When it isn’t, it’s usually caused by lack of signals to users on what to do or how to operate the website.
Check out this heatmap from the CrazyEgg software.
This shows that NOBODY is clicking the main image, even when the intent is for users to do so.
The images and the page look great, but there is no prompt for the user to click on these elements. Something simple like a title, button, or animation would inform users that they should click.
Instead of letting the user assume what to click, prioritize the calls to action and do not summarize SO MUCH the information so that the user knows what to do. For example:
- Title: “Free template”
- Subtitle: “Goal template in your marketing strategy”
- Copy: “Determine your marketing goals and set a timeline with this Excel template”
- Image: Mac laptop with an example of the template on screen.
- CTA: Button that says “Download your template”
Leave nothing to the imagination, guide the user towards what you need them to do.
#6. Smart Organization.
The organization of the page directly influences conversions, so it must be clear and efficient. For example, your “About” or “Who we are” page should, even if it is super repeated, be called that. If we change the name to “Leader”, “Unit”, “Team”, etc. it will take more time for the user to know exactly what it is.
Most pages should be organized in a similar way so that people know exactly how to find a product, even if they haven’t visited the website before.
If you do online shopping, you will notice that the pages are normally organized by gender, type of item (shoes, accessories, dresses, etc.), age, departments, brands, offers, etc. This makes it quite easy to know where to start. Nordstrom does something similar on its website, and what better example than Amazon. Organizing the pages in this way allows the categories to be displayed or to resolve the most common doubts of the user within the page.
#7. Carousel Sliders.
However, no matter how “beautiful” they are and although for those who include them they create the feeling that they are “showing” the content, there are studies like Harrison Jones’ for Search Engine Land that show that very few people click on the carousels.
So don’t wear yourself out wondering why if you added a carousel, and it’s something “trendy”, the conversion rate didn’t go up. People see them, but don’t click. If you already have it and you don’t intend to change it, be sure to display eye-catching messages that respond to business objectives.
- 7 Bad Habits That People in the Web Designs Industry Need to Quit - December 27, 2022