UI / UX for software developers
I would like to start with a very popular saying:
“Love enters through the eyes”
Many times we forget the aesthetic part or make it less important during the development of a project when, in reality, it should be the beginning.
In technological development, before starting to build an application or a page, you must first have a wireframe, which would ideally be a high fidelity one, but this is not always possible, so a low or medium-fidelity also works.
You can build better wireframes by knowing some techniques and principles of general and interface design.
Gestalt Principles
Let’s get started with Gestalt Principles, a psychological current that explains how human beings perceive their environment.
There are six individual principles commonly associated with Gestalt theory.
Similarity
It tends to group elements that are similar even though they are not together. These are related by shape, size, and color.
Proximity
The law of proximity says that we tend to perceive nearby objects as one within the same group.
Continuity
The elements oriented in the same direction tend to be organized, so the projected information is visually connected.
Law of inclusivity or background-figure
We designate the approaches in a visually hierarchical way: show the figure/background elements where one can distinguish one from the other.
Closure
The brain usually associates disconnected elements with known shapes. If the figure is not entirely closed, the brain will fill it in automatically.
How nowports implements some of those design principles on our landing page
These principles help communicate what we want to, but what about the user experience? The user experience of a product must be accessible, intuitive, and add value to keep your users happy.
UX Laws
Making an intuitive platform or application with the user must be guided by the laws of UX.
1. Fitt’s Law
The time it takes to reach a target depends on the distance and size of the target.
If you have a form, you must place the submit button near it to indicate the call to action to the user.
2. Hick’s Law
The more options the user has, the more complex it is to decide, then it is not necessary to give the user so many options.
3. Jakov’s law
Users like to use what they already know how to use, not to reinvent grids in UI by altering the order. It serves to standardize UI in the tech industry.
4. Miller’s Law
Studies have shown that the human being can only remember seven elements in the short term (+2, -2); therefore, it is advisable to present the elements of 5, 7, or 9.
Principles of usability
If we are developing a web application, in addition to taking into account the principles of UI and UX laws, the principles of usability and heuristics must also be taken into account.
1. System state visibility
The user should know what is happening in each interaction with the product (loading, saving, errors). You should receive feedback on the status of the product.
2. Product and real-world relationship
The user should have no doubts when interacting with the system. All the information must be provided so that the system can operate.
3. User control and freedom
The user must be able to cancel or exit a process without ending it and without commitments.
4. Consistency
When you design the visual blocks of the system flow, try to carry a pattern in all the elements of the system.
5. Error prevention
Provide clear instructions of what the user is expected to do within our product.
6. Recognize before remembering
Deliver valuable information to the user and provide a way for the user to review when needed without going to their memory.
7. Flexibility and efficiency of use
Deliver an interface capable of satisfying advanced and non-advanced users. Allow the use of the product without the need for specialized knowledge.
8. Aesthetic and minimalist design
Do not saturate the user with content. Show only the relevant content for each view or each action that the user has decided to access. Do not put elements that distract the user from the objective.
9. Help the user to recognize and correct errors
Give information to the user about what is generating errors or inconsistencies in the system.
10. Help and documentation
Detect the most common doubts of users when using our product and provide information that can solve them immediately.
