Diseño UI

¿Cuáles son los elementos de interfaz que “calman” a los usuarios?

Cuando se diseña teniendo como foco al usuario (DCU/DCP) hay algunos elementos de interfaz que son relevantes. Son útiles e importantes si queremos procurar que el viaje a través de esta sea lo más fluida posible.

Todo proceso de diseño debe hacerse evitando puntos conflictivos o confusos. Todo aquello que ocasione sentimientos negativos en el usuario, como frustración, ira, e incluso miedo nunca será bueno.

Debemos ser especialmente cuidadosos en aquellos flujos que puedan generar incertidumbre. Si no están bien diseñados, sobretodo aquellos que se relacionan con información sensible o procesos de pago online, el usuario evitará realizarlos.

Migas de pan

Las migas de pan, o también conocidas como Breadcrumbs, son una navegación secundaria que muestra al usuario su ubicación en un sitio web.

Su nombre se inspira en el cuento infantil “Hansel y Gretel”, quienes las usaron como guías para no perderse en el bosque.

En el caso de un sitio web, las breadcrumbs permiten que el usuario encuentre fácilmente el “camino a casa”. Son elementos que ayudan a identificar el recorrido que ha hecho hasta la ubicación en la que se encuentra.

Existen dos tipos de migas de pan: las que muestran el camino recorrido y las que muestran la ubicación de la página en que estamos independiente del recorrido que hicimos. Las primeras se usan principalmente en sistemas y las segundas en sitios web. Ambas son altamente efectivas ayudando a la navegación de los usuarios.

Breadcrumbs en sitios web

En el caso de un sitio web abarcan los siguientes puntos:

• ¿Dónde estoy?: Indican al usuario donde se encuentran, en relación a toda la jerarquía del sitio
• ¿A dónde puedo ir?: Las migas de pan mejoran la capacidad de los usuarios de encontrar secciones y páginas del sitio. La estructura del sitio se entiende mucho mejor cuando se extiende en las migas de pan que si lo ordenamos en un menú.
• ¿Debería ir ahí?: Las migas de pan fomentan la navegación. Por ejemplo, en una tienda online, el usuario podría llegar a una ficha de unas zapatillas específicas y, si quisiera ver otras zapatillas albergadas en la misma categoría, sólo tendría que retroceder un paso en la navegación en las migas de pan.
• Menos acciones: En lugar de presionar el botón volver atrás del navegador repetidas veces para ir a la home o para volver a alguna pagina de nivel superior, el usuario solo hace un clic para acceder a la ubicación que necesita.

Paginación

Si bien la paginación no es siempre el mejor elemento de interfaz, se recomienda en casos en que se necesite enlistar una gran cantidad de contenido y no sea posible usar el scroll infinito.

Sin embargo, es necesario tener en cuenta que la paginación no ayuda cuando se lista más de un tipo de elementos.

Algunos de sus atributos son:

• Sentido de control: Muchas veces se dice que el scroll infinito es como un juego que nunca se termina y puede ser altamente estresante para el usuario cuando hay mucho contenido. Conocer el número de resultados disponibles y cuántas páginas deben revisar, permite a las personas tomar una decisión más informada. De acuerdo con la investigación de David Kieras La psicología en la interacción humano-computadora, “alcanzar un punto final proporciona una sensación de control”.
• Sentido de ubicación: Tener una interfaz paginada permite al usuario mantener una ubicación mental del elemento. Es posible que no necesariamente conozcan el número exacto donde se encontraba, pero sí recordarán un aproximado y los enlaces paginados les permitirán llegar más rápido.

Spinners

Estamos acostumbrados a este elemento, pero muchas veces no se incluye en procesos en los que relevantes y necesarios.

Por ejemplo, ¿qué pasa cuando hacemos una transacción? El tiempo que transcurre entre que hacemos clic en “transferir” y la interfaz nos muestre el mensaje de “transferencia exitosa” genera ansiedad e incertidumbre. Todo eso empeora si se demora más de lo esperado.

Sin un spinner que nos indique que el sitio está realizando la operación, podríamos creer que la transacción falló. Esa suposición puede resultar altamente frustrante.

La recomendación es que un spinner sea utilizado como micro interacción en aquellos procesos de espera que sean inferiores a los 4 segundos. Nunca se deben utilizar en periodos de espera mayores, ya que el usuario podría pensar que la página quedó congelada.

Barras de progreso

Al diseñar un sitio de comercio electrónico o un servicio en línea complejo con más de dos pasos, la barra de progreso es fundamental. Esta permitirá ordenar las etapas del proceso que el usuario está realizando.

Con este elemento podemos guiar a los usuarios a través de este proceso haciéndolo fácil e intuitivo. Además, contribuimos en el aumento de las tasas de conversión. Para el usuario saber en qué momento de la transacción se encuentra le da seguridad en finalizar todo el proceso.

Cualquier confusión o frustración en el camino incrementa las posibilidades de que los usuarios se vayan y busquen opciones mejores.

Las barras de progreso son un excelente elemento en la interfaz. Si se diseñan adecuadamente deberían ayudar a los usuarios en los siguientes aspectos:

• Saber qué pasos han completado: Acompañar con una respuesta visual reconocible, que indique al usuario que el paso ha sido completado.
• Conocer el paso actual en el que se encuentran: Indicar la ubicación actual del usuario dentro del proceso, también con un diseño reconocible.
• Anticipar cuál y cuántos pasos quedan por completar: Se debe diseñar de manera clara, reconocible y legible, qué pasos no están completados.

Identifica los elementos de interfaz necesarios

Existen varios elementos que pueden mejorar enormemente la experiencia de los usuarios en nuestros productos digitales. Lo importante es saber aplicarlos correctamente para no transformarlos en factores de frustración.

Si conseguimos poner en práctica estos consejos entregaremos productos de valor que nuestros usuarios disfrutarán. De esta forma, además, lograremos que su curva de aprendizaje sea mayor y mejor. Esto se traduce en que nos visiten nuevamente, sintiéndose cómodos con el producto entregado.