Esta vez toca el turno de aprender cuáles son los componentes UI de introducción numérica. Con ellos podremos insertar valores númericos al sistema. Anteriormente ya habíamos hablado de los campos de texto para introducir números de teléfono pero ahora vamos a cómo diseñar los number input y las barras de rango También cuándo y cómo usarlas.
Number Input (Entrada numérica)
La entrada numérica, number input o también conocida como contador o spin button es el componente que permite ajustar un valor numérico.
Entre los sitios más comunes donde encontrarlo seguro que destacan los e-commerces ya que este es el componente que permite añadir o quitar productos del carrito de compra. Del mismo modo, es crucial en sitios de reserva ya que permite aumentar o disminuir la cantidad de personas que reservan el producto.
En los number inputs podremos ajustar el valor independientemente de si lo insertamos directamente en la caja de texto o de si lo hacemos con manejadores. Los manejadores son los botones de al lado para incrementar o disminuir el valor en pequeños pasos que por lo general van en escala de 1.
Además las unidades a aumentar o reducir pueden ser valores numéricos solos o acompañados. Es decir, pueden ser solo la cifra (5) o incluir también el tipo de unidad que representan (px, pt, mm, %). De hecho, en la mayoría de software de diseño podemos encontrar este comportamiento del componente para establecer el tamaño de los objetos. En el componente de entrada numérica vemos que además de poner el número (3), pone la unidad que representa píxeles (3 px) o el tipo de unidad que sea como por ejemplo 125%.
Veamos la versatilidad que nos ofrecen los number inputs con estos ejemplos de Figma y de Airbnb
Barra de rango o slider
La barra de rango es conocida por su nombre en inglés range bar o slider como la llaman en los sistemas de diseño Fluent y Carbon a los cuales puedes acceder desde el directoriux. Esta range bar es esa barra en la que se arrastra un manejador para seleccionar una posición. Es decir, tenemos una indicación visual del contenido ajustable, donde el usuario puede aumentar o disminuir el valor moviendo la manija a lo largo de una barra que puede ser horizontal o vertical.
Esta barra no solo sirve para introducir números absolutos. También vale para introducir porcentajes y como decíamos al hablar del componente de valoraciones es la manera correcta de hacer una valoración que acepte decimales. Además, este componente es el más común para manejar distancias en una interfaz gráfica.
La barra de rango vertical se asocia mucho con tamaños verticales. Por eso, a veces se puede encontrar para establecer alturas o para establecer el volumen.
Características de la barra de rango
Un par de características clave y tal vez obvias de la range bar son:
- El rango no acepta valores negativos. Si queremos permitir que el usuario ponga un valor negativo, debemos usar otras opciones como por ejemplo el spin button
- El rango debe tener un mínimo y un máximo. Si no queremos tener este tope por arriba o por abajo, deberemos usar un number input en vez de una barra de rango
- No valen tamaños locos. Al igual que con los valores negativos, no se deben permitir tamaños excesivamente separados entre el mínimo y el máximo. Para ello pondremos el number input
- Sí se permite que la escala sea diferente de la unidad. Es decir, no hace falta que cada posición en la barra se mueva de 1 en 1, perfectamente puede ir de 5 en 5, 100 en 100 o 0.1 en 0.1. Pero cuidado con el siguiente punto
- La escala debe ser correcta para que la experiencia sea buena. No podemos poner un rango de 0 a 1000 y que la barra funcione de 1 en 1 ni podemos poner un rango de 1 a 2 y que la escala funcione de 1 en 1. Para el primer caso tendría sentido que la escala funcionara de 100 en 100 y para el segundo caso que funcionara de 0.1 en 0.1 o incluso 0.05
Funciones del slider
Las range sliders puede tener dos funciones. Introducir datos al sistema y filtrarlos
Cuando la barra de rango sirve para introducir datos, solo tiene un manejador para poner la cantidad exacta seleccionada. En este caso el mínimo y el máximo quedan fijos y son invariables. Por tanto, lo que elijamos, será un valor entre esos dos puntos. A esta barra de un manejador le llaman basic slider.
Por otra parte, la barra de rango puede servir para filtrar. En ese caso de nuevo podemos tener el basic slider o tendremos también dos manejadores que crearán un nuevo mínimo y máximo dentro del mínimo y máximo principal. Así es como se filtran por ejemplo distancias en apps de compra-venta. A esta barra de dos manejadores le llaman ranged slider.
Formato de la barra de rango
La range bar debe contener estos 4 elementos: el input, formado por la barra o espacio para moverse y el manejador, la etiqueta de mínimo, la etiqueta de máximo, la etiqueta o etiquetas de posición que muchas veces reemplazan a las etiquetas de máximo y mínimo.
Finalmente déjame comentarte algunas buenas prácticas de cara a la accesibilidad.
Una recomendación es añadir un number input donde escribir el valor de forma rápida. Además, esta caja debe adaptar el valor introducido al formato dado. Por ejemplo, si el formato acepta dos decimales y el usuario solo pone un número, el sistema debe corregir el formato de la entrada.
Otra recomendación es permitir el movimiento con las flechas del teclado de forma que ↑ y → aumenten el valor de unidad en unidad y por contra ↓ y ← bajen ese valor. Además, dar alternativas como que con shift ⇧ más esas flechas el movimiento sea el doble o 5 veces más rápido. También una opción extra a esto es añadir controladores en pantalla como vemos que hace idealista al pasar el ratón sobre el componente.
