Product Management | Websites
9 Common Mistakes to Avoid In Web Design
Best practices checklist from a Fortune 10 product manager
Remember this version of Yahoo? Back then, sites were packed with links, popping icons, and spam-like promos. But bless them UX designers, we have come a long way. Digital media feel like a seamless extension of our mental and physical abilities. However, there are still many websites out there that get the basics wrong. This blog is a humble attempt at calling out some of those mistakes and suggesting a few alternatives. So, here we go:
1. Break a promise
Users are highly goal-driven on the web. They enter a website or click a button anticipating certain results. Some pages tend to break the flow and bury important information under a flurry of distractions.
A popular example is hiding prices in order to improve funnel metrics. But, we must respect users’ time — after all time is money in the digital world. Give the user what you exactly promised without extra scrolls or clicks. Whenver possible, surprise them by exceeding their expectations. In the above example, you could do so by providing a tooltip to view a price breakdown.
2. Ignore Jakob’s Law
Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know. — Jakob’s Law
People love to be unique and it helps them stand out more often than not. It is natural to apply this philosophy to web design as well. However, creative designs also introduce a learning curve for users. So, we need to box our creativity so that our site works similarly to other comparable websites.
3. Commit suicide by words
A blob of text is more reminiscent of a book/newspaper than a web page. Such long editorial style designs can be boring, unmemorable, and painful to read. Page owners should leverage these simple tricks to allow users to scan their page easily:
- Use short paragraphs, headings, and sub-headings
- Bold keywords
- Use the inverted pyramid of journalism (from the need to know to nice to know)
- Use bulleted/numbered lists
- Adopt a simple language (avoid salesy/marketing pitches)
4. Adopt fancy UX
In a recent experiment on the US Census page, 86% of users failed to find the ‘current population’ when it was presented in large red numbers. This isn’t a great page, to begin with, but even their simple attempt to catch the user’s attention backfired due to what is called selective attention.
Web users have learned to selectively filter out ads. Unfortunately, they also ignore legitimate design elements that resemble prevalent forms of advertising. Pop-ups are another great example. Often, they get closed even before they load! So use simpler, less-drastic call out options to steer users’ attention.
5. Choose the wrong font styles
Websites should aim to aid users with both visual and verbal cues. Background themes/images are great tools to complement our narrative and improve the readability of the verbiage. However, websites still pick low contrast designs time and again.
While this is a rookie mistake in most cases, I see this happening at large companies as well for a few reasons:
- Content and design teams work in silos: Page owners should take the onus on themselves to have these teams collaborate
- Employees must use standard templates: Font colors and sizes are restricted for branding consistency. In such situations, enterprises must aim to support multiple themes — at least dark and light ones if not more
6. Spinning wheel of death
Loading spinners are great if we were stuck in the 1990s due to a time glitch. Research has shown that spinners actually increases the perceived wait time by the users. So, here are a few ways to better handle the anxiety of the user:
- Progress bars that indicate the percentage of progress
- Load skeleton structure to give a sense of progress to the user
- Communicate the steps occurring in the backend (Example: connecting to the server, personalizing the results, sending the packets, etc.)
- Lazy loading can also help in such situations
7. Use weak clickability signifiers
What’s worse than having too many call-to-actions (CTAs)? Having a CTA that users can’t find. Certain design elements are not intuitive to the users and introduce click uncertainty. Users completely miss the functionality or are confused about what action they should perform. Such elements are said to have weak signifiers. Here is an example:
The problem isn’t that users don’t see a weakly signified element. It’s that even when they do see such UI, they don’t feel confident that it is what they want, so they keep browsing the page. Please be mindful of
8. Ignore web accessibility needs
Business pundits recommend that you prioritize needs based on the size of the impact — i.e. solve problems that the majority of your users face. But, that’s not accurate when it comes to web accessibility.
Web accessibility is the inclusive practice of ensuring there are no design biases that prevent interactions by people with physical, mental, or socio-economic constraints.
Websites must account for the following unique needs: auditory, cognitive, neurological, physical, speech, or visual. For example, you can provide textual equivalents for images to help blind users using text-to-speech software. Or enclose closed captioned or a sign language version for videos to help deaf/hard-of-hearing users understand the video.
If ethics isn’t good enough, there are business benefits too! First and foremost, you are required by law to support accessibility needs — read that as it will cost you a lot less to support web accessibility. Moreover, even your SEO rankings get a boost when you use inclusive designs.
9. Make it impossible to part ways
Retaining customers is easier/inexpensive than winning a new customer. That’s why websites focus on delighting customers. But, if someone truly believes that they don’t need your product anymore, they should be able to walk away easily.
Canceling should be made as easy as getting started with your product/service/website.
Some websites make it very difficult to find the cancel/unsubscribe functionality. And worse, a rare few even need you to get on a call to cancel the subscription. Instead, focus on helping your users even when parting ways. Make the cancel option accessible and a one/two click process.
TL;DR Design with Empathy
I don’t claim to be a professional design expert by any means. And I certainly don’t think this is an exhaustive list. But, I hope that this motivates web producers to design with empathy. As long as we focus on genuinely helping our users and we will land on a great design!
Anyhow, what do you think about this list? Are there other common web design mistakes that I missed? Please share them in the comment section.
If you liked this post, here are a couple more you might enjoy:
