Spanish (Español) translation by Marina Cardone (you can also view the original English article)
Echemos un vistazo a las asequibilidades en el reino digital, específicamente en cómo tomamos estos principios y los aplicamos en los elementos de UI cotidianos que creamos como botones, campos de formularios, iconos, metáforas y otros elementos visuales.
Asequi-qué?
Asequibilidad son acciones posibles entre un objeto y un individuo. Por ejemplo, el picaporte de una puerta permite un movimiento de rotación. Si el individuo reconoce la posibilidad de esa acción es irrelevante-lo asequible sigue ahí.
Una "asequibilidad percibida" por el otro lado comunica cómo el usuario debe interactuar con ello. El usuario sabrá cuando empujar, tirar, girar y demás. La asequibilidad percibida debe ser la combinación de acciones que son posibles y aquellas que simplemente se perciben como posibles.
Los significantes sugieren al individuo qué acciones son posibles. En varios sentidos, las características de un objeto sugieren las acciones individuales que son posibles. Por ejemplo, la redondez significa que permite girar.
Por qué es importante la asequibilidad?
Quizás parezca de sentido común discutir algo sobre los picaportes porque están tan inmersos en nuestras vidas cotidianas. Pero pensemos en nuevas tecnologías e innovaciones como los ingresos a los autos sin llave. Son un nuevo territorio para muchas personas, lo que implica que los significantes son vitales.Un pequeño botón sobresaliente quizás ofrezca pistas sobre su función.
- Presione una vez para abrir la/s puerta/s del auto.
- Sostenga el botón para cerrar el auto.
En vez de leer el manual, los usuarios buscarán pistas del pasado, productos análogos, para navegar a través de nuestro mundo en constante cambio.
Diseño de Formularios
La asequibilidad es también relevante en el diseño de Interfaces de Usuario. En este artículo rápido discutiré la aplicación en diseño de formularios (campos del formulario, botones, elementos de navegación, etc) con algunos ejemplos relevantes, sugiriendo mejoras mientras avanzo. Ya que no hay propiedades físicas, como en el diseño industrial, a lo que me referiré es a "asequibilidad percibida".
Diseño de "Botones Planos"
Los botones de diseño plano son problemáticos. A menudo se pierden en el diseño, en lugar de ser interpretados como carteles gráficos.
El siguiente formulario de registro (basado en una app que mantendré anónima) muestra un número de elementos.
- Encabezado
- Campos de texto
- Botón CTA Principal
- Botón Secundario
Hay varios elementos diferentes aquí, pero muy poco para diferenciarlos, entonces todos se mezclan. Es un formulario, lo que en sí mismo sugiere que hay botones y campos de texto presentes, pero el usuario puede esforzarse para percibir alguno de ellos como "asequible" de una acción específica.
Mejoras para el CTA Principal
Cómo podemos mejorar el diseño para que los usuarios perciban más rápidamente la directiva de "crear una cuenta"? Puede ayudar el hacer lo siguiente:
- Agregando una pequeña sombra para expresar profundidad y dar una pista de movimiento de "presión". No soy un gran fanático de las sombras y los gradientes, pero hechos en el contexto correcto pueden mejorar la asequibilidad percibida.
- Quizás redondear los bordes y hacer el botón más pequeño para que no se confunda con un banner o un sub encabezado.
- Definitivamente mejorar el contraste. Actualmente el gris claro y las sombras de blanco son difíciles de distinguir entre ellos. Un gris más oscuro resaltaría el botón y llevaría la atención del usuario.
Botón Secundario
Este botón super-minimalista se pierde, los significantes que de otra manera se diferenciarían de los campos de texto (sombras internas en los campos, por ejemplo) no existen. Algunas sugerencias de mejora son las siguientes:
- Redondear las esquinas para significar que es un botón que requiere ser presionado.
- Proximidad: posicionando el botón más cerca a la opción de "crear una cuenta" comunicaría más claramente que se relacionan de alguna manera.
- Etiqueta: en lugar de "ya tengo una cuenta", considera algo más directo como "login" para significar la acción que hará el botón.
Controles de Campos de Texto
Otro ejemplo de formulario, esta vez es para ingresar detalles de envío. Lo asequible de los campos de texto parece apenas visible, sin embargo, pueden tener un impacto considerable.
Algunas sugerencias de mejoras incluyen:
- Considera que el campo de código postal es del mismo tamaño que todos los demás campos. En Australia, el código postal es de cuatro dígitos, en Holanda de seis. En todo caso, los códigos postales son invariablemente más cortos que una línea de dirección, entonces un campo de texto de un tamaño más adecuado hará a los usuarios más cómodos.
- El diseño plano aquí puede ser efectivo, sin embargo puede ser todavía mejor interpretado como una serie de campos de texto si agregamos algo de profundidad. Algunas personas quizás perciban esos campos como banners o botones basado en el diseño de las páginas anteriores.
- Mayor contraste mejorará la legibilidad del formulario en general, sin embargo esto no está directamente conectado con lo asequible.
Conclusión
En este artículo miramos algunos ejemplos de formularios y como sus UI se relacionan a la percepción de lo asequible en diseño de UI. Entendiendo la percepción del usuario te da pistas sobre como diseñar de manera clara e intuitiva. Tu diseño será menos confuso para los usuarios, en lugar los ayudará en completar el viaje en una serie lógica de pasos.
