These website design mistakes can spell the difference between success and failure. Are you committing any of these deadly sins?
Heads up: The design world is always evolving, especially on the web. I have updated this article with new insights to reflect that fact since its original 2017 posting.
Having a well-designed website means more than the right photos and color scheme. Just like the devil, good website design is in the details. It incorporates and enhances the user experience, serving a purpose beyond mere eye candy.
If you’re selling something, it means subtly leading visitors down the garden path to make a purchase. It also means removing any distractions or roadblocks in the way of that goal.
If it’s a news/blog/publishing site, it means articles are easy to read without causing eyestrain, and content is organized to keep readers leaping from article to article as they fall in love with your site.
Remember, if you have any hopes of making money with your website, you want it to serve your business model. Otherwise, you’ve got a vanity site and you can do anything you want.
This article is for site owners who want to succeed, and designers who want to put extra smarts behind their skills.
In my years of developing websites for a variety of business types, I’ve come across a number of common mistakes from well-meaning designers, misguided marketers, and even overambitious theme developers. Here are some common pitfalls, and what to do instead.
10. Not Using Animations (or using them wrong)
When I originally wrote this in 2017, there were still a lot of outdated websites using Flash. Thankfully, this is now a rarity. The mobile web has made sure of it.
But that doesn’t mean the web is now a boring, static place. Advancements in site coding standards have made it easier than ever to add not only useful, but exciting animated effects to your site.
jQuery, HTML5, and CSS3 can accommodate just about anything you need to do. Make use of HTML5’s canvas tag, or jQuery’s Animate plugin, or CSS3 transitions and transformations to give your site new life.
Beyond that, consider making a video. Websites are capable of full-window video backgrounds that you can overlay all sorts of elements on top of. If used correctly, this can really make an impact.
But before you go turning your website into a collage of animations that rival a MySpace page circa 2007, take time to consider the purpose of each element. How does is serve not only your goals, but the user experience? Animations are best used to inform users. Use them to draw attention to a special offer, navigation element, or new content. Trigger them with hovers, clicks, and scroll actions.
Of course, animations can also be used to add style and panache to your site that reflects the feel of your brand. This is especially true for fashion and tech sites, or any high-end luxury product.
9. Confusing Page Elements
Today’s web visitor has been trained to expect certain behaviors from a user interface. Smartphones, web apps, etc. have made certain icons and elements take on particular meanings.
For instance, using a icon to represent something other than a menu might be confusing. Popups and overlays have become increasingly popular, but they should be easy to escape. An X in the corner of a box had better close that box, and be easy to see/click on.
Another thing I often see is design that tries to be too clever by half. Interactive elements are presented with no clear indication of what the user should do with them. This doesn’t mean you should avoid innovation, just provide some hints. Maybe fade in a simple instruction when the user hovers, or after a brief delay
Overall, avoid requiring your visitor to stop and think. This not only takes them out of the moment your site is trying to create, it makes them associate their frustration with your brand.
8. Website Design is Not Responsive (or Not Responsive Enough)
Seriously. Did you know that over 60% of web traffic comes from mobile devices? Yet, I still come across a few sites every week that do a crap job at responsiveness, or aren’t mobile-friendly at all. I have to pinch and zoom on my iPhone just to read anything, and forget me clicking your drop-down navigation.
From the initial design phase, the artist must consider how the website will work in at least three different scenarios:
I say at least three, because you should really also consider how the layout will look when Tablet or Smartphone are in Portrait (vertical) and Landscape (horizontal) mode.
The reason it’s called “responsive design” is because the layout is able to naturally respond to the window it’s in without having to reload the page. It should also be able to swap back and forth, or scale dynamically as the size changes. You can accomplish this in your style sheet with rem units and CSS media queries, as well as making the viewport zoomable. These are fundamentals of responsive design.
To do this well, you must consider things like maximum width and whether some elements (like a sidebar) will be repositioned or go away completely at certain screen sizes. One reason why single-column layouts have become so popular is they simplify the desktop-to-mobile equation while creating a consistent experience across platforms.
You must also consider how your navigation will work in different situations. A typical “across the screen” nav menu with dropdowns may work great on a desktop window, but the restricted real estate and touch controls of a mobile device not only require, but facilitate alternatives like slide out menus and overlays. The “hamburger menu” has become a popular option, often used on both mobile and desktop as she primary method.
Avoid targeting specific devices instead making your design work well within certain “break points” for window size. This will effectively dictate some of your design decisions, but can force you to make better overall choices.
And let’s talk about fonts. One way to make me leave your site in a hurry is if I see a bunch of fine print where the main content is. Eye fatigue is real, and people don’t want to get a headache after reading your site. Remember, not everyone as the perfect eyes of a twenty year-old, so make things easy to read.
I hear you say, “but I want to maintain balance in my layout!” Well, you may need to reconsider the scale of your other elements, or at least provide different font sizes that work with different devices and screen sizes.
The best approach is called “mobile-first”. This means think about the smartphone experience, and expand out rather than the other way around.
But don’t neglect the desktop, especially if you’re selling products. A recent study found that most users research on mobile, but come back to the desktop to buy.
7. Slow Load Times and Page Speed
Did you know Google can actually rank your site lower if it loads slowly? Their rationale is that a slow website doesn’t provide a good user experience, and as we’ve seen in recent years, user experience is their top priority for search ranking.
Your site should load in 2 seconds or less, ideally as fast as possible. Nobody wants to wait forever for your gorgeous images to load, much less for some unseen script that’s taking twenty years.
But there’s a lot you can do to make your site snappier. Possibly the best is using image compression to reduce file size. If you’re using a CMS like WordPress, there are great plugins to compress images for you automatically. Otherwise, shrink them down using software like Photoshop before you upload them. It also helps to serve scaled images that are appropriate to where they will appear. It makes no sense to load a 1000 pixel-wide image in a 300 pixel space, does it?
Start by running your site through a website speed test tool to point out any issues you need to fix. If you don’t already use it, get access to Google’s Search Console and use their PageSpeed tool. (Search Console is useful for a plethora of other reasons, too.)
Okay, we’ve covered some of the more general website design mistakes. Now, let’s get a little more specific and dig deeper into user experience and business logic.
6. To Slide, or Not to Slide?
We’ve all seen the ubiquitous slider that appears at the top of 90% of web pages these days. But what was once novel now seems de rigueur.
But did you know sliders are pretty much useless? At the very least, they’re not worth the bandwidth and real estate they consume. They distract from getting visitors to your real content, slow down your site, and make you lazy in your promotional efforts if you rely on them to point people to your stuff.
I’ve been guilty of this in sites I’ve built, but you’ll notice this site doesn’t use one. I’ve pretty much abandoned sliders except for full-window layouts that use it more as a splash screen effect and expect you to click through.
But this point is about more than sliders. It’s a reminder to consider each element of your site carefully. What is its purpose? Does it serve a useful function as well as look cool? Does it assist with the goals you set for the site?
Anytime you think about adding some new gizmo to a site because it’s trendy or your competitor has one, consider whether it’s really worth it. Time is money – not only the time you spend on development, but the time your visitors spend with you.
5. Content Not Prioritized in the Layout
How you arrange the elements of your website layout should make sense as a whole.
I see lots of sites that are overly top-heavy (often with a big ol’ slider), or have a very cluttered sidebar that draws the eye away from the main content. It’s like having a side order of bright orange carrots distracting from a juicy steak (with apologies to vegans and rabbits).
Imagine your content as a hierarchy, with each element being given different visual weight. Your most important information, most likely your key selling point or latest offering, should catch the reader’s eye immediately.
The next thing they see should reinforce the first thing, expanding upon it. Then each section beyond that — sidebar elements, images and interactive items, etc –should be arranged according to importance.
In a way, it’s like storytelling. You’ve got main plots and subplots. Main characters and side characters. Ultimately they reinforce each other to tell a complete story. But just as there is nonlinear storytelling, this is not to say everything should be laid out in a strict vertical manner.
Visual weight can be assigned in a number of ways – size, color, font style, detail. Something that moves will have more visual weight than static elements. A brighter color will stand out more than a duller one on a neutral background.
Capture the right balance of content elements, and you will be on your way to beautiful, harmonious website design that is as functional as it is fascinating.
4. Call to Action is Missing in Action
Your visitors were willing enough to come to your website, but how will they know what you want them to do there if you don’t tell them?
This is why a clear call to action is important. It lets your visitors know what to do next. Should they call you? Fill out a form? Download your e-book? Subscribe to your newsletter?
An effective call to action should make it clear what the prospect should do, and what they will get out of it. Be creative, but be direct.
Of course, a call to action should be supported by content that leads them to realize the benefit of taking said action. Does your content do enough to inspire desire? Are you catching your potential customers at the right phase of the buyer decision process?
3. Anti-social Behavior
If you want to gain social traction (which is vital not only for traffic, but for brand development), you should make it easy for your visitors to share your content to the social platform of their choice. After all, social engagement (likes, shares) is a ranking factor used by Google.
Luckily, there are lots of ready-made social sharing tools that are easy to insert into your site. The trick is to make them prominent enough for your readers to find and use.
However, there is one practice I find particularly clumsy – social media sharing buttons that cover up part of the content. The buttons cling to the side of the window in a fixed position, so they don’t scroll away. But if your window is small enough, or their layout wide enough, they will actually overlap the content area and you have to scroll to read around it.
That may be worse than not having the tools at all, and I see it on some very prominent sites. Sure, you can collapse the element, but should you have to just to read what you came for?
I prefer social tools that are prominent but stay out of the way. They can either be minimized by default and expandable, or a fixed bar across the bottom of the window. On this site, we opted for a horizontal bar across the top and again at the bottom. This gives readers an easy way to share when they arrive, or when they’re done reading, but it doesn’t intrude on their experience.
Another thing worth pointing out is the idea of social proof, a psychological theory that people are more willing to do something if they see others doing it. This is why you should consider including the number of shares the page has received inside each network’s button. Shares encourage more shares.
2. Intrusive Elements Used Intrusively
We’ve all visited sites where, as soon as we arrive, we get hit with popups to sign up for something. Um, can we date first before we get engaged?
The reason for this is that numerous marketing studies have shown that opt-in popups are an effective way to increase newsletter signups or other actions. And they certainly are, when used correctly. In fact, some experts will tell you the sweet spot is 5 seconds in.
But here’s the rub: Why would anyone want to sign up for your newsletter before they even know if your content is any good? If they found you via Google search, and it’s their first visit, it’s like you’re some stranger at a bar proposing to every girl you meet right off the bat. Super creepy.
If it’s someone’s first visit and they came from search, delay the popup until they’ve had time to assess your content’s value. If your content is doing it’s job, they will be more likely to sign up. Unbounce suggests a 60 second delay, but each situation is unique, so be sure to do some testing. Your site should be creating a cookie for every visitor so you can at least know if they are a new or returning visitor.
It also makes sense to trigger the popup when a reader reaches the end of an article. By then, they should be filled with favorable feelings about your content and want more of it.
Or, you could delay this popup until a user visits a second page on your site (as long as it’s not an opt-in page itself). At this point, they have expressed interest in your content and are more likely to convert.
Another good approach is to use exit intent as a popup trigger. This means tracking when a user mouses out of the window. One caveat: Since there’s no mouse on mobile devices, you’ll need to detect exit intent a different way, such as scrolling up past a certain percentage (although this is not 100% accurate).
1. Not Putting Users First
This is less of a single mistake and more of a philosophy that encompasses everything we’ve been talking about.
So many times I see websites where it’s painfully clear that the site owner has put his needs over those of his visitors. It’s a reflection on their priorities as a company, and frankly, it undermines their efforts and makes the web a worse place for all of us. Remember, it’s all about offering value. You have to give first if you wish to receive.
Whatever you do in your site design and infrastructure, keep the user in mind. Resist the urge to abuse them with elements and tactics that frustrate them just to squeeze them into your sales funnel or make a cheap buck. Don’t deceive them, misdirect them, or aggressively interrupt their enjoyment of the experience.
They are essentially guests in your home, treat them as such. You will create a more favorable and lasting impression of your brand in their minds that far outlasts any short term gain you may receive. Take the long view and you will set yourself up for long term audience growth.
Website design is both art and science, as much psychology as it is aesthetic. The two must work in harmony to serve a common purpose.
I hope you’ve enjoyed these tips. If you’re concerned your website design is working against you, hit me up for a free website evaluation.