Castle Builder Blog

Web Design Practices to Avoid

by Lisa Giacone

If you’re thinking about updating your website as part of your new year’s resolutions, you may want to consider the down sides of some web practices in light of the direction that website technology and usability is taking.

There is plenty of information available on what practices impede good user experience and plenty of disagreement on the subject, too!

Here is a roundup of some practices and features which are being contested. What do you think?

Automated Pop-ups

Annoying your visitors with automated pop-up windows when they are trying to find information or buy something is inarguably one of the chief offenses of website design. Using an automated pop-up to ask for the visitor’s email address may hurt your efforts at collecting data; consider using a regular page with a form instead.

Autoplay Videos

Websites with autoplay videos are trying to boost video view statistics, but this comes at a cost of alienating the visitor by preventing them from having control over how they interact with the site. If you need a how-to video, at least give the user control over when to play it.

Pointless Animation

Animation that’s done just for the sake of a “wow effect” is injudicious. Animation should only be used where there is a compelling reason to do so, such as designing applications for small touchscreen devices (which rely more heavily on spatial/3D effects such as sliding, layers, and zooming).

Keep in mind that not all browsers support animation, and even if they do, not all devices have a powerful enough operating system to ensure a smooth experience. According to Rachel Nabors of Tin Magpie interactive studio, “there’s no one-size-fits-all solution (in ensuring a good user experience). You have to do your research, pick your battles, and adopt mitigation strategies. It’s paramount to know and use the most efficient animation techniques and test on real devices.”

Don’t forget that animation costs quite a bit of time and money to develop, so knowing your site’s browser and device traffic (using tools such as Google Analytics) is crucial in determining whether this investment makes sense.

Overly Busy Pages

Too many photos, an overly busy design, too much text or too many icons. Do you really need to add the icon for every social media site you’ve come across?

Juha Liikala of Stripped Bare Media asks: “What are the 20% of elements (on the web page) that bring 80% of the results you’re after? Start there. Always have a sound reason for adding new features…”

Fixed-Width Pages

Prior to the proliferation of small touchscreen devices, web pages were designed to display at a fixed width, which was determined based on the most popular desktop monitor sizes.

Now, with the larger number of display sizes for end users, it makes more sense to design websites to adapt the page layout to the screen size of visitors’ devices. The end result? Less resizing, scrolling, unpredictable page appearance and less visitor frustration. For a more in-depth explanation, take a look at Castle Builder Design owner Amélie Walker-Yung’s presentation on responsive web design.

Low Contrast Text

Sounds straightforward that you should use text that contrasts sufficiently with your background color, but many websites ignore this usability rule. What constitutes sufficient contrast? For body text, the contrast ratio  between the text and the background should be at least 4.5:1. For larger text, the contrast ratio should be at least 3:1.

A color contrast checker is available at: webaim.org/resources/contrastchecker/

Certain colors are very similar in value (value is defined as the relative lightness or darkness of a color), if not in hue (for example, certain shades of red and green have similar values even though they are very different colors; thus, they do not provide good contrast with each other).

For a table of color contrast choices, go to:
webdesign.about.com/od/color/l/bl_contrast_table.htm

More information about the Worldwide Web Consortium’s guidelines on contrast is available at: www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html

Stock Photos

If you want your website to make a good impression on visitors, it pays to have professional photographs SPECIFICALLY of your product or service. Stock photographs might come close to the image you want, but they will never match your idea exactly (only custom photographs can do that!)

Although a professional photo shoot will certainly cost more money, you will get results that more accurately depict YOUR product or service, and won’t be mistaken for someone else’s, which is crucial for a strong brand identity. Stock photos can be used by anyone who pays for them, and there are many examples of businesses whose marketing materials look alike because they feature the same stock photos.

Sound Off…

What do you consider to be the worst impediments to a good user experience? Leave us a comment below!

Further Reading:

12 Outdated Web Features That Need to Disappear in 2014, Mashable

Web Animation at Work, A List Apart

Stock Photography – What It Is, How To Use It, and When To Avoid It, About.com Advertising

Published on March 27, 2014.

About Lisa Giacone

Lisa worked with CBD from 2007 to mid-2016. Because her background is in marketing for municipal parks and recreation programs in both print and web-based media, she has a talent for using graphic design to create clear messenging, no matter what the audience. Lisa believes a website should be user-friendly and aesthetically appealing. Apart from design, Lisa is busy—very busy!—raising her sons, Anthony and Marco.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.