Last Nov 24th, I participated in the Bogodev meetup and gave a talk titled “UI fundamentals for programmers”. My objective was to share my personal experiences with other developers and to have a conversation around those experiences. Since the talk was given in spanish, I’m going to share the key parts in this post.

Disclaimer

I consider myself a noob in this field. The content of the talk is mostly based on my personal experience. I’m very lucky to have a brother who happens to be a graphic designer, so a lot of this content is also based on his experiences as well.

Motivation

I sued a guy that owed me some money (long story), and then I heard that our government just deployed an fantastic tool to check the status of the legal process… and then I found this jewel:

UI Crap

This made me sad. There are coders who apparently just don’t give a single fuck about their job.

I didn’t use the web application. I just closed the browser tab.

UI is software

Having worked for a long time developing applications for marketing teams, I realized that for people with little to no experience in the technical field, the UI is the software itself. They don’t care if there are database servers, Amazon instances or any other technological component behind. For them, the software is what they see and what they can interact with.

I think that the UI should be treated with the same (or more?) respect as the rest of your software stack. It’s the FIRST LAYER OF YOUR SOFTWARE, give it some respect.

We make software for people

We usually code things intended to be used by humans. A videogame, a corporate website, a blog, even an API are examples of code that will be eventually consumed by human beings, keep that in mind.

Fitt’s law

Here the idea is pretty simple: “Do not put negative actions near to positive actions”. In english that’d be: “Do not put the delete post button, next to the edit post button”, that’ll create stress in the user of your system, because the chances of making a mistake will be high.

Color psychology

This is a very interesting and extensive topic. I didn’t go into a lot of detail here, but you should be aware of the basic concepts. Being able to understand why a “delete” button should be “red” instead of “blue” would help a lot.

Tools for rapid prototyping

This one is easy… currently there’s no excuse for a programmer to deploy sometning similar to the example that I mentioned earlier.

When Twitter Bootstrap and Foundation Framework emerged, everything changed. Those frameworks are easily customizable and give you a decent starting point for your project.

Resources

Here are some resources that you might find useful:

Presentation video

Below you’ll find the full talk (in spanish).

Presentation slides

Here are the presentation slides (also in spanish).