Diseñar un input para introducir valores numéricos puede ser realmente complicado si pensamos en la usabilidad, la experiencia de usuario y la interacción. Cuando diseñamos formularios, en ocasiones, para dispositivos móviles el espacio limitado en la pantalla y el coste de interacción puede dificultar que los usuarios lo completen.
Objetivo principal de un Number Input o Input Steppers
Un input para introducir valores numéricos permite a los usuarios ingresar valores numéricos de manera precisa y eficiente. Se utilizan en una amplia variedad de interfaces, como formularios, aplicaciones de comercio electrónico, configuraciones de software y más.
La entrada de números permite a los usuarios ingresar un valor numérico y aumentar o disminuir incrementalmente el valor con un control de dos segmentos.
Las entradas numéricas son similares a las entradas de texto, pero se utilizan para especificar sólo un valor numérico. Las entradas numéricas aumentan o disminuyen incrementalmente el valor con un control de dos segmentos. La entrada de números reduce los esfuerzos cognitivos para ajustar valores pequeños.
Los objetivos principales del componente «Number Input»
- Facilitar la entrada precisa de valores numéricos: El diseño del componente debe evitar errores de escritura y facilitar la introducción de valores numéricos con diferentes formatos (por ejemplo, decimales, enteros, con o sin unidades).
- Mejorar la legibilidad y la comprensión: La tipografía, el contraste y la alineación del componente deben ser claros y fáciles de leer para que los usuarios comprendan el valor ingresado.
- Optimizar la experiencia del usuario: El componente debe ser intuitivo y fácil de usar, con una interacción fluida y sin errores.
- Mantener la consistencia visual: El diseño del componente debe ser consistente con el sistema de diseño general de la interfaz para garantizar una experiencia de usuario homogénea.
Para lograr estos objetivos, el componente «Number Input» debe tener las siguientes características:
- Campo de texto: Un campo de texto donde el usuario puede escribir el valor numérico.
- Formato de entrada: El componente debe permitir la configuración del formato de entrada (por ejemplo, decimales, enteros, con o sin unidades).
- Validación de datos: El componente debe validar el valor ingresado para evitar errores y mostrar mensajes de ayuda o error si es necesario.
- Interactividad: El componente debe permitir al usuario aumentar o disminuir el valor numérico mediante botones o flechas.
- Accesibilidad: El componente debe ser accesible para usuarios con diferentes discapacidades, incluyendo lectores de pantalla.
Además de las características mencionadas anteriormente, el componente «Number Input» puede tener otras funcionalidades adicionales, como:
- Botones de limpieza y eliminación: para permitir al usuario eliminar el valor ingresado o empezar de nuevo.
- Límite de valores: para establecer un rango de valores válidos que el usuario puede ingresar.
- Mensajes de ayuda contextual: para proporcionar información y asistencia al usuario durante el proceso de entrada.
Beneficios de usar Inputs con valores numéricos
En ocasiones la entrada de valores numéricos puede ser tediosa. Un ejemplo, es en dispositivos móviles. El uso del teclado puede ser complicado y un input con dos segmentos para aumentar o reducir valores puede ser realmente útil.
Cuándo usar los Inputs para introducir números:
- El usuario debe ingresar un valor numérico.
- Ajustar valores pequeños al aumentarlos o disminuirlos requiere solo unos pocos clics.
- Cuando es posible que los usuarios no conozcan los valores exactos y solo quieran cambiar los valores relativos a su estado actual.
Ejemplos de uso:
- Formulario de compra: Introducir la cantidad de productos a comprar.
- Formulario de registro: Introducir la fecha de nacimiento.
- Filtros de búsqueda: Introducir un rango de precios.
- Configuración de preferencias: Introducir un valor numérico para una configuración.
Inconvenientes al usar Inputs Steppers
Aunque los controladores de entrada por pasos son una herramienta útil para ingresar números en algunos casos, no son una opción ideal en todos los escenarios. Demasiados clics y toques pueden resultar irritantes. Cuando los usuarios necesitan cambiar un valor de 1 a 30, no es una buena elección.
Cuándo no usarlos:
- Es una buena práctica no utilizar la entrada de números si se esperan grandes cambios en los valores. Por ejemplo, cuando el valor se establece entre 1 y 30, la entrada de números no es una buena opción porque requiere muchos clics para llegar a 30.
- También es mejor evitar el ingreso de números para variables continuas como precios, distancias, longitudes o alturas humanas.
El componente de entrada de números es un elemento fundamental en un sistema de diseño de interfaces. Su objetivo es permitir a los usuarios introducir valores numéricos de forma precisa, eficiente y segura, siguiendo los principios de usabilidad, accesibilidad, seguridad y coherencia visual del sistema.
Créditos
La imagen de cabecera
Stepper
Design Guidelines for Input Steppers
Selection controls: Quantity