MENU

6 Sins of Web Design and How to Amend Them

When it comes to web design, most people can’t tell you what all makes a good experience, but they can tell you exactly what makes for a bad one. Some errors are so glaring and so damaging to a website that they’re practically sins. Below are six sins of web design and how to fix them.

1. Bad Navigation

Have you ever visited a site and couldn’t figure out where to click to navigate through its pages? Sites lose about 50 percent of sales because the user can't figure out where to click to get the information they need. Even worse? Forty percent won't return because they’re frustrated.

You might have bad navigation if:

  • Your navigation is not near the top of the page.
  • The wording is not clear.
  • You have a map that’s cute but not intuitive.
  • You don’t offer a clear link back to your home page.
  • The shopping cart is hard to find.

Bad navigation can turn site visitors off and tamper with your conversion rates.

How to fix:

You can fix bad navigation by thinking through how other sites are typically set up. Users expect the navigation to be across the top or on the left side near the top. They also expect links along the bottom of the footer. Choose some main categories and offer a site map or a drop down menu for larger sites.

good navigation on the shopping site Groupon

You can see an example of good navigation on the shopping site Groupon. Groupon has navigation tabs at the top of the page and then additional categories that further break them down along the left side bar. Click on any page and the navigation is still clearly visible. Users can easily find the shopping cart at the top of the page with a cart icon.

2. Tiny Fonts

If the fonts on a site are too small, the text will be difficult to read. You have an average of 8 seconds to grab someone's attention and get them to read the content on your site. If your font is small, the reader may grow frustrated and leave. Some mistakes with tiny fonts include:

  • Choosing a font that’s 12 points or under
  • Using tiny fonts for image captions
  • Using a huge font that takes up the whole screen but doesn’t add any information

A tiny font is particularly hard for anyone with a vision impairment to read. This can include anything from needing bifocals to being color-blind.

How to fix:

Fortunately, this is a very easy fix.

Consider the overall balance between the size of the text and the images on the page. Smashing Magazines recommends using at least a 16 pixels for the right line height. Stick with common fonts, such as Arial or Times New Roman, so that you know what size to expect.

A good example of a site with good font size is Engadget

A good example of a site with good font size is Engadget. Notice how the majority of the text is in a larger font size that balances nicely with the height of the images.

3. Too Much Information

Trying to pack too much information on a page is very distracting to the user. Some of the other elements mentioned in this list can exacerbate this problem. For example, if you’re using the wrong line height for text, then you might have a tiny font that allows you to add too much information and make the page crowded.

Large sites also have this issue at times, as they try to let visitors know about everything they have to offer on one page. However, it is much better to keep the overall design simple.

How to fix:

A simple design means that the content you display on your landing page is limited to only the most important information.

  • Include main categories in your navigation
  • Feature just a few articles
  • Place less vital info in the sidebars
  • Don’t be afraid to push old content to the back

simple and beautiful design is CJ Pony Parts

A prime example of a simple and beautiful design is CJ Pony Parts. This site keeps it simple by featuring the main categories in capsules. This creates the perfect cohesive look with a line height for the titles that matches the size of the capsule images. Call to action buttons complete the effect and keep the focus on exploring the content further.

4. Low Contrast

Websites are a very visual medium, which means that you have to actually be able to read them and view them. One deadly sin of website design is using poor typography. This can include:

  • A fancy font that’s hard to read
  • Colors that don't contrast enough
  • Too many bright, distracting colors

One example of this would be a site that uses light text on a light background, such as white on light pink.

How to fix:

If you fix only one thing on your website, fix the contrast between the background and the text. If the background is dark, the text should be light. If your background is white, the text should be dark.

  • Black and white contrast nicely
  • Yellow is never a good choice for text

site for the Ben Stiller movie While We’re Young

An example of a design featuring a strong contrast between the text and the background is the site for the Ben Stiller movie While We’re Young. Even though the site uses yellow in the design, which would normally be a no-no, they do it by placing it over a dark background and providing the text as a cutout that shows the dark background through a transparent yellow capsule. Brilliant!

5. Ad Overload

If you overwhelm your visitor by placing ads everywhere, then your bounce rate will likely be high, and visitors won’t return. A site with too many ads might do these things:

  • Place ads across the top, down the sides, and in the middle of the page
  • Add annoying pop-up ads that inundate site visitors
  • Have ads that cover content or are larger than the content on the page

Remember that visitors want to gain information and that’s why they’re visiting your site. They can see ads anywhere.

How to fix:

There are some rules you should follow to make sure you aren't overwhelming your visitors with advertising.

  • Get rid of popups — everyone hates them
  • Be tasteful with the ads you display
  • Limit yourself to two or three ads per page so you don't overwhelm the visitor or make your site spammy

a site that has ads but doesn’t overuse them is Restless Chipotle

A site that has ads but doesn’t overuse them is Restless Chipotle. The focus of this site is on recipes, images of the food, and info on cooking. However, the site does utilize a few ads near the bottom of the page and on some of the recipe pages. It isn’t overwhelming and the focus is where it should be, on the content.

6. Distracting Video and Audio

When using audio and video elements in your design, be sure to include a way for people to disable them. Some people do not have fast internet connections or may access your site at work, where they don’t want loud music to suddenly start playing.

Avoid:

  • Videos that automatically stream — they may slow down the visitor's computer
  • Background music — just say no to this, period

Video and audio might seem like a great thing to put in your designs, but society still isn’t at a point where everyone will appreciate it.

How to fix:

So, how can you utilize video and audio without sinning against design? Offer the user an option to view the video or audio, rather than have it autoplay. Additionally, ensure that there are clearways to exit once the video or audio starts to play.

YouTube is a site that uses audio and video well

A good rule of thumb to live by when it comes to audio and video is asking, “Can I better explain the same thing with written content?” If so, then don’t add it. An example of a site that uses audio and video well is YouTube. Although a video may start to play upon landing on the site, there are clear markers on how you can stop it, restart it, pause and move elsewhere. You can take a cue from YouTube and easily incorporate these details into your own design.

When it comes to web design, new trends make their way into the industry every year. While some of them are exciting, not all are beneficial to site visitors. Be vigilant about avoiding design sins and your clients will thank you.

Lexie Lu

Guest Blog Author: Lexie Lu

Lexie Lu is a freelance UX designer and blogger. She keeps up with the latest web design trends and always has a cup in close proximity. She writes on Design Roast and can be followed on Twitter @lexieludesigner.

Our Before & After Designs

Look at what a difference a website redesign makes!

richmondlinksinc old Before
richmondlinksinc new After

- Before and After- richmondlinksinc.org

Don't miss an update- Like Us On Facebook!