The Top 10 Expertly Corroborated Visual Web Design Mistakes

Web design experts post, tweet, share, and discuss design dos and don’ts via blogs, social networks,
e-zines, and conferences. They praise the techniques that work and denounce those that don’t. But few have corroborated or consolidated their opinions.

We asked seven web design experts to articulate what they view as the top visual web design mistakes. We also researched industry blogs for additional input, then fused the information to produce our own top 10 list of expertly corroborated visual web design mistakes.

Let the countdown begin!

10. Poorly Functioning Search Tool

There’s nothing more frustrating than typing a keyword into a search box and landing on a completely different page than you expected. “Search is the user’s lifeline when navigation fails,” wrote User Advocate and Nielsen Norman Group Principal Jakob Nielsen, Ph.D., in his Alert Box “Top 10 Web Design Mistakes” article.

It’s a given that all websites should contain a functioning search box. Alberto Cairo, director for infographics and multimedia at Época-Editora Globo in San Paulo, Brazil, ranked “a great, great search engine” among his top three design staples for an effective website.

It doesn’t have to be fancy. “Even though advanced search can sometimes help, simple search usually works best, and search should be presented as a simple box, since that’s what users are looking for,” Nielsen wrote.

The Fox News search bar features a simple yet effective design.

9. Using Graphics in Place of Text

There are obvious reasons why graphics shouldn’t replace text. Usability analyst and “Web Pages That Suck” author Vincent Flanders broke it down this way in his “Biggest Mistakes in Web Design 1995-2015” report:

Graphics increase the size of the page.
Graphics aren’t search-engine friendly.
Graphics are often poor quality and “aliased.”
Mistakes in graphics are hard to correct.
Graphic overload!

Host Wisely, a web hosting review and information site, called displaying important keywords as images a “big mistake” in its “Ten Biggest Web Designs Mistake Review.” Charlotte, N.C.-based freelance graphic artist and owner of Summerhouse Creative, Erica de Flamand, ranked “poor use of type and image, where one overpowers the other,” second on her list of biggest visual web design mistakes.

Bottom line: “Simple is always key, both in design and usability,” de Flamand said.

8. Using Atypical Fonts

Conformity can be good—especially when it comes to choosing a font. Here are the most commonly used web fonts, according to Newbie Website Design, a web design tip blog:

Arial
Courier New
Georgia
Helvetica
Times New Roman
Trebuchet MS
Verdana
Webdings

To be safe, stick with typical sans serif choices like Verdanna and Helvetica, and serifs like Times New Roman and Georgia. However, thanks to font technology improvements web designers are carefully branching out from this “preferred” list.

“In the past, when we changed up the fonts from these ones, the words had to become images so they would always show up correctly, but lately there have been some advances in development languages so they can show up as actual text,” de Flamand said. “On the flip side, typography that is too unique will not translate well across all browsers, so the goal is to find a balance between functionality and design.”

7. Not Designing for Multiple Platforms

Internet Explorer, the most popular browser for Windows operating systems, often requires web designers to minimize layout differences that may appear uniform in Firefox, Mozilla, Safari, and Chrome.

“Microsoft’s Internet Explorer browser has been a thorn in my side for years as a web designer,” said Jay Wingard, owner of 18th Street Design in Columbia, S.C. “It never fails that I must test every site I develop heavily in IE since I can bet you each and every time a site designed with HTML standards will have one or more design/coding issues in IE. If you talk with most developers, they will commonly detest Internet Explorer.”

This stackoverflow.com image shows how one website appears on Firefox (left image) vs. Internet Explorer (right image).

Laura Ruel, an associate professor in visual communication and multimedia production at the University of North Carolina at Chapel Hill, agreed that designing around Internet Explorer sucks up a large amount of time.

“The solution: test, re-test, and re-test again,” she said. “Over time, designers learn ways around the idiosyncrasies of IE on PCs and other browsers. Right now, it’s just part of the process of designing for the web. You don’t control the end-user’s browser and viewing options.”

6. Straying From Design Conventions

Consistency in web design is powerfully important. “When things always behave the same way, users don’t have to worry about what will happen,” Nielson wrote in his “Top 10 Web Design Mistakes” article.

It makes sense, for example, to give important content a larger, more dominant headline, or to position navigation tabs to the left or across the top, where users expect to see them.

“Why reinvent the wheel when the common navigation design works fine?” Host Wisely asked in its “Ten Biggest Web Design Mistakes Review.” Users who feel like they can control their web experience will always come back for more.

5. Using a Fixed Font

An excessively large font screams at the viewer. Small type is hard to read. Too much of the same font is boring. But, don’t mix it up too much. In “Design 101, Too Many Fonts—Good Grief!” Ning Creator Blogger “Jen” advised using no more than two to three fonts for a logo, header, or special image, and three to four for the overall site.

DOES THIS ALL-CAPS FONT MAKE YOU FEEL LIKE YOU ARE BEING YELLED AT?

“If you need more to communicate better, go for it,” she wrote. “But, whenever possible, try to keep those fonts at a minimum.”

In its“Top 10 Biggest Web Design Mistakes” article, Web Design Library suggested adding buttons users can click on to decrease or increase text size. Give users as much control over their viewing experience as possible.

4. Not Enough Contrast

Color choice greatly affects contrast. “Hot colors that vibrate on the screen” or “white type on dark colors that are hard to read” will send users packing, de Flamand warned. On the other hand, white type against a pastel background may not even show up.

Flanders wrote in “Biggest Mistakes in Web Design 1995-2015” that without proper contrast, “visitors to your site can’t read the text, and if they can’t read it, they will leave it.”

Northern Irish freelance web designer Grace Smith identified good contrast as an “essential principal” of effective web design in Mashable’s “Top 5 Web Design Mistakes Small Businesses Make.” It creates visual interest, directs the user’s attention and “can equally be effective in organizing and defining the flow and hierarchy of a page,” she wrote.

The lesson here? Pair wisely.

Apple's clean design offers just the right amount of color contrast.

3. No Visual Hierarchy

Effective visual hierarchy announces a site’s purpose clearly and immediately. Each page should reflect a consistent design to maintain that hierarchy. Rachel Daniel, a senior user interface designer in Raleigh, N.C., said pages designed “individually instead of for a system,” lack repetition and consistency.

Where do I start? No, seriously.

Ask yourself, what do you want the user to see first? Content priority and visual weight design choices can make or break your website. “For all practical purposes, this is the root or the base upon the usability of the site,” said Ron Gaulden, an interactive specialist for Crown Communications in Charlotte, N.C.

Ruel named “clear hierarchy of information” and a “dominant focal point” as two of her web design staples.

Cairo pointed out that poor structure and hierarchy create too much work for users. “That´s the reason a search engine and a good archive section are usually great ideas,” he added.

Smith suggested incorporating clearly labeled “call to action” buttons or graphics to guide users. “Don’t make your users work or think, or they’ll leave,” she wrote for Mashable. “It’s not that they aren’t smart, it’s that they want access to information quickly without spending unnecessary time searching for it.”

2. Too Much Text, Splash and Flash

Web Design Library calls it “plug-in overload.” Flanders describes it as “a car wreck on the information highway.” Wingard says too much text, splash, and flash is simply a “mess.” All agree that websites overloaded with continuous copy, flash add-ons, slow-loading graphics, and too much color are big web design no-nos.

Painful.

“The more extraneous items there are on a web page, the more unprofessional it looks, and it becomes overwhelming, confusing, and distracting for the user,” Smith wrote in Mashable’s “Top 5 Web Design Mistakes Small Businesses Make.”

Too much “stuff” on the homepage affects traffic, too, since users typically don’t return to websites that bombard, confuse, or overwhelm them.

Ryp Walters, owner and founder of OverCoffee Ventures in Cedar Rapids, Iowa, said he knows there is too much content on a web page when he has to scroll excessively—”particularly when there is little body content, but lots in the left and/or right hand columns.”

Host Wisely ranked “overloading the site” its number one web design mistake, and recommended incorporating white space to create a “better overall impression.”

“Find a middle ground between standard and over-the-top typography or images,” de Flamand said. “Avoid too many ‘flashy’ add-ons, and be flexible.”

1. Unclear Navigation

Huh?

Is anyone surprised that navigational failure topped our experts’ lists? Flanders said good navigation should be “simple and consistent.” Smith described it as “effortless and natural.”

Most designers position navigation graphics across the top or down the left side of a website, where users expect them. Jakob’s Law of the Web User Experience—that “users spend most of their time on other websites”—underscores the importance of this.

“This means that they form their expectations for your site based on what’s commonly done on most other sites,” he wrote in ‘Top 10 Mistakes in Web Design.” “If you deviate, your site will be harder to use and users will leave.”

***

Avoid these visual web design mistakes and you’ll create an effective, visually balanced website that meets its intended goals. And in case you’re wondering, there is one design element you can never have too much of:

“Hierarchy,” Cairo said. “A well-designed website can never have too much order.”

Additional Resources:

Design Experts Interviewed

Alberto Cairo, director for infographics and multimedia at Época-Editora Globo in San Paulo, Brazil
Rachel Daniel, a senior user interface designer in Raleigh, N.C.
Erica de Flamand, freelance graphic artist and owner of Summerhouse Creative in Charlotte, N.C.
Ron Gaulden, an interactive specialist for Crown Communications in Charlotte, N.C.
Laura Ruel, assistant professor in visual communication and multimedia production for the School of Journalism and Mass Communication at the University of North Carolina at Chapel Hill
Ryp Walters, owner and founder of OverCoffee Ventures in Cedar Rapids, Iowa
Jay Wingard, owner of 18th Street Design in Columbia, S.C.