10 UI/UX design tips for developers (pics)

For whatever reason, you might find yourself as a developer in the position of building an application without design specifications. It could be that the project is for internal use only and designers would only complicate things (heh). Or maybe you actually asked for designers' help but you were told they are busy.

But more often than not, it's the client who decides to not "waste" their tight budget on design… Just as a side note, it turns out, skimping on design doesn't result in savings, but rather paradoxically the contrary is true!

So what can you do as a developer to create a sound application that doesn't have grave usability issues? Of course, you will be using a well-established library like Material Design, but that only provides you with UI elements. You can still mess up the user experience.

Well, here are some UX design tips that are easily applicable:

1. Clearly differentiate between primary and secondary buttons


Variant A. puts more strain on users' minds than B.

BTW, I prefer putting the primary button to the right and the secondary one(s) to the left, but whatever arrangement you choose, make sure it's consistent throughout the application.

2. Use proper spacing to show what belongs to what

3. Avoid vague labels

Labels are an integral part of any UI. Menus, forms, buttons – they all feature labels. So one tip is to try to make them as descriptive as possible while still keeping them short. If that's not possible, at least make sure they are not confusing, i.e. their meaning can be easily understood from the context.

By clicking CANCEL you are cancelling your subscription or you are cancelling the cancellation?

4. Pay attention to readability

Fonts that are too thin, too bold, or too narrow hurt legibility.

THE SAME THING CAN BE SAID ABOUT OVERLONG SENTENCES IN ALL CAPITAL LETTERS.

Not to mention poor contrast... Note that what might seem easily readable for you, a youngster with high-end devices, might not be as easily legible to others. This is a nice example of don't:

5. Don't mix solid icons with line icons

It might not be such a big usability issue, but it surely looks sloppy. Just pick a library of the plethora available online nowadays, pick a style, and stick with it. For instance, Material Designs offers a wide range of pictograms in several styles: line, filled, rounded, two-tone etc.

6. Mark the fields that are not mandatory as optional

...instead of asterisking all mandatory fields

In case there are more optional fields than mandatory ones, you should ask yourself why are they there in the first place?

7. Avoid minuscule clickable areas

For mobile, the minimum clickable area should be 44x44 px, maybe 40x40 px if space is a problem. On desktop screens, I wouldn't go below 32x32 px.

8. Avoid using standalone icons for abstract concepts

Icons are everywhere, and for good reasons: they save space, convey meaning visually, they reinforce CTAs, and help interfaces look cool. However, unless they are universally recognisable like like, check, save, delete, etc., always accompany them with explanatory labels.

Often developers (and designers too!) use clever icons to express nuanced concepts, and in order to save space, they end up ditching the accompanying labels. Well, don't do that. Use overflow menus instead maybe.

.

9. Write for real people

An integral part of any UI is text, i.e. UI copy. I'm talking headlines, empty state screens, notifications, tooltips, instructions, dialogues, and error messages. More often than not, technical people tend to use a rather technical language in UI copy instead of writing it for regular people. The most common offenders are badly written error messages, like the classic and unhelpful "An error occurred". There are memes about them, so you know what I'm talking about.

Here's one I found recently and made me laugh real' hard:

10. Avoid huge dropdown lists

If your list of options is very long, you could add search functionality to the dropdown (transform it into a combobox). Or you could break up all those options into multiple dropdown lists.

The opposite situation, with a dropdown list of only 2 or 3 options, is not that great either. In this case, it's better to use radio buttons instead.

That's all, folks! I hope these tips will help you build better applications without designs, but also that you won't have to.

Read more articles

Greentech: has the Great Energy Transition started?

Published on:
May 11, 2022
Read article

Can devs and UX designers work well together?

Published on:
April 20, 2022
Read article

"We're on a tight budget, we can't afford UX"

Published on:
April 11, 2022
Read article

Tips and tricks for a stress-free work environment

Published on:
January 10, 2022
Read article

Having fun with Qubiz!

Published on:
November 16, 2021
Read article

We’re ISO 27001 certified (since 2020)!

Published on:
November 4, 2021
Read article