Bad Web Design: 5 Website Features That Are Hiding Important Info from Your Visitors

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 fix them 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.

Fact:

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. Generally speaking, animations distract your visitors from their goals, but sliders are the worst.

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 those lines before they change to something else. So, craft the best unique value proposition possible that will knock the socks off 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 an interactive design element I saw on a real-life website:

Not everyone will guess they need to hover over the icons for more information to appear. Plus, hover effects don’t work on mobile.

I guess you paid a web 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.

#3 Tabs

I see this sometimes used to display the 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 this layout 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 a thing is clickable, fewer people will click on it. Thus, fewer people will learn what you want them to learn.

And I mean both – text links as well as images that are links but you’re the only person who knows it.

For example, can you guess what’s clickable here?

(Image source)

You’ll probably try clicking on the colored shapes or the bold 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 lead you to a different page. Intuitive design 101: Failed.

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).

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.

#bummer

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. Do not, I repeat, do not 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? Make it static. Make it visible. Make it noticeable right there.

Ok, we know now that you won’t make these mistakes again. But what about design elements that I haven’t mentioned here?

To make sure your brand new design element won’t rack the user experience (and your bank account), keep in mind the following principles of good website design.

Good website design is:

• Visually appealing: It doesn’t have to be super-duper fancy. Not ugly is fine.
• Functional: Makes it easy for your website visitors to read and navigate your website.
• Consistent: Same things look the same (for ex., same typeface and font size for headings, same styling for links).
• Intuitive: Things look like they function. All important elements to be found in usual places (for ex., navigation on top, shipping policy in the footer).
• Responsive and robust: Adapts to different browsers and devices while still looking visually appealing, functional, consistent and intuitive.

(This article was originally published on Gillandrews.com)

***

Gill Andrews is a copywriter and a UX specialist who turns underperforming websites into lead-generating machines. Want more tips to improve your website? ?? Join the club here.