Forem: Alex Ruiz

The Secret to a Great UI: The Importance of Microinteractions

Alex Ruiz — Tue, 24 Jan 2023 23:07:28 +0000

Today we'll talk about something that may seem small but has a big impact on user experience: microinteractions. Have you ever wondered why one app feels more satisfying than another? Chances are microinteractions have something to do with it.

What are microinteractions?

Microinteractions are small actions that the user performs in an interface, such as clicking a button, swiping a finger on a screen, or viewing a notification. These interactions often have visual or auditory feedback to indicate that the action has been successful.

A microinteraction occurs when, for example, we press the "submit" button on a form, such as loading, and hear a confirmation sound indicating that the message sent successfully.

Why are microinteractions important?

Microinteractions are significant because they help improve the user experience by providing feedback on the user's actions. Without these interactions, the user might not be sure if their action succeeded or failed.

Additionally, can also improve usability by providing visual cues on how to interact with the interface. For example, a button that changes color when the user hovers the mouse over it visually indicates that it is interactive.

When a user acts on an interface, it's important to give them feedback to confirm that their action was successful. That may include confirmation animations, such as a message appearing on the screen or a loading animation, and sounds, such as a beep or chime. This type of feedback helps to improve the user's experience by providing a sense of completion.

5 ways to elevate your UI Design with Microinteractions

1. Show system status

Source: Dribbble.com

One of the usability principles for a good UI Design is to keep the user informed about what is happening. When users trigger an operation, they expect to get an immediate response. But there are situations when an app needs some time to complete an operation. So, the interface should keep the user enlightened about what is happening, this may include a load interaction.

2. Visual cues for interaction

Source: Dribbble.com

Providing visual cues for interaction can significantly improve the usability of an interface. For example, when a user clicks on the "night mode" button, the button changes color to indicate that it's activated. Visual feedback of this type helps the user understand that night mode is enabled.

3. Improving usability with tactile cues

Source: Snappymob.com

Tactile cues can also improve the usability by providing feedback through touch or haptic vibrations. For example, a button growing in size or vibrating when a user touches it indicates that the action has been registered.

4. Use animated feedback

Source: Dribbble.com

Animation can enhance the user experience by providing a fun and engagement feel. For example, when a user completes a task, a checkmark or a tick appears on the screen, making the experience more enjoyable. Using transitions can also help to guide the user through the interface and make it more engaging by providing feedback through movement.

5. Avoid unwanted interactions.

Source: Dribbble.com

When designing microinteractions, we always make sure the visual cues and animations are appropriate. Many designers attempting to make UI more delightful overload UIs, often creates too complex interactions. The later can be seen in the example above— it’s a beautiful but not really valuable interaction.

Other tips to keep in mind

Microinteractions make it easy for users to interact with a system.
Microinteractions should be efficient and not distract or bore the user.
Understanding the user and context improve the effectiveness of microinteractions.
Microinteractions should be able to withstand prolonged use without becoming annoying.

In summary, microinteractions are small but powerful elements of UI design that can significantly improve the user experience. They provide feedback and cues, improving the overall usability of an interface. When designing a user interface, it's critical to include microinteractions and test them with real users to ensure a positive experience.

How to improve accessibility in UI Design: tips and best practices

Alex Ruiz — Fri, 20 Jan 2023 18:28:31 +0000

Imagine trying to navigate a website with a visual impairment. Without accessibility in the user interface design, the letters might be too small to read, the buttons might not have enough contrast, and the navigation might be confusing, which makes it impossible for you to use the website.

Making a website accessible to everyone is important. That means that people with disabilities can also use it without problems. Sometimes,we forget to do this and hinder the user experience. Not only is it the ethical right thing to do, but it also improves the user experience for everyone. On this post I'll tell you how improve accessibility in user interface design with tips and best practices.

Tips and best practices

The following points have a good effect on accessibility for any designer and, at the same time, can improve user retention and satisfaction. Accessible websites are more user-friendly for everyone, which may increase the user's trust in the brand and improve the likelihood that they will revisit the site.

So how can you improve accessibility in UI design? Here are some tips and best practices to help you improve accessibility on your website.

1. Readable text

Ensuring that text is legible is essential for all users to interact with the website. We must use an appropriate font size and a contrasting color palette to make the text easy to read. In addition, I also recommend the use of a clean typography to improve the UX (user experience). Also, we should consider testing the text on different devices and screens to ensure it is readable on all platforms.

2. Buttons with sufficient contrast

Buttons should have sufficient contrast to be easy to see and press, especially for the visually impaired. At this point I advise using a color scheme that provides high visual contrast, such as black on white or white on black. In addition, we must ensure that the size is appropriate and the text is clear and descriptive so the user can easily understand its function.

3. Clear and user-friendly navigation

Another thing to keep in mind when designing with accessibility is to ensure that the navigation is clean and user-friendly, which means providing an intuitive navigation structure and a logical hierarchy of information.

4. Use visible labels.

Labels are a crucial part of forms. They tell users what information is needed for each field. Without labels, it can be hard for users to understand what information is required, leading to frustration and confusion.

It is also important to provide visual feedback. This lets users know when a field is filled in correctly or if there is an error. This will help users find and correct errors quickly, making it easier to complete the form.

5. Web Content Accessibility Guidelines

Finally, I recommend using web standards found in Web Content Accessibility Guidelines (WCAG) and Accessible Rich Internet Applications (ARIA) because they establish best practices for accessible web design. If we follow them, we can help ensure that all users, regardless of their abilities or disabilities, can interact with our website effectively.

In conclusion, accessibility in user interface design is essential to ensure that all users, regardless of their abilities or disabilities, can interact with a website effectively. However, it is also important to remember that accessibility in user interface design can improve the user experience for everyone. By following the tips and best practices mentioned above, you can improve accessibility and provide a satisfying experience for all your users. In addition, it's relevant for compliance with ethical regulations and an opportunity to broaden your audience and improve user retention and satisfaction.

10 usability principles for a good UI Design

Alex Ruiz — Thu, 04 Aug 2022 04:13:00 +0000

For us UI Designers, it's very important to develop interactions that allow the user to have a better experience, so the UI can't be confusing, demanding or cause stress to the visitors.

Therefore, part of our task is to create user journeys that are fluid and intuitive, in such a way that the user doesn't need external help to interact with the product.

In this case to improve as UI Designers, guarantee a good user experience and improve interaction design we will talk about Jakob Nielsen's 10 heuristics that we should always keep in mind.

Jakob Nielsen's heuristics for interaction design

1) Visibility of system status 💻

The system has to inform the users about the current system status and what is going on at all times, by providing them with appropriate feedback within a reasonable time.

This principle is necessary to make the the user capable of deciding which their next steps will be, based on what's happening at that particular moment (anticipation). An advantage of implementing this principle is that the user will end up trusting the product and the brand.

For example: Provide real-time feedback during new account setup and communicate which password requirements the user has been fulfilled as they types, saving their time, energy, and uncertainty during the process.

2) Match between system and the real world 🌎

This principle claims that a system should speak the users' language and follow real-world conventions, this is, they have to be capable of easily understand everything they perceive while interacting with the system.

This means avoiding use words, phrases, and concepts that aren't familiar to our target audience. We should base every concept of the system in real world conventions that are already part of mental models, that is, the system make sense to the users according to their life experiences.

For example: When it comes to using icons and illustrations these resonate with the real world, so users instantly recognize and understand what we're trying to say.

3) User control and freedom 🎮

We should design knowing that the user can always make a mistake, so they have to be provided with emergency exits in case they need to escape or recover from wrongly performed actions.

The interactions we build must give users the freedom to decide and take the actions they see fit and always have to be allowed to correct mistakes and change their minds

For example: Back links that allows the user to go back in a page, screen or view. An option to undo and redo their actions.

4) Consistency and standards 📌

The users when interact with a product have expectations based in their previous experiences with another products.
So that's important that our system follows already established conventions when it comes to user interaction and interface design.

Jakob's Law states:

"People spend most of their time using products that are not yours, so they expect your product works in the way the others do. Failing to fulfill these expectation may result in user’s cognitive overload and force them to learn something new."

For example: When asking users to input information such as dates, phone numbers, or locations, use the industry standards rather than reinventing the wheel.

5) Error prevention ❗

This principle proposes that a good design should always prevent problems from occurring. and in this way we prevent the user from getting frustrated by making mistakes.
When designing, we must prevent the majority of mistakes that users can make when interacting with our system, rather than waiting for them to perform an action that leads to an error to inform them, in this way, the users will feel comfortable with the system by letting them know that if they make a mistake, they can undo the taken action
For example: To prevent the user from getting frustrated if they delete files by mistake, it is essential to create a warning message to confirm the decision before going through.

6) Recognition rather than recall 🧠

The Nielsen’s heuristics aim to reduce users’ cognitive load, and this also includes their memory capacity.

Therefore, the users shouldn't have to memorize lots of information to be able to perform a task within the system, that's why it’s essential to think of ways to make options, elements and actions visible helps them carry out their goals in an intuitive and approachable way.

For example: In a menu of a list of fonts, the user shouldn't remember the style of each one, these styles must always be visible.

7) Flexibility and efficiency of use 💪

Our designs should be prepared for both experienced and novice users.

We must keep in mind that inexperienced users need more detailed information, so our goal should be to create a flexible and efficient system that provides multiple methods to perform the same tasks according to the variety of users who interact with it.

For example: Shortcuts are a good example of this, they help expert users achieve their goals faster without being an obstacle for less-experienced users. While the tutorials are very useful for inexperienced users.

8) Aesthetic and minimalist design ✨

As designers, we never consider aesthetics above functionalities.

The user interfaces that we create must contain only essential information since non-relevant information may take away visibility, overwhelm and distract users. This doesn't mean we're obliged to use a flat design. It's more about keeping design focused and targeted to the point.

9) Help users recognize, diagnose, and recover from errors ⛔

Errors should be presented as clear messages, always straight to the point and be written in an understandable language, so the user can easily be aware of what's going on. These messages should be focused on the real problem and provide or recommend a possible solution to the issue.

In the next example, the error message is clear and understandable to users.

10) Help and documentation 📁

The last of Nielsen’s heuristics concerns documentation that will help users understand how to perform their tasks.

Although all the heuristics listed above are supposed to help users avoid errors and facilitate navigation without assistance, it is still essential to provide further assistance at any time.

In this way, we must deliver help documentation that is easy to search and focused on the user's tasks. A good practice is to list the concrete steps that users can take to complete a task successfully.

Thank you very much for reading and I hope you found this article useful and I see you in the next post👋

10 awesome and useful JAVASCRIPT TRICKS and TIPS. Part 1

Alex Ruiz — Sun, 20 Feb 2022 21:14:48 +0000

JavaScript is over 20 years old and over time it has grown and evolved, constantly implementing improvements. It's a multi-paradigm language as it supports functional, imperative, and event-driven programming. As if that wasn't enough, it has an API for working with text, data structures, the DOM, and more.
In this post I collect 5 tips and tricks to get the most out of Javascript.

1. JavaScript Type Conversion

There are different ways to convert any data into the data type of your choice. In the following example I will explain how to convert to numeric, boolean and string.

Convert to number

Numeric data can be of two types: integer(int) and float(float), also known as decimal. To convert any data into an integer you have several options, one of them is to use the parseInt() and parseFloat() methods, depending on whether you want to work with integers or floats.

This is the traditional way and it works very well. However, there is a faster option to achieve the same result, which is to prepend the unary operator+to the data you want to convert.

There is a third way to convert numbers within JavaScript and that is by using the Number() object's constructor.

Ready! With these three simple tricks you can convert a data of any type to a number.

Convert to boolean

If you want to convert any data to boolean, JavaScript offers two options. The first is to use the object's Boolean() constructor and the second is to make use of the !! operator, also known as the Double Bang Operator.

Convert to string

To finish the tricks of converting one data into another, there are two options with which you can transform a number into a string. The first is with the constructor of the String() object, and the second is to concatenate the data to an empty string.

2. String interpolation

String interpolation is concatenating text with other text or variables. Previously, multiple unary + operators were used to concatenate each desired value, resulting in code like the following:
It is quite a difficult code to write and read. Therefore, it is recommended that you avoid concatenating in this way. Currently, there is a clearer option to achieve the same result and it is through string template literals.

3. Ternary operator

Did you know that a simple if-else can be summed up in a single line of code? This is made possible by the ternary operator, which can be viewed as a concise if.

The code is simpler and easier to read, although you should take into account the following considerations:

A variable with the condition to evaluate is needed.

What is after the operator ? evaluates if the condition is true.

What is after the operator : evaluates if the condition is false, just like the else statement.

The operator : it is necessary to write it even if it is not needed, if it is not needed it is used to return a null.

4. Short circuit operators

Continuing with the topic of if and ternaries we have the short-circuit operators, which are && and ||. These operators evaluate conditions more efficiently.

Operator &&

The && operator acts like a simple if, that is, without an else. Which means that it is executed if and only if the condition evaluates to true, otherwise it ignores the code.

Operator ||

The operator ||, unlike the previous one, is executed only if the condition to be evaluated returns false, nullor undefined.

5. Operator nullish

I know that you have just read the title of this section and you are probably thinking, what is the nullishoperator? Well, this operator is ?? and it helps to exclusively validate if the value is nullor undefined.

This operator is not as widely used, but it is quite useful to know about its existence.

Soon the second part will be ready with another 5 tips on javascript so you can get the most out of Javascript

10 best plugins to create websites in ATOM

Alex Ruiz — Wed, 29 Dec 2021 18:14:29 +0000

For us developers, it´s very important to find the perfect code editor or IDE because it´s our main work tool. Although there are many editors, whether open source or paid, the best known are Sublime Text, Eclipse, Netbeans or Atom.
In this case we are going to talk about Atom, the one that I currently use and despite not being the most complete, it has a multitude of plugins to customize it and make our work easier.

These are the 10 best plugins that every developer should have installed in Atom
1) Atom Live Server

Atom Live server is one of my favorite packages because it allows us to view the changes to our website, just by saving the document in atom, without having to reload the page, all this makes live server save you a lot of time. You can dowload here

2) Minimap

Surely many times you have quite long files.
With minimap you can see a map of the file content on the right side of the code. In this way, it will be easier for you to navigate in the code, see if at some point you are higher or lower in the file and thus never miss anything. You can download here

3) Enmet
Although some may know it by its old name (Zen Code), Emmett has become an essential plugin. If we had to choose the first plugin to install, it would possibly be this. With Emmet you save a lot of time writing code, as you can use abbreviations for labels or create classes simply by typing for a paragraph and pressing Tab. In this case we would obtain a paragraph with the class "paragraph". We can also save ourselves writing everything necessary to make a new HTML page by typing in the html: 5 editor and pressing tab. You can download here

4) Double Tag

This package allows you to modify the HTML tags in a simple way because it automatically closes the tags of our code. You can download here

5) Atom Bootstrap

This is a great package for atom, which can save you a lot of time when you start designing with Boostrap because it provides us with quite a few snippets that will save us hours when developing it with Bootstrap. You can download here

6) Higlight Selected

This package adds a functionality that (surprisingly) is not included by default in the core of Atom. Just double-click a word in the editor and then Atom will highlight that word and any other occurrences in the rest of the file.
If you’re a developer, it’s great to install it and see where variables or functions appear in the code. You can download here

7) Atom Beautify

This package will make your files look more beautiful and more readable as it is responsible for controlling that the indentation is correct. That is, it checks that the lines of code are well ordered and start at the proper place. It is especially useful for following style guides in files that have multiple nested loops or functions that call other functions inside. It also supports most of the languages you can use today to code. You can download here

8) Linter
As a frontend developer, I love when the code editor is smarter than me and highlights the mistakes I'm making while programming the code. In Atom this is possible with linter. It is a package that adds error control and display in the editor itself. And although it does not detect everything, it helps me a lot. You can download here

In addition to this basic linter package, my installation also includes the following linter extensions for Atom:

linter-alex: controls that you write better. That’s useful in your comments.
linter-csslint: error detection in CSS files.
linter-jscs: error detection in JavaScript files.
linter-write-good: error detection when you’re writing English texts.
minimap-linter: highlights linter-detected errors in the minimap.

9) File Icons

This simple package adds icons and colors to the files that we have in Atom according to their specific file type so that it is easier to identify them.
At a glance you will know the type of file in front of you. It seems silly, but once you try it you can not stop using it. You can download here

10) Pigments

Pigments is a specific plugin to work with CSS. With this tool you can see the color that you are entering in CSS, and by being able to modify it on the fly, you can see how it changes and choose the one you want, without having to constantly see how it looks on the web. You can download here

Bonus
Color Picker

With this last package on the list, you can easily select the color you want to include in your CSS style. Just press CMD-SHIFT-C / CTRL-ALT-C to open a color picker where you can visually choose the color that best suits your needs. It is the best companion of the previous package. You can download here