Centros MEC Rocha, Ministerio de Educación y Cultura
Av. Julio J. Martínez esq. Av. Agraciada, ciudad de Rocha, Uruguay. centrosmecrocha@gmail.com - 44724634 .- Un espacio para intercambiar ideas y compartir nuestras actividades.
Con participación de un equipo docente dedicado a atender las consultas de cada alumno en: clases en vivo, foros de discusión, ejercicios, guías de lectura, etc.
Daniel Mordecki es un reconocido experto en Usabilidad y Experiencia de Usuario, referente en el mundo de habla hispana. Es además docente universitario hace más de 20 años, y conferencista en los eventos más destacados de UX de América Latina. Puede conocerlo en su ya tradicional conferencia en ISA 14.
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.
A mitad del siglo pasado se descubría que todos sabemos contar hasta 4, y que el fenómeno es miro y entiendo. Diseñar con esta idea en mente permite hacer diseños más fáciles de usar.
En 1949, los investigadores E.L. Kaufman, M.W. Lord, T.W. Reese y J. Volkmann publicaron un artículo en el American Journal of Psychology titulado La discriminación visual de las cantidades [1] (The discrimination of visual number) que introducía un concepto completamente nuevo: contar de súbito como un fenómeno distinto de contar y estimar. Crearon un verbo también nuevo en inglés: subitizing, para denominarlo.
Contar de súbito implica la capacidad de apreciar sin errores la cantidad de elementos de un conjunto cuando su tamaño no pasa de 4, y está presente en todos los seres humanos incluidos los niños muy pequeños. Acontece en lo que habitualmente se denomina el espacio pre-perceptivo, un período de entre una décima y un cuarto de segundo que transcurre entre que nuestros sensores detectan un estímulo y nuestra conciencia toma nota de ello. Podemos decir que contar hasta 4 es un fenómento de tipo Miro y Entiendo
Si bien no hay un conocimiento preciso de los fundamentos neurológicos del fenómeno de contar de súbito, los estudios posteriores, que llegan a nuestros días lo asocian a la atención y la cantidad máxima de fenómenos que podemos atender simultáneamente, independientemente de su complejidad interna. Cuatro sería el nivel de saturación, por encima del cual es seguro que nuestra atención más temprano o más tarde comience a cometer omisiones y errores.
Contar de súbito y el diseño de la interacción
Para el diseño de la interacción y todo el ámbito de la experiencia de usuario, la idea de contar de súbito y su relación con los límites de la atención tienen una importancia difícil de sobrestimar: nos proveen una regla para determinar cuándo nos mantenemos dentro del nivel Miro y Entiendo y cuándo salimos de él.
Las opciones son muchas y requieren recordar (pensar) de forma planificada y deliberada para la selección
El hecho de que sean solo 4 opciones permite delimitarlas y procesarlas fácilmente a nivel Miro y Entiendo
Cuando nos enfrentamos a un paquete de estímulos, nuestro cerebro va a intentar agruparlos en la mínima cantidad de grupos, nunca más de 4, para luego jerarquizarlos. Esto ocurre como decíamos más arriba en 1 décima a un cuarto de segundo, antes de tomar conciencia de que estamos percibiendo, por lo que cuando la conciencia entra en acción la información ya está agrupada y jerarquizada. Si el cerebro fracasa en este intento inconsciente, deberá recurrir a herramientas más pesadas de interpretación, lo que complica enormemente la interacción con el contexto que nos rodea.
El uso de elementos gráficos y la ubicación relativa de los contenidos no permite agrupación visual, obligando a disparar mecanismos conscientes y racionales de interpretación, que hacen más difícil y menos agradable la interacción.
Cuando hay más de 4 opciones
Naturalmente, pretender diseños que estén limitados a 4 opciones es un sinsentido. Siempre nos vamos a enfrentar a menús, listas y otros elementos que tienen más de 4 opciones. Con el conocimiento de que van a generar problemas a nivel Miro y Entiendo, aquí van algunas opciones para mejorar la calidad de la interacción.
Agruparlas en hasta 4 grupos, generando pequeñas listas o submenús. No se trata de esconderlas y generar una larga "escalera" de clicks hacia el destino, sino agruparlas en la pantalla en base a algún criterio que resulte obvio y útil para el usuario.
Jerarquizarlas y ordenarlas en base a esa jerarquía, haciendo que las más relevantes sean percibidas antes, y aumente la probabilidad de no necesitar revisar el resto para elegir.
autofoco.com
mercadolibre.com
El sitio de Autofoco coloca en primer lugar las 10 marcas más vendidas, lo que facilita la selección. El sitio de Mercado Libre por su parte utiliza un orden alfabético estricto que obliga al usuario a recorrer una larguísima lista hasta encontrar su marca.
Seleccionar los elementos más probables y destacarlos en el diseño fuera del listado o menú, con accesos directos u otras herramientas de interfaz que permitan al usuario acceder directamente a ellos, sin recorrer el listado de opciones.
El Ministerio de Salud Pública de Uruguay destaca fuera del menú las 3 opciones que son más relevantes para los visitantes
En resumen, podemos confiar en que la selección entre 4 o menos opciones se realizará a nivel Miro y Entiendo. Por encima de esta cantidad, debemos pensar en estrategias que permitan agrupar, jerarquizar y destacar las opciones más probables, de modo de aumentar la facilidad de uso y evitar, en la mayoría de los casos, que los usuarios deban pensar para seleccionar entre más opciones de las que su atención puede manejar en simultáneo.
____
[1] The discrimination of visual Number – Kaufman, E.L.; Lord, M.W.; Reese, T.W. & Volkmann, J. (1949) –
El Mal de Lucas designa un error muy común en el que a nivel miro y entiendo no es posible determinar si un elemento de la pantalla pertenece al grupo que está arriba o abajo de él. Es muy interesante porque su presencia es un potente indicador de otros problemas más graves en la interfaz.
¡Gracias Lucas!
Hace muchos años, mientras en clase mostraba la imagen que se ve aquí abajo, Lucas (no recuerdo el apellido) gritó desencajado:
– ¡Pero no se ve si es el texto es de arriba o de abajo!
Bromeando con los alumnos, bautizamos el problema como Mal de Lucas, y el nombre quedó para designar el error en el que no se sabe si un elemento de la pantalla, muy frecuentemente un texto o un botón, está agrupado con el contenido de arriba o con el de abajo.
Lucas tiene el mismo problema que Ali Babá. Es muy pero muy habitual escuchar "este es mas ladrón que Alí Babá". Error: todos somos más ladrones que Alí Babá porque él era el más honesto entre los honestos, al que perseguían los ladrones que tenían la puerta protegida por la contraseña más conocida del planeta: "ábrete sésamo". Lucas es quien descubrió el mal, no quien lo padece. Salvando las diferencias es como Chagas.
Bromas aparte, es llamativa la ubicuidad del Mal de Lucas, que aparece una y otra vez en las interfaces de sitios y aplicaciones. Es un síntoma bastante poderoso del foco en lo gráfico frente a lo interactivo y un buen predictor de que la interfaz tiene otros errores, tal vez más relevantes.
Agrupando correctamente
Prevenir el Mal de Lucas supone utilizar todos los elementos gráficos disponibles para que la agrupación se realice 100% a nivel miro y entiendo, sin concesiones.
El elemento gráfico más sencillo y potente es el espacio: la mayoría de las veces alcanza con dejar un espacio visiblemente menor con el contenido que queremos agrupar que con el resto, como en el título "Agrupando correctamente" que encabeza este apartado unas líneas más arriba.
A partir de allí comienza el uso de otros elementos gráficos: fondos, lineas o recuadros, la mayoría de las veces muy pero muy sutiles, que le permiten al ojo agrupar instantáneamente, sin que ello implique que el elemento gráfico irrumpa en el primer plano. Es increíble como a veces una línea gris muy clarito, que ni siquiera abarca todo el ancho hace el trabajo con eficiencia y eficacia.
La solución del Mal de Lucas por parte de cuatro tiendas OnLine. Nótese como de izquierda a derecha va empeorando la agrupación, al punto que en el cuarto el botón "Agregar" está más cerca del producto siguiente que del que realmente va a agregar.
La excelencia está en los detalles
La interacción no tiene un punto único de falla, un lugar que debemos encontrar para colocar allí la llave del éxito, dar un par de vueltas y abrir la puerta que conduce a la excelencia. Por el contrario, la excelencia se forma por la acumulación de una miríada de detalles. La capacidad que tenga el equipo de diseño para resolver correctamente todos y cada uno de los detalles es lo que hace la diferencia entre una interfaz promedio y una excelente.
Y no es que en una interfaz promedio no se puedan resolver las tareas. Hasta la interfaz más aberrante se puede usar. El problema de esas interfaces es la presencia de una importante cantidad de errores como el Mal de Lucas generan un roce permanente, una fricción que dispara constantemente al nivel pienso y entiendo pequeñas tareas que debían haber sido resueltas al nivel miro y entiendo. La interacción no fluye, se hace más pesada, se cometen más errores, muchos de ellos muy tontos. Y si hay algo que los usuarios odian es sentirse tontos.
Internet es un medio exigente y hostil, donde es mucho más fácil fracasar que sobrevivir, ni que hablar de tener éxito. Y la calidad de la interacción es un convidado de piedra de la batalla por la supervivencia. Es muy difícil, si es que los hay, encontrar proyectos rentables con una calidad de interacción pobre. Por eso, si quiere tener un sitio o una aplicación saludable desde todo punto de vista, debe trabajar decididamente en los detalles, y corregir el Mal de Lucas es sin lugar a dudas un buen comienzo.
Todos tenemos la expectativa, tal vez la ilusión, de que nuestro diseño cree interacciones que vayan mucho más allá de la idea de que el usuario pueda alcanzar sus objetivos de una forma sencilla, agradable y productiva. Que las interfaces que diseñamos transmitan emociones, generen vínculos, sean amadas por los usuarios. Lo más importante al respecto es que en ese camino no hay atajos.
Estamos bombardeados por una marea de metodologías, sistemas y tácticas que proponen de una vez y para siempre el atajo que producirá sin esfuerzo alguno la magia del diseño que todos aman. Me tocó hace un par de años escuchar una charla de una señora que decía que el eje de todo el problema es cambiar de "experiencia de usuario" a "experiencia del cliente", y tenía incluso un logotipo para "UX to CX". Una hora perdida en frases hechas, consejos inútiles y un discurso que persevera una y otra vez para que compremos su libro.
Es exactamente como querer adelgazar sin dieta o tener un buen estado físico sin ejercicio. Idéntico. Las propuestas son innumerables, todas tan definitivas como inútiles.
Cimientos para la interacción
El nudo de esta discusión se desata en el punto en el que entendemos que para crear interfaces que emocionen, que los usuarios amen, antes que ninguna otra cosa tienen que permitirles alcanzar sus objetivos de forma sencilla, agradable y productiva, por más trivial, aburrida y poco sexy que resulte esta propuesta. Es el cimiento en el que se basa todo lo demás.
Y nunca la metáfora del cimiento estuvo usada de forma más deliberada y literal que en esta oportunidad: la ardua tarea de construir una base sólida e invisible sobre la que apoyar todo lo demás. Nadie exclama ante la Torre Eiffel o el Empire State ¡qué cimientos! Por supuesto que no, pero todos sabemos que esa gran estructura hacia abajo, que fue hecha antes que lo que está a la vista para luego ser tapada con tierra, es la que soporta y habilita la construcción de todo el edificio.
Para crear diseños de la interacción de calidad, para poder aspirar a la excelencia creando interfaces que emocionen, productos digitales que nuestros usuarios amen, hay que empezar por el principio, haciendo que los fundamentos del diseño que estamos creando estén en su lugar. Eso significa que todos y cada uno de los elementos estén correctamente agrupados, que la legibilidad y los contrastes funcionen a la perfección, que las jerarquías estén tan bien definidas como ejecutadas, que se respeten las leyes de la Gestalt y las Heurísticas de Usabilidad. Y probarlos en el campo, testeando con usuarios reales, de carne y hueso, validando en la práctica que las ideas que se plasmaron en el diseño funcionan en la realidad. Quien diseña ni dibuja ni decora: coloca cada un de los elementos en su lugar, con conocimiento preciso de por qué lo hace.
El secreto mejor guardado del diseño de la interacción
El secreto mejor guardado del diseño de la interacción no es otro que para crear grandes diseños hay que aprender a diseñar, comenzando por el principio. Alguien podría acusarnos de triviales o tautológicos, y probablemente tendría razón si no cundieran los tutoriales, las presentaciones, los podcasts, los libros, los blogs, los hilos de twitter y todos las formas de mensaje mesiánico para un feliz proceso de diseño indoloro y sin esfuerzo. Entre todo ese ruido, a veces las ideas más sencillas son difíciles de defender y promocionar.
Es más, sobrevuela una idea de que los fundamentos del diseño de la interacción son para proponer ejercicios de poca monta a los novatos, que luego que uno es iniciado en la materia ya puede mandar al baúl de los olvidos. Nada más alejado de la realidad: cuanto más relevante es la tarea de diseño, más relevante es la capacidad del diseñador para resolver correctamente todos los problemas fundamentales.
Si querés crear diseños que tus usuarios amen comenzá por el principio: aprendé los fundamentos. Y un bonus track: lee libros. Un libro es un compendio en el que el autor, con muchísimo trabajo, ordenó y priorizó el material sobre un tema: lo divertido y lo aburrido, lo atractivo y lo gris. Leer libros es una ventaja competitiva arrolladora, aprovechala para transformarte en un gran diseñador.
