Select boxes are used on websites and applications to provide the user with a simple interface to make choices. It depends on their functionality and appearance, whether the visitor wants to use the product or closes and deletes it. Let’s figure out how professional UI design agencies create stunning, select boxes.
Types of select boxes
A select box looks like a list of boxes with icons. By moving the cursor or by clicking on the icon, you can change the parameters in the desired direction. There are the following types of select boxes:
- Checkboxes. They allow you to select several parameters at once from a number of the proposed ones.
- Radio buttons. These select boxes work like car radios - while one key is pressed, the other is in an off position. Radio buttons make it possible to select one the only option out of several suggested. To change your solution, you need to press another key.
- Toggle switches. They work on the principle of buttons. There are two provisions for
- Switch select boxes (on and off). A user-accepted solution takes effect immediately after the key is pressed.
- Choice chips – select boxes that work like radio buttons but more compact.
- Multi-select chips – a compact version of flags. More often used on mobile devices.
Since presenting a user’s choice has been around for as long as the Internet, people have expectations about how they should interact with select boxes. A skillful design saves time for the visitor and gives them the ability to effectively solve the problem, leaving a pleasurable feeling from the product.
What you need to pay attention to
For the convenience of users, you need to take care that the checkboxes or radio buttons that have the following states:
- enabled;
- disabled;
- with a hovering cursor;
- focused;
- with the cursor pressed.
Don’t forget the indeterminate state. The select box is in it as long as the user paid attention to it. Better stick to precise rules of building select menus. You do not want to distract the user and create a significant cognitive load on the user and the false impression that everything child special boxes are involved if the main one is enabled.
If you want the decision to take effect immediately, you need a switch. The select box style should correspond to the user’s ideas about it – a square or a circle with a checkmark inside looks better than other signs.
It is desirable to align select boxes to the left if they are assumed to be used from a stationary device. This arrangement of buttons promotes fast and productive interaction with the site or application. If the product will be used on mobile devices, it is better to equal right-aligned select boxes. All controls must be visible, open for finger or cursor movement. If the vertical space is a problem for the product, then choosing packages should be placed horizontally, one behind to others.
If there are few choices, 1 – 4, then it is better to use radio buttons. This gives the user can quickly evaluate them and choose the most suitable element. With a large number of options, from 5, a drop-down list is helpful. It must be simple and easy to read so that a person can
navigate and press the desired button.
All buttons must be clickable – when you hover over them, the field with select boxes should be highlighted. This is how a person understands that the system reacts to his requests. You can focus the halo around the element.
Conclusion
It would help if you did not forget that the client may make the wrong choice or wants to change the decision. Clearing the field and evolving flags should be easy and convenient, primarily if the product is used on mobile devices. Areas to click are made large so that a finger gets there and does not touch other elements. If not all the necessary parts are pressed, then the inscription ”incomplete” should be displayed, which indicates an error and gives feedback to the client only after the correct filling out the form.
