Tips for UI

1 advice. Built-in error checking

Displaying a user-made error when filling out a form is ideally invested in the very first step, and not after, as it forces people to do extra work and creates cognitive load for them. As a result, filling out the form can take much longer, because the user gets into a loop of actions that constantly roll back him.

I think everyone has had this when you filled out a huge form, hit the submit button, and got an amazing charge of rage for the whole day.

a. Show built-in validation for input’a. An error shown in context (for example, on the right) can be easily and instantly corrected:

b. Pay attention to the checklist for creating (if necessary) a complex password. For example, it is good to make it interactive. At the moment when you fill in the field, the checkboxes are automatically affixed. They seem to signal that you did everything right, guiding you along this fascinating route:

2 advice. Input fields or input

a. Don’t forget labels. When designing input fields, do not leave the user without a hint, at the moment when he has already entered data into the input. Be sure to leave the user the opportunity to return and not forget which field he worked with:

b. Add the ability to quickly erase data. For example, if the user made a mistake, and a painfully large number of characters was entered:

With. Automatic transition to the next input field when the user has entered the required number of characters:

3 advice. State of the system

For proper communication with the user, the system must always report its current state. Pay attention to your digital watch, because they show notifications, and how much charge is left, and signs in the subway tell you which station you are at, instant messengers signal how many unread messages, and so on.

Well, every time when interacting with your product, the user expects to know whether the action was successful, or simply to find out whether it was at all. Informing the user about the current status allows them to go in the right direction without spending their efforts, where the interface, as it were, bears this burden on itself, freeing up a couple of kilobytes of memory in the user’s head for more pleasant things.

a. Changing the color of a button when clicked, or a loading indicator for a particular process:

b. Voice interfaces display an animation ring to indicate that they are listening to the user:

With. E-commerce demonstrates the absence of a product if it is over, and thereby saving the client from wasting time, as well as stopping the growth of distrust in the service:

d. Products that were previously added to favorites do not disappear without the consent of the user, but remain with a special mark (for example: Out of stock). Therefore, it would be nice to add a notification that there have been some changes in the favorites section:

e. Certain restrictions may apply to payment services.
Therefore, it is necessary to demonstrate to the user in advance that the service does not support any type of payment. Do not hide information from the user! This carelessness is very much felt at the slightest interaction with such a service that it is not even necessary to conduct research. So that the user does not have to do unnecessary actions or feel angry about wasted time – be open with him:

4 advice. Drop-down lists in numerical values ​​and dates

Let’s define what type of dates to show in different contexts.

a. Imagine that we need to fill in the date of our birthday and a smart calendar opens for us. This is a very unfortunate decision, since this type of date is already known in advance, and we do not plan it, because our birthday is a completely different data type, it is definitely a string, like a series and a passport number, or a phone number. Our task is to let the user share a memory, and not let him play another interface:

b. When choosing a meeting date or planning your trip, it’s best to use the drop-down calendar. This is just the type of date, which is not known in advance either to us or (often happens) to the user. Demonstrating calendar days, the user understands on what day of the week, month, year he will be able to pick up a ticket, check in, etc.:

With. By choosing a value between 1 and 15 you might be tempted to use a dropdown, but it would be better to make filling in the data quick and easy using a stepper:

d. If your list of numbers is quite impressive, for example the price range is from 1,000 to 90,000 – use button range:

That’s all! I hope it was helpful for you to refresh your memory (or study) this, and I will return to the topic of more advanced tips a bit later. Bye 👀