Lisa Burford Logo LISA BURFORD®

blog

5 Examples of Good and Bad Website Design

May 31, 2023

The photo is taken looking down at the ground. A white spraypainted stenciled circle and letters on asphalt reads You arrer here. The tips of shoes are shown at the edge of the photo standing within the circle. photo by Fallon Michael

Imagine you walk into a grocery store. Instead of food and products organized by sections, hanging signs that point the way to items, everything priced, and aisles clear of clutter and obstructions, you are immediately faced with a long never-ending shelf row of disorganized products, multiple "SALE!" signs hanging down bumping you in the head as you make your way over to the shelf-wall. If you're even lucky enough to sort through the clutter to find what you need after an absurd amount of time, you look around helplessly trying find out where to go next. The store has extra rooms that are unmarked. You wander into one hoping there is a checkout register in there. There's not. It's empty except another sign reminding you that there is a "SALE!". You try the next unmarked room. And another. Finally, at the back of the store, you find a register. When walk up to it, it's self-service and, unfortunately, it's not working. Nobody's around to help. Your phone has been buzzing reminding you that you're now late to pick up your kids. Frustrated, you leave your items at the register and get out of the store.

Would you ever visit that grocery store again? Would you even trust that it could properly handle a transaction? Probably not. Your experience was bad and you've lost all faith in its abilities.

Why should a website be any different? No matter if your business is on the web to sell products or services or to provide information, there are common mistakes you should avoid in your website design. While nobody is perfect, I'll go into a few key examples that tell you what not to do and what to do instead.

User experience.

Good website design makes it easy for visitors to find what they need and navigate the site, while bad website design can be confusing and difficult to use.

One of the top things I discuss with my website clients is figuring out what the #1 thing they want people to do while visiting their site. There could be more than one task, but we focus on the main purpose of having a website. Is it to sell products? Do you want someone to sign up for a newsletter? And so on... In general, a website is to provide access to information, and having the ability to find it effortlessly is important. This ties into the website user's journey, and a good user experience from a strategically designed website makes that easy and enjoyable.

Visual appeal.

Good website design looks modern and polished, while bad website design can be cluttered and unappealing.

We can all have our own ideas of what a modern and polished website looks like. For some, it's a white background with clean typefaces. For others, modern means the latest trend in website design. However, unless your aesthetic is chaos, a messy site design can be a real turn-off to visitors to your site. A distracting design can cause frustration. If a website causes confusion through disorganization and creates distrust with an outdated look, it will cause a poor user experience (see #1). However, don't let style overshadow the essentials.

Mobile-friendly.

Good website design is optimized for mobile devices, while bad website design can be slow and difficult to use on mobile.

By now, you should care about what your website looks like and how it performs on mobile devices. When it comes to mobile vs desktop website traffic, 50.48% of web traffic comes from mobile devices, and in the United States, 63% of all online traffic came from smartphones and tablet devices. In 2020, 58% of the total multi-device purchases made had used mobile devices to close sales with users' preferences for convenience and better accessibility over having a bigger screen for browsing. So how does optimization come into play? The loading times of your website matter significantly for mobile users. A report by Google revealed that 53% of mobile users ditch a website if it's taking more than three seconds to load a page (and some research drops that number to two seconds).

Page load refers to how long it takes for a web page to entirely load and appear on the screen. What a web page needs to load includes all content on the page such as images, text, animations, and videos.

To help speed things up, you can make sure you compress images in a program that allows you to control the quality of the image. Your web designer/developer could use a file compression program that reduces the size of the CSS, HTML, and JavaScript files when they are larger than 150 bytes in file size.

When you're planning the features of your website, you should make sure these features are absolutely necessary. Certain features call for the use of plugins (I'm looking at your WordPress users) and extra JavaScript code, both of which add to your page load time. Include only those elements that are necessary for your page. Plan along with your designer to determine if the features are worth the trade-off of increasing page load times. Basically, having too many page elements not only can hurt your page speed, but also make it a slow journey that drives users away.

Statistics from Mobile vs Desktop Usage Statistics for 2023, Apr 6, 2023, research.com

SEO and Accessibility.

Good website design is optimized for search engines, while bad website design can have poor SEO, outdated SEO methods, and low-quality content. Good website design prioritizes accessibility in the design and build, while bad website design only considers accessibility as an afterthought.

I put these two important practices together for this list because the best practices of search engine optimization (SEO) are consistent with the best practices of web accessibility.

According to Wikipedia, "Search engine optimization is the process of improving the quality and quantity of website traffic to a website or a web page from search engines." and "Accessibility is the inclusive practice of ensuring there are no barriers that prevent interaction with, or access to, websites on the World Wide Web by people with physical disabilities, situational disabilities, and socio-economic restrictions on bandwidth and speed."

A good content structure would improve accessibility and can help SEO. This can include using title tags and subheadings on your webpages which not only helps with readability, these elements help search engines understand your webpage content's purpose.

Including alt text (alternative text) with your website images helps accessibility because people who use screen readers may rely on alt text to know what the image is. When it comes to SEO, alt text also allows search engines to take that information and display the images accurately in search results.

The list can go on, but in general, when you make your website accessible, more people are able to use your website. When your website gets more traffic, it can outperform your competitors' sites in search rankings.

Calls to action.

Good website design includes clear calls to action, while bad website design can lack these elements or make them tough to find, therefore making it difficult for visitors to know what to do next.

A webpage call to action or CTA means content that helps users take action. An example of a CTA is a button to "book a call." When there is no clear next step or the CTA is too subtly designed, the user doesn't know what to do. If it takes too long for them to figure out what to do next, they'll give up and leave your site. This is tied to #1 on this list.

In a nutshell, bad website design can be difficult to use and unappealing, lacking key elements that make a website successful. Good website design is easy to use and visually appealing, with mobile optimization, accessibility, and SEO, plus clear calls to action. A successful website creates happy clients which in turn helps your business and creates a trustworthy brand.


Want to talk good design? Let's connect and chat.