4 Popular Web Design mistakes you should avoid

As the need for web design and development is increasing day by day, designers have chances to practice and enhance their work more than ever. Nevertheless, even the most experienced professionals make mistakes. And you, as a web designer, might break rules sometimes but have not acknowledged them yet. That’s why experts from Designveloper conducted this article to help you work with web design more effectively.

1. Focal point? What the heck is that?

Clients like to make everything bigger and leave no space left to calm the design. And this sometimes confuses users when they cannot point out what element they should land their eyes on. This issue either break the aesthetic of the site and worse, forces potential customers to leave it since emphasizing everything makes important elements cannot draw users’ eyes.

As a web designer, chances are that you have met clients like that and cannot explain why things won’t work this way. Or else, this is the problem you have never thought of. For your information, it’s all about focal points. So let’s talk about this very first web design mistake.

A focal point is an element or area of dominance that stands out of the whole design. It is used to catch viewers’ attention and make the web scannable. Furthermore, this very element helps to deliver messages quickly and effectively. On the other hand, focal points should answer questions users might have about the page.

The solution for this issue is simple: put more visual weight on your important element. To perform this, you have to express the difference between your focal point and other elements by varying different design characteristics such as size, shape, color, depth, texture, density, white space, etc.

For example, let’s look at the heading of spotify.me. The designer emphasized the message “You are what you stream” by using bigger font size and making its weight line thicker. At the same time, he/she used a contrast set of colors between the background (orange/pink) and the text (navy blue).

And here are three steps to create focal points for your web design.

• Step 1: Identify elements you want your users to focus on. Those elements will be your focal point. Remember that the number of focal points could be more than one but don’t let everything scream at the users. So the next step is…
• Step 2: Prioritize the visual weight of all elements on the site. For example: if the call-to-action is more important than the text, then its visual weight should be more dominant.
• Step 3: Emphasize the focal points by changing their characteristics.

2. Inconsistent interface

On May 2019, Facebook presented a bold change in their mobile app: modifying the logo in terms of the design (from only famous F to its whole name Facebook) and the color (from the significant blue to black). This resulted in an interface looking just like another version of the Messenger app. Consequently, many of my friends (please note that they are software developers/designers) were so confused. Another issue here was Facebook itself getting rid of its brand color and make the app so different from its web app. Several days later, they turned the color back to blue, and things went back to normal, no questions or confusion were addressed anymore. So what was wrong with this change?

This web design mistake that Facebook’s designer made here was ignoring consistency.

Consistency in design means the elements in UI are uniform in terms of the look and the behavior. Thanks to consistency, your web design would make no surprise and difficulties when users are navigating the sites. The reason for this is that surprises are bad for experiences: once your users cannot get what they expected, frustration and confusion just come. That’s why there is a very valuable quote that every UX/UI designers should learn by heart “Let’s design for user expectation“.

In short, a consistent interface will:

• increase usability,
• eliminate confusion,
• reduce the learning curve.

So the question is “how could we design consistent interfaces?”.

First of all, your design should be consistent with device UI guidelines and behaviors. This one is important yet easy to execute.

The thing is that you cannot create an interface for all range of devices, from Android to iOS, etc. Every platform has its own way of experience and please don’t confuse an Android user with an app that should be on an iPhone. They have already got familiar with performing their device’s actions and behaviors.

However, as stated above, you can easily adjust your design so that it could go with the flow by using iOS Human Interface Guidelines when designing for Apple products or Material Design when forming the interface for Android products.

Secondly, you should offer users a familiar and comfortable experience by being consistent with other similar apps/sites. No, I’m not telling you to copy their style but to implement the industry’s best practices into your product. Thus, your work will have a popular pattern that everyone can use easily. However, don’t forget to bring personal nuances and new experiences to the design.

For example, when it comes to e-commerce websites like Amazon, Etsy, etc., search bars must be on the top-left corner (1) and the shopping cart must be on the top-right corner (2). Thanks to this unwritten rule, end-users don’t need to seek for these two important elements.

Last but not least, all interfaces should be consistent with your own design or in other words, let’s create consistent visual elements throughout the sites. That means the color set, the styling, typeface choices, the layout and element placements, etc. should be relevant across pages.

3. You offer too many choices

The ability to make decisions is one of the most important factors that keep users scrolling through a website. As suggested in our previous article “9 Key Recommendations when Designing a Web or Mobile app — Part 1”, it is a nice thing to empower users. However, having too many to choose is exhausting.

This happens due to the fact that a bunch of choices may lead to decision fatigue and human beings often find it overwhelming to process a lot of information at once or in other words, your users are distracted and will put off decision making. Or worse, they will choose an easy way out: exit the page.

Consequently, more decisions are made but fewer conversions are reached.

So how can we avoid such an issue? Let’s take a look at our solutions:

• When it comes to CTAs, don’t lay too many CTA on your page. Instead, we need to guide users to the specific functions they need the most. Furthermore, creating a uniform section for CTA is a thing to consider too.
• Working with your marketing department to limit the number of offers and promotions.
• Products/content filters and sorting options could help your user navigate better.

4. Your web contains everything that sprung on your mind

Folks, our final recommendation for you today is cleaning up your page asap!

Working as a web designer requires us to come up with different ideas every day. However, not every idea is good ideas. When including too many things on a site, your end-users will be confused by its look and as a result, information cannot flow smoothly and reach the visitors as expected.

This is when we should get rid of some certain exceeded components or elements to optimize the user experience.

Nevertheless, improving user experience is not the only benefit here. First of all, a clean and simple enough website will have a more balanced and professional look, or in other words, the web won’t scream a ‘salesy’ language. Furthermore, uncluttered websites are simple to navigate, and its content is much easier to be digested since you can effortlessly scan through pages.

So here are some easy tips and tricks to clean up your web:

• At the moment you start drafting the web, it’s essential to put everything on the design. Okay, it sounds strange but by adding all the ideas and concepts in the blueprints, your outcome won’t be a bland website thanks to every experimental and exploration made. The next step is to question yourself “can I cut this out?”, “will this really contribute something?”, etc. or get consulted by others and eliminate one by one. Lastly, it’s time to tune your page one more time to make it a strong and tidy design.
• Making use of white space, letter, line spacing padding margins, etc. to create a breathing room for the web.
• Web alignment should be smooth and consistent. Sections should not fight for places or have varied sizes.

To end this part, let’s look at a well-practiced example from Designveloper:

There you go! We hope this article will help you be more confident when designing a web or mobile app in the future. If you have any recommendations on this one, ping us at our Facebook, Twitter or LinkedIn now!

But hey, provided that you are looking for a web design company then Designveloper could be the one. Tell us your idea now and we will realize it for you! 😉