Getting stuff right on your website is like cooking a perfect soft boiled egg. It’s easier to screw it up than get it right, and even the experienced cooks fail at times.
Indeed, the list of things that can go wrong on your website is endless (and growing with every latest web design trend).
Below, you’ll find five examples of bad web design that hides important information from your website visitors.
Are you making the same mistakes?
5 examples of bad web design that hides important info from your prospects
…and how to “unhide” it to keep your visitors on the page longer, maintain the conversation flow and make your arguments more persuasive.
#1 Slider / carousel
“But I really like how my slider looks!”, wrote my client to me after I told him to kill his header carousel in my website review.
I understand. I like how it looks, too, Brad. But that’s the only good thing about it.
Carousels aren’t effective in communicating important stuff (or getting people to click on them, for that matter). They rotate faster than your prospects are able to absorb the info.
Don’t believe me?
Click on the image below to slip into the shoes of your website visitors and see for yourself how much a carousel sucks if it’s not yours while reading about the results of different studies and A/B tests.
What to use instead of a carousel?
Substitute that nag with a static image and text.
And this time, you don’t have to worry whether your visitors will have time to read it before it changes to something else. So craft the best unique value proposition possible that will knock the socks of your prospects.
#2 Text that appears on hover
I don’t see it often, but when I see it, it fails so much it hurts. Here’s an example imitating a visual element I saw on a real website:
Not everyone will guess they need to hover for the different text to appear. Plus, hover effects don’t work on mobile.
I guess you paid a designer to do that for nothing, huh.
What to do instead?
Have something important to tell your prospects? Don’t rely on them hovering over stuff for the text to appear. Make the important info visible right away.
I see this sometimes used to display app features. Here’s an example:
Like in the example #2, you need a visitor to click somewhere to see the info. Not everyone’ll notice your tabs, and even if they do, not everyone’ll make an extra effort to click them.
Plus, think how it will look on mobile. There, your tabs will be probably even more subtle, which will lose you even more eyes on your content.
What’s the alternative for tabs?
Display the info in a way that all of it is visible without any clicking, for example, in subsequent sections.
#4 Links that don’t look like links
This one is obvious, and yet many people miss it:
If it’s not clear that that thing is clickable, fewer people’ll click on it. Thus, fewer people’ll learn what you want them to learn.
And I mean both: text links and images that are links but you’re the only person who knows it.
For example, can you guess what’s clickable here?
You’ll probably try clicking on the colored shapes or the headings. But nothing will happen, and you would think this is just text and move on.
Yet, funny story: The plain lines of texts are actually links that are supposed to lead the visitors on that website to a different page.
How to make sure your visitors recognize your links
First of all, don’t use images as links if there’s no other clues around them that suggest that they’re clickable.
Second of all, make links look like buttons or text in a contrasting color (underlining helps, too).
- Here’s a link that stands out.
- Your visitors won’t miss this link either.
- And this link is hard to spot, so not many people will click.
Also, check out this great article from Nielsen Norman Group on how to make clickable elements recognizable.
#5 In-text links
In-text links can be very useful in the informational blog posts. But if you’re having a “sales conversation” – trying to tell your prospects why they should work with you, how your services make their lives better, why they should trust you, etc. – the links to other pages (even your own) are your arch enemies.
Is your in-text link sending a visitor to another page to learn something important to your current “conversation” (for example, a case study or a blog post)?
Bad news: It’s a whole new page, so not everyone will make the conclusions you want them to make or read it at all.
Plus, there’s no guarantee they’ll come back to the original page.
What to do instead?
Tell them what you want them to know right there:
- think about what you wanted your prospects to learn on that other page,
- summarize it in a couple of sentences,
- and display that info on the current page
…not to interrupt the flow, spare them a click and not to risk a bounce.
Summarize the results of that case study. Compress the main takeaway from that blog post in into a paragraph. Don’t link to the website of a client who gave you a testimonial.
The main takeaway
The main takeaway from all 5 examples is one and the same, really:
Have something important you need your prospects to know for them to make sense of what you’re saying? Make it static. Make it visible. Make it noticeable right there.
Bonus way #6: Unspecific or unclear copy
You know, things like “We provide a number of services to suit any person’s situation”.
What services? What situations?
Or “Work smarter. Save money. Take control”.
I wish I knew what that’s about!
All well-meant attempts to communicate important something. The problem? Your visitors don’t know what. So, congratulations! You just hid some important info from them by trying to be clever.
How to make sure your prospects get your message
There is a bad news and a good news to this.
Bad news: There’s no short answer to how to write clearly. There are whole books on this topic only.
Good news: I wrote two blog posts about this that contain concrete examples and tools that you can apply on the spot (without combing through pages of those heavy books). Check them out: