Web design is quite a complicated thing. There are rarely clear rules and everyone likes to judge “good design” a little differently. There are therefore some pitfalls on the way to effective web design. This article shows 7 common design flaws.
“Popular design flaws” — that sounds very contradictory. Of course, these are “popular” only in the sense that they are made frequently. It would, of course, be better not to make these mistakes. And can you even call them “mistakes”? Sure, that’s always in the eye of the beholder.
Therefore, I want to put it this way: In this article, I show 7 web design points that — in my eyes — are often implemented unfavorably. Unfavorable in that you worsen the usability of the website and reduce the often cited user experience.
But I don’t just leave it at these design errors, I give suggestions on how to do it differently / better.
1- Confusing Home Page
It is the most important page of a website. If the visitors do not constantly appear on sub-pages for SEO reasons, the visit to a website starts here by default — on the homepage.
The challenge of a homepage is that it should somehow bundle everything the sub-pages have to show. A “best-of” of the entire website, so to speak. And much fail here.
Instead of a “best-of”, the visitor gets a kind of table of contents. According to the motto: “We offer A, B, and C. You get X, Y, and Z. We have 1., 2. And 3.”
OK, this turns a supposed advantage into a problem: instead of briefly telling the visitor where he is and what to expect, the statements are watered down by quantity. And studies have shown that no visitor sits in front of the slider and looks at it gradually until everyone is through (OK unless it is a picture gallery of the last Bundesliga match day …).
Suggestion For Home Page:
Plan the start page as the last page on the website. Then when all other pages (at least for the most part) are finished. And then set clear priorities. What awaits the visitor on the website. Which are the main offers, services, products? What are the intentions of the visitor? The key message, the meaning of the company (or product or whatever it is) can be summarized, similar to an elevator pitch. And then split up the content. Not all content, i.e. sub-pages, needs to be presented on the homepage.
2- Navigation Points Not Clear
The classic is navigation points like “About us”, “Services”, “Products” and “Contact”. So far it sounds understandable. But is not always self-explanatory, or intuitive and clear.
Suggestion For Navigation:
Think navigation from the visitor’s perspective. For example, PayPal has divided the main navigation into the areas “private customers”, “business customers” and “partners and developers” — in other words, into the different target groups and the points were named appropriately.
When navigating, not only use reflex standard terms and pages but also carefully think through the choice of words and the page structure (information architecture) (more than once).
3- Illegible Fonts
The selection is now huge. Thanks to the different web font providers, you can spend hours looking for suitable fonts. The wide selection does not necessarily lead to better results. Similar to what has been the case in the print sector for decades, fonts are always used on the web that looks somehow “special”. But are not easy to read.
Suggestion For Fonts:
For typography: readability comes before aesthetics. The font may be so “beautiful” and individual and the manager of the customer likes it as much. If it is not legible, it has no place on the website. And be careful: Some fonts are still legible in large font sizes, but no longer in smaller ones, such as continuous texts.
4- Line Lengths Too Large (Over Full Content Width)
This mistake is probably the “most popular”. I find it on almost every other page. The text, mostly the small body text, stretches across the full content. That’s not a bad thing in itself, yes, if the content width weren’t so wide …
That would quickly be over 1,000 pixels wide. With font sizes between 14 and 18 pixels, the line lengths then become perpetually long. Too long — readability suffers.
Suggestion For Line Lengths:
Recommended for a good line length is approx. 70 to 90 characters. Often less is recommended. But it always depends on the font and size you choose. However, this value is a good orientation.
5- Text On High-Contrast Image
The pictures must be as large as possible. But of course this also “wastes” a lot of space. So place a nice headline on the picture. A principle (image + headline) that has paid off in advertisements for decades. It only becomes problematic if the image motif is very restless or has strong light-dark differences and the text is then — at least in places — difficult to read.
Suggestion For Text On Image:
Better avoid high-contrast motifs if the text is to appear on the image. Ok, of course, that’s not always possible. If there is no place in the picture where the text can be placed in a legible place (and response times may also change positioning faster), they often only the bar helps. Store the text with a colored bar and it is immediately legible (if the contrast is high enough, of course, see the next point).
6- Text Too Small:
Although the trend is towards ever-larger texts, this development has not yet reached everyone. One of the most common reasons for poor legibility of the texts is font sizes that are too small.
Suggestion For Text Size:
What used to be 12 pixels, previously 14 pixels, is now 16 pixels — the lowest limit for font sizes. Again depending on the font and text color, but the continuous text should not fall below this limit. Or have a good reason for it.
7- Medium shade of gray
There are few more unsuitable colors than medium shades of gray (clear, exceptions confirm the rule). Gray itself is a popular color and also works well as a contrast to bright colors.
A dark-gray, for example, is good text color. A very light shade of gray as the background color.
It’s only a bit difficult with the medium shades of gray. No matter whether light or dark text is on it, the light-dark contrast is always quite low. Medium shades of gray always look a bit like a “gray mouse” …
Suggestion For Shades:
Gray as a color is suitable for almost every website. But then please choose very light and/or very dark tones.
Conclusion:
To make a mistake is something normal, but we don’t have to do it again, work hard and learn from your mistakes and I will guarantee to you that you will be the best
Originally published at https://spotiance.com on February 8, 2020.
