Typical interface mistakes developers make

#design #ux #ui #webdev

I’ve been working on web applications for more than ten years now. As a developer, it was always hard for me to make my interfaces look good and user friendly. But I still wanted them to be so.

Now, as a solo founder, I realize that you might not have money for a designer. However, in order to make decent interfaces, it’s not necessary to have one.

It’s now popular to talk about people who don’t have CS degrees but have become developers. I’m convinced that the same applies to developers who want to build beautiful interfaces: you don’t need a design degree.

Here are some of the most frequent mistakes I meet when I browse random web apps.

Complexity over simplicity

It often happens that developers design interfaces for their convenience. They might be quite complicated but easy to use for their creator.

While the title seems to be way too abstract, I can show some examples of what I mean by complexity over simplicity.

For example, sometimes devs try to fill the empty space in their app or provide some additional hints which aren’t necessary.

Remember: a good interface doesn’t need an explanation.

Sometimes people use excessive wording, e.g., “Your Email” while it is obvious that the app asks for your email, so you can simply put it as “Email”.

Have a large form? Break it into groups.
Have a large number of groups? Make a wizard, breaking the * process of filling the form into steps.
Need to provide a broad explanation? Put it into a popup, which is hidden by default.
Have complex filtering or advanced settings? Hide them by default

Wrong grouping

One of the essential things in user interfaces is the rule of grouping. I don’t know if there is a particular term for this, but here is the illustration which will help you understand what I mean.

If you have two logical groups of elements, the distance between these groups should be bigger than the distance of the elements inside these groups.

While it may seem pretty obvious, I often come across interfaces that violate this principle. A few days ago, a fellow asked me to check his design. Here is an example of a violation

As you can see, the “Features” label is placed between two blocks. While we read from top to bottom, we can guess that the features come after the title, but it still takes some minimal amount of time to verify this.

In complex applications, it can be worse.

So pay special attention to the margins and paddings. Even if it’s a matter of a couple of pixels, our eye can catch this.

A large number of elements inside one group

Our mind cannot operate a large number of elements inside one group. This may be applied to anything: starting from buttons ending with menu links.

Do you remember the days when the interfaces looked like this?

This is a good illustration of the violation of two principles: wrong spacing between groups and many elements inside one group.

Right now I’m writing this article in Google docs. The toolbar is broken into logical groups. Each group does not contain many elements, up to 5-7.

So, if you have a group of elements that contain too many elements (more than 6-7), then try to break them into separate groups.

Lack of contrast

The picture above demonstrates the problem with contrast. You can often read a text inside a button, but you don’t realize that it has low contrast. You just got used to the text, but new users will feel some tension.

Sometimes this is pretty easy to fix. When you’re developing your site in a web browser, you can check contrast using dev tools.

Not enough attention to UX

There are plenty of examples when people have nice looking interfaces but forget about the UX side.

This keyboard has “power” and “delete” buttons next to each other. But people often use the del button, while almost don’t use the power button. So you can accidentally click on the wrong button and turn your laptop off.