Common UI Mistakes Developers Make

December 10, 2015 2:13 PM | Posted By: Jonas Hendrickx

(photo credit Dean Myers via Creative Commons License)

Many developers make common mistakes when designing an application or website. Usually these are things that can easily be prevented. With this article, we will start by highlighting 4 common mistakes to get you started creating the perfectly designed application or website.

Charts

Everyone has used charts at some point in their life. We use charts to display data.We all know and use charts. We use it to display data. Choosing the right chart is important for the data it is going to represent. A chart is used to display data visually so it becomes easier to understand or read. Choosing the wrong chart type can confuse a reader.

Pie charts are used for displaying simple comparisons, for example a simple yes-or-no vote. Ideally you want to compare between 2 to 4 values in a pie chart. Adding more data to a pie chart will only make things worse. A bad example of a pie chart is the usage statistics of the toppings on sandwiches.

 

In the chart below, you can see it becomes very difficult to sort the sandwich toppings according to popularity. How much time do you need to sort the toppings according to popularity?

 

Instead, we would display the popularity of different toppings on sandwiches using a bar chart. It is much easier to see which topping is the most popular, and which one is the least popular.

Colors

Colors are essential to polish your application or website or to add branding for identifying with you, your organization or your brand. However, when designing your application or website, you must not forget that there are people with a color vision deficiency. The most well-known color vision deficiency is the one of red and green.

What you can do is use colors for polishing your application or website. But what you should not do is requiring colors for your website or application to work. Basic functionality should never depend on colors. But you are allowed to enhance functionality with colors. For example:

In the above image, people with a color vision deficiency for red and green would be unable to use the application if the buttons were only red and green. The image clearly shows that a dependency on solely colors is a bad idea.

Label alignment

Left

Left label alignment is the most common alignment used on forms nowadays. This creates a two-column layout. Aligning labels to the left may make it easier to scan the labels at first glance, but it will make it very hard to connect the labels to the field it is representing, note the large amount of whitespace between the labels and the field in the picture below.

The advantage of aligning labels to the left of a field is that we can fit more controls on a screen, so the user doesn’t need to scroll as much. However, fitting too many controls on one screen is not a good design practice.

Right

Aligning the labels to the right, allows us to connect the label with the field faster. However, all the space on the left side of the label is wasted and does not look good at all. Also if the labels have a different length, the white space will become even more noticeable, and the labels will become harder to read as we need to try to identify the horizontal starting point of that label with our eyes.

When reading the labels from top to bottom, notice how your eyes try to find the starting point of the last label in the picture below.

Top

Aligning labels to the top of a field is generally the best way. The labels are still horizontally aligned to the left, making them easy to read when scanning vertically with our eyes. When aligning the labels to the top of a field, we lose a little bit of precious vertical space on our 16:9 displays. But we now have finally a solution that connects the labels to the fields without wasting any precious space.

Image Buttons

Image buttons will cause issues when people will try to translate your website with Google Translate or other translation services. When the text is merged with the image, the text cannot be translated, because it cannot be decoded from images. Usually developers want to do this because they want to have customized looks for their buttons. This is not a good design approach.

If you are developing an application, and you need to provide translations later, you are not going to include a different image for every single language it supports. It would increase the size of your application by a huge margin.

What you should do instead is use an image as a background for your button, and then overlay the text on it.

See the 'Save' and 'Delete' buttons below, what if you wanted to translate them to Spanish using a website translator to read this article?


Posted In: UI Design
Add your comment