Conoce los elementos de control de entrada imprescindibles para tus diseños de interfaz
El diseño de interfaz de usuario tiene varios propósitos, el más importante de ellos, la interacción fluida dentro la aplicación o página web. Sin interacción, una interfaz es simplemente un diseño unidimensional.
Las interacciones en una interfaz son diseñadas de manera reconocible por los modelos mentales de los usuarios. Es por eso que los botones se parecen a botones físicos en máquinas y aparatos táctiles.
Hoy veremos los controles de entrada más esenciales y cómo podrás mejorar la experiencia de usuario con ajustes especiales y de mejor usabilidad.
Botones / buttons
Los botones son los elementos más comunes de interacción y control de entrada en todos los diseños de interfaz. Existen tres categorías base para los botones; formal, semiformal e informal. ¿Cuál es la característica que los diferencia? La redondez de las esquinas.
Naturalmente, las personas están atraídas a las curvas porque son más fáciles de asimilar cognitivamente. Las equinas se sienten más serias. Utilizamos estos aspectos psicológicos de las formas y los aplicamos a los botones de acuerdo a nuestro público objetivo. Esta técnica la puedes aplicar a todos los controles de entrada en este artículo.
¿Qué sucede cuando aprietas un botón físico en algún aparato? El estado del botón cambia; quizás se hunde y se mantiene hundido o se hunde y luego se enciende una luz, o de repente emite algún sonido y tiene una sensación de rebote. El botón digital es reminiscente de un botón físico, entonces se le debe aportar estados de cambio y de permanencia con hápticas para los sentidos.
Y no olvides, debes diseñar no solo un botón, sino tres. Un botón principal para todas las interacciones importantes en una interfaz. Luego el botón secundario para usar en formularios o controles de guardar/cancelar. Finalmente, necesitas un botón terciario para interacciones mínimas y menos importantes.
Casillas de verificación / checkboxes
Las casillas de verificación son las que el usuario debe hacer clic para marcar opciones y respuestas. Ellas pueden ser o de elección única, como en un examen, o de elección plural en una encuesta. Escribe la pregunta en singular o plural, así el usuario sabrá cómo elegir las opciones en su respuesta.
Al crear los diseños de casillas en tu proyecto recuerda que el espacio de clic es pequeño. Mejora la accesibilidad de la casilla empleando clic en el texto descriptivo de cada opción. Añade un estado a la suspensión de cursor sobre las palabras, cambiando el color sutilmente y así confirmando la posibilidad de clic.
Uno de los usos más comunes de una interfaz con checkboxes es el del diseño de formularios con muchas preguntas. Crea separaciones con categorías claras usando texto de un color más oscuro y de mayor tamaño.
https://www.flaticon.com/packs/search?word=checkbox&order_by=4
Mejora la calidad de la experiencia añadiendo color y/o un contador de clics. Cuando una casilla está seleccionada, que cambie de color y se mantenga así, al menos que el usuario lo retorne a su defecto. Añade a un contador informando cuántas casillas han sido seleccionadas o cuantas categorías/páginas existen en el formulario entero.
Interruptores de palanca / toggles
Los interruptores de tu casa son los que inspiraron los toggles en los diseños digitales. Un botón con dos opciones de posición que cambian el estado de algún aparato; en nuestras casas, la electricidad. Los interruptores de palanca digitales tienen la misma función, de encender y apagar.
Este control de entrada ha evolucionado a usarse como un sí o un no para cualquier pregunta. Es ideal para las preferencias de sistema en alguna app o un programa donde se puede elegir el estado prendido o apagado de funciones de usabilidad.
Este control visual—como todos en esta lista-depende de estados de cambio obvios usando color, elementos significativos y cambios de tamaño. Considera añadir visuales que significan sí y no, como un check y una equis.
Listas plegables / dropdown lists
La mayoría de los menús digitales que navegamos día a día incluyen listas despegables. Son imprescindibles. ¿Y qué decir de los mega menú con muchísimas despegables?
Los estados de abrir y cerrar de las listas no pueden confundir ni complicar. Los estados de suspensión al mover el mouse deben ser sutiles. Disminuye acciones de suspensión, añadiéndolas sólo a las categorías más altas del menú.
Las listas desplegables mayormente son enlaces de navegación en una página web. Los clics y suspensiones deben estar ligadas a las interacciones. Cuando una lista se abre, la anterior se cierra sin crear niveles de interfaz innecesarios.
Controles deslizantes / sliders
Finalmente, los controles deslizantes. Los usamos en editores de video, programas de redacción, y ajustes en plataformas con ventanas de preferencias y edición. Desde las más pequeñas en controles de brillo de pantalla hasta las infinitas en textos larguísimos o videos en proceso de edición.
Los controles deslizantes, como los botones, tiene cualidades serias o juguetones dependiendo de la curva de sus esquinas. La combinación de colores entre el botón y el área deslizable avisan al usuario la posición de scroll en la interfaz. El clic en los controles deslizando es de arrastre, y debe haber una háptica que muestre la suspensión correcta del mouse sobre el botón movible.
Crea elementos UI de control de entrada con Flaticon
En Flaticon tienes acceso a iconos representativos de botones y muchos otros controles de entrada. ¿Pero sabías que también son elementos UI? Descarga el icono en formato SVG y añádelo a tu diseño en Figma. Con los controles de edición vectorial, transforma el icono a las dimensiones que necesitas y luego añade animaciones para demostrar su función.
Utiliza los iconos ilustrativos para interfaz que te ofrece Flaticon en todas tus maquetas y wireframes. Ahorra tiempo en la creación de prototipos usando elementos UI editables en formato SVG. Con una subscripción Premium tienes acceso a todos los iconos licenciados personal y comercialmente.
