Diseñando Formularios: los botones - Excelencia en UX

Diseñando Formularios: los botones El formulario es el rey de la interacción: la mayoría absoluta de las situaciones en las que un usuario tiene que establecer un diálogo de ida y vuelta con una aplicación o sitio Web, lo hace a través de un formulario. Un formulario entra en la categoría de conceptos fáciles de reconocer y difíciles de definir, como mesa, por poner otro ejemplo. Podemos decir que cualquier conjunto de campos o elementos de la pantalla que aceptan datos del usuario y que tienen efecto en la aplicación, componen un formulario. Lo más frecuente es que la información ingresada en un formulario tenga efecto cuando se clickea un botón. También puede actuar con solo ingresarla, como cuando se cambia el volumen del reproductor de audio, pero esto último no es lo más frecuente. Los formularios modernos tienen múltiples botones que actúan sobre grupos distintos de campos y generan efectos diversos. Es una tarea del diseñador transmitir al usuario, en lo posible a nivel Miro y Entiendo, la información necesaria para poder evaluar los resultados antes de clickearlos.   El proceso de pago de una transacción en Amazon muestra múltiples botones de naturaleza y jerarquía distinta Revisaremos a continuación los lineamientos fundamentales para el correcto diseño de los botones de un formulario. Botones de acción Denominamos botones de acción a los botones principales del formulario, los que disparan la acción central por la que el propio formulario existe: si es un carro de compras: el botón comprar, si es correo electrónico: el botón enviar. Es radicalmente distinto el enfoque del botón de acción en la Web, en el escritorio y en el móvil.   El botón de acción principal está destacado a nivel Miro y Entiendo, y orientado hacia el futuro. Los botones de menor jerarquía se complementan correctamente con él. En las interfaces de escritorio, todos los botones se muestran con la misma jerarquía, y si bien el estándar, al menos en Windows, es que el botón más relevante va a la izquierda, este criterio ni siquiera es respetado a cabalidad por el propio sistema operativo. En el escritorio, todos los botones tienen la misma jerarquía visual. En el móvil, si bien hay algunos botones especiales, como el de crear elemento en Android, en general a nivel de estilo el botón de acción principal no tiene ningún tratamiento especial y muchas veces ni siquiera el destaque que se podría pensar que merece. Probablemente esta sea una de las pautas para analizar cuando haga su propio diseño. Tanto en el iPhone con en Android, el botón enviar no tiene ningún destaque o tratamiento especial, parece incluso que su jerarquía visual no es acorde a la relevancia de la función que cumple. Los botones secundarios Los botones secundarios son aquellos botones que tienen una función sobre todo el formulario, pero que no hacen avanzar el flujo sino que disparan una acción distinta, como cancelar, retroceder o posponer. En escritorio y en las Apps móviles tienen el mismo aspecto y la misma jerarquía que el botón de acción, pero en la Web es muy relevante que sean visualmente menos importantes. Los errores en la jerarquía hacen que los usuarios los clickeen inadvertidamente, algo que se puede apreciar con facilidad en los test con usuarios o en los análisis estadísticos. Otros botones En un formulario moderno hay múltiples botones, como lo ilustra más arriba el ejemplo de Amazon. Para estos botones complementarios, es importante cumplir con las siguientes pautas: Agrupación: el botón debe estar agrupado visualmente con los campos sobre los que actúa, de modo que el usuario perciba sin pensar que campos serán tomados en cuenta al hacer click. Jerarquía: su relevancia visual debe reflejar su importancia y la probabilidad de ser necesarios. Interponer botones visualmente notorios pero poco relevantes hará que los usuarios se equivoquen. Mostrar si mantienen al usuario dentro del diálogo, es decir, deben intentar dar pistas de si al clickearlos se sale de la página / diálogo o si se mantiene en ella. Etiquetas de los botones Se podrían decir muchas cosas sobre las etiquetas de los botones, pero casi todas pueden abreviarse en una regla muy sencilla: cuanto más útil es la etiqueta para cualquier otro formulario, menos útil es para éste. Por ejemplo, las etiquetas "Guardar" o "Enviar" son de utilidad casi universal, por lo que son siempre una oportunidad de mejora. "Guardar sus datos personales", "Enviar la solicitud" son etiquetas mejores que las genéricas. No tenga temor a tener botones grandes con etiquetas largas, en particular en la Web donde el uso de única vez es mucho más probable que en una App móvil o una aplicación de escritorio.   ONLINE Curso de Psicología Cognitiva y experiencia de Usuario Una oportunidad única de dar un salto en su formación como diseñador de experiencias de Usuario. Próximo comienzo 11 de setiembre - Cupos limitados Ver programa y detalles

 

No quiero recibir información sobre cursos de Concreta

 

Concreta, Soriano 903 of 501, Montevideo, Montevideo, 11100, Uruguay, concreta.com.uy