Happy users: front-end developer and UX designer
Written by Valeria Roldán and Mariví Rubio
The job of a front-end developer is to create applications that are displayed in the web browser. How it intervenes greatly in the development of the interface with which the user interacts, so the performance of the application is paramount.
As a front-end developer, your duty regarding this component is crucial, built with maintainability, scalability and performance.
In some companies there is a profile of the User Experience Designer (UX), increasingly in demand and who is in charge of giving the interface the usability and the appropriate aspect to solve the needs of the user, achieving the highest satisfaction and the best user experience possible with minimum effort.
However, in the start-ups that do not yet have a lot of staff or in small projects, the work of the UX designer is in the hands of the front-end developer.
This must take into account that psychology and usability are complementary to JavaScript. It is true that as front-end you can stop at the level of the code, but it is much more fun and beneficial to go further. You will acquire more skills and from time to time it is good to be on the user’s side when it comes to solving the problems that the development presents.
For a front-end developer unfamiliar with design, there are certain tools that can facilitate the task of making up for the lack of a UX designer in the project.
Among them are the UX laws that are a collection of maxims and principles that designers can take into account to build user interfaces.
It was created by Jon Yablonski, Design Lead at Vectorform, creator of the Web Field Manual, and contributor to Storytelling.design.
Some of these laws are:
- Proximity Law
This law teaches us that the elements that are close to each other tend to be perceived as a whole, as a unit.
Therefore, when designing an app or a web page, it is important to group the elements that are related.
- Law of similarity or similarity
This law is similar to the previous one, but visual elements come into play such as shape, color, size, orientation, etc. In this way, the design elements that share color, shape, size, etc. will tend to be perceived as a unit, as a whole.
- Law of closing
This law says that closed and finished forms are more stable. That’s why when we perceive an unfinished form, our brain tends to complete it in order to achieve an optimal organization.
When it comes to designing an app or web, we must not lose sight of the fact that an open form causes discomfort and an effort on the part of the user who will tend to complete that form. Within the UX design you can close the shapes that are used, using figures with background color. Using lines can overload the design and so, the color will act as lines completing the figure in question.
- Law of contrast
For there to be perception, there has to be contrast. If there is no minimum contrast between the figure and the background, there will be no clarity. It seems obvious but it is not, since in many presentations and web pages there are usually fragments of texts about images that can hardly be read.
Applying it to the UX design, the contrast is used to highlight those elements that have a higher priority than the rest. Of course, always ensuring readability.
- Fitts Law
Based on the maxim of psychologist Paul Fitts in 1954, which determines that ‘The time necessary to achieve the objective is a function of the size and distance that must be traveled to it.’
The application of this law is clearly seen in the design of buttons that, for example, have to be larger in mobile devices to make it easier to interact with them.
- Hick’s Law
This law refers to the time it takes to adopt a decision, which increases as the number of options increases. So the time it takes a user to make a decision increases the more options you have.
- Law of Prägnanz
Or simplicity, which states that users perceive complex forms in the simplest way because it is the interpretation that requires less cognitive effort.
- Miller’s Law
Part of the communication theory of George Miller, which says that people can remember up to 7 different elements in their working memory. That is why the menus of options and navigation in a web page more or less are based on this size.
- Tesler’s Law
Also known as ‘conservation of complexity’, by Larry Tesler. It establishes that for any system there is a certain complexity that can not be reduced to the maximum.
- Von Restorff Effect
This principle, also known as the ‘isolation effect’, predicts that when there are several objectives, the one that differs from the rest will always be remembered.
This applies, for example, to the button to make the purchase on a website.
There are many more principles, tools and guidelines when designing the UX of a website, but assimilating these laws is a good start to get into the complex world of UX and to see how it is part of of the world around us and that is not exclusive to the digital world.
Finally, stay focused on the user. The main job whether you are a developer, UX designer (or both) is to solve the needs of the users. Focus and think “who is the user ?, how do you think?”, What do you need?” And thousands of other questions. And do not forget, the UX design skills are crucial for a front-end developer. To improve your professional career, become an independent professional, or if you are in a big company, understanding what is possible or impossible to create and evaluate the effort required for development, is crucial. At least, you should understand what is under the car hood of the UX, without having to become an expert mechanic. Or become an expert…why not?
