"> 10 consejos de experiencia de usuario (UX) que no sabías

10 trucos de experiencia de usuario (UX) que no sabías

¿Qué tal?, he decidido crear una nueva categoría del blog para aprender UX (experiencia de usuario), como siempre digo el crear una entrada para difundir conocimiento hace que tú mismo lo vayas adquiriendo. Y creo que tanto para un diseñador web como para un diseñador gráfico o cualquier perfil de desarrollador web en general necesita pensar en UX a la hora de abordar un proyecto. El resultado solo puede ser beneficioso y nos ayuda a pensar en el usuario de una forma más enriquecedora para ambos.

Vamos allá:

1. No pidas la tarjeta de crédito para una versión de prueba gratuita (free trial)

¡Quiero probar tu proyecto!, me has vendido bien la idea y estoy seguro de que tienes lo que estaba buscando.

Estoy dispuesto a dejarte mis datos para usar la versión de prueba, pero justo al final vas y me preguntas por mi tarjeta de crédito…

Esto rompe nuestra confianza. Dijiste que podía probar tu aplicación gratuitamente, pero el hecho de que me pidas la tarjeta de crédito no suena gratis para nada.

Ahora estoy cabreado porque he invertido mucho tiempo en rellenar los campos del formulario con mis datos personales.

No pierdes nada ofreciendo a la gente una versión de prueba gratuita sin pedir tarjeta de crédito.

Para empezar ya obtendrías el email del usuario, que es el mejor aliciente de todos.

Si la versión de prueba se acaba, puedes lanzar una campaña por correo ofreciendo descuentos y ofertas exclusivas.

Por ejemplo, crazyegg, una aplicación para obtener mapas de calor de tu página web, te ofrece un plan gratuito:

Ejemplo de mala experiencia de usuario

Ejemplo de mala experiencia de usuario (Pruebas gratuitas)

Esta aplicación independientemente de lo maravillosa que sea, requiere que des tu tarjeta para probar gratis sus servicios (inserte aquí un emoticono de carita triste):

Mala usabilidad web en Crazy Egg

 

2. Usa etiquetas de texto junto a los iconos para las interacciones

Los iconos no mejoran la experiencia de usuario, al contrario de lo que se suele pensar, son difíciles de memorizar. Los usuarios no expertos se llevan bien con los clásicos iconos de una “papelera” para la acción borrar, o de una impresora para la acción imprimir.

Pero si tenemos por ejemplo una barra de herramientas plagada de conceptos más abstractos, es muy difícil encontrar los iconos adecuados que los representen y los testeos de usabilidad pocas veces salen bien parados. Dejo esta interesante aportación del usuario Michael Zuschlag en UX Stack Echange por si quieres ampliar la información.

Ejemplo de botones con texto en Pinterest

Ejemplo de botones con texto en Pinterest

Los botones de Pinterest son perfectos, al poner el ratón sobre la imagen (hover) te aparecen los controles bien etiquetados tanto con texto como con iconos.

 

Los iconos de comprensión universal como cerrar, play, pausa, eliminar o imprimir, funcionan muy bien.

 

3. Resalta y dale más peso visual a la elección más común

Los usuarios siempre tienen que estar tomando decisiones. El clásico mensaje de confirmación ¿Estás seguro de que quieres continuar? es un ejemplo de ello, y se suele usar para confirmar que el usuario va a realizar una acción que implica un cambio permanente, como borrar algo.

Esto es una buena práctica porque borrar algo sin quererlo apesta. Pero tras esta pregunta casi el 100% de las veces el usuario hace click en “Sí”, confirmando así la eliminación del elemento.

Este mensaje de confirmación puede resultar un tanto molesto, así que puedes facilitarles la vida a los usuarios resaltándoles la opción que eligen con más frecuencia.

Ejemplo de UX al confirmar un borrado

Ejemplo de UX al confirmar un borrado

En el ejemplo de arriba al borrar un producto del carrito se nos presentan dos opciones, Cancelar y Aceptar, de forma correcta se le ha dado más peso visual a la elección más común, Aceptar. Para ello lo han resaltado dándole color de relleno al fondo del botón.

Resaltado de la opción más común en Pinterest

Resaltado de la opción más común en Pinterest

Otro ejemplo útil es lo que muestra Pinterest al editar un Pin, el 99% de los usuarios escogen guardar los cambios, y aparece resaltada como la más importante y obvia.

 

4. Guarda los campos del formulario si el usuario se equivoca

Vamos a dejar las cosas claras, uno de los lastres del usuario de internet es rellenar formularios, aunque sea el formulario más simple del mundo.

Pero lo peor entre lo peor es pasarte 5 minutos rellenando un formulario y que por tener un simple fallo se te vuelva a recargar la página con los campos vacíos…

Reconstrucción dramática del usuario

Reconstrucción dramática del usuario

La mayoría de las veces el usuario se va, a menos que enviar ese formulario sea cuestión de vida o muerte por algún motivo que desconocemos. Además de sentirse frustrado claro, por tener que rellenar todos los campos desde 0.

Asegúrate de que el mensaje del usuario o los campos no se borren al hacer el envío del formulario.

Hay que señalar que cada vez hay más formularios que usan php junto al método Ajax de jQuery, que hace que el envío de los datos del formulario se haga en la misma página sin necesidad de recargar o actualizar la misma.

Pero por ejemplo en las páginas de inicio de sesión o login es donde quizás se den estos casos con más frecuencia, si te equivocas en la contraseña te borran también el correo o el usuario que has escrito. Lo más seguro es que intentemos meter la contraseña 4 o 5 veces, por lo que ahorraría al usuario mucho tiempo y frustración.
 

5. Usa el interlineado (line-height) adecuado

Habrás entrado en muchos sitios donde te ha costado leer el texto debido al interlineado, el cual podemos manipular con la propiedad css line-height. El interlineado es el espacio en blanco entre cada línea de texto de tu página.

Es una parte muy importante para la legibilidad de tu sitio. El interlineado o line height se incrementa en base a dos factores: el tamaño de la fuente y el ancho de tus líneas.

Cuanto más grande sea la fuente, más interlineado se necesita para dar la cantidad de espacio en blanco adecuada entre las líneas.

En el caso de tener líneas de texto muy anchas de muchas palabras, el espacio en blanco es necesario para hacer más fácil al lector “colocar” sus ojos al comienzo de la siguiente línea. Siguiendo fácilmente el orden de lectura.

Sin la cantidad correcta de espacio en blanco el usuario o usuaria puede continuar la lectura en una línea equivocada.

Recomiendo usar Personified’s Typography Calculator para calcular el interlineado perfecto según tu ancho y tamaño de fuente.

 

Mal interlineado

Un ejemplo de un párrafo con un interlineado muy bajo.

 

Ejemplo de buen interlineado

El mismo párrafo pero usando el interlineado adecuado para la experiencia de usuario.

 

6. Usa textos Placeholder en los campos de tu formulario

Ya hemos dicho antes que los formularios apestan. Como ya de por sí consume mucho tiempo rellenar uno, podemos facilitar al usuario la comprensión de qué está rellenando gracias a los textos en los placeholder.

Como sabéis, placeholder es un atributo de la etiqueta html <input> que describe de forma breve lo que el usuario debe rellenar en cada campo del formulario. Se le muestra al usuario antes de que haga click dentro del input y empiece a escribir sus datos.

Hacemos el formulario más usable porque el usuario sabrá en ese instante qué datos le estamos preguntando en él.

Por ejemplo el típico campo donde debes introducir tu fecha de nacimiento, en el placeholder se puede dar la información del formato de fecha que hay que escribir. O los números de teléfono, también se pueden escribir en muchos formatos.

Buen ux con los placeholder

Buen ux con los placeholder

GrowthHackers ofrece ayuda al usuario complementando los campos con una breve descripción.

 

7. Haz al menos un test de usuario

La gente piensa que los test de usuario son un proceso largo que implica entrevistar a cientos de usuarios, grabar su comportamiento y redactar un informe sobre usabilidad.

Esto no tiene por qué ser así. ¿Sabías que la mayoría de los errores de usabilidad se puede encontrar
con un solo test de usuario?

No pierdes nada por hacer tres o cuatro tests más por si quieres asegurarte, pero lo más seguro es que los problemas que encuentres en los test 2,3 y 4, sean los mismos que has encontrado en el primero.

Usertesting.com es una web que ofrece test de experiencia de usuario, obteniendo los resultados como vídeo-test en una hora. Un test vale $49.

Puedes especificar el tipo de usuario que pruebe tu app o web coincida con tu público objetivo (género, padres, salario, etc). Configuras las tareas o acciones que quieres que hagan en el test y observas como las realizan en el vídeo resultante.

Es de los más completos que he encontrado, si tienes algún As bajo la manga no dudes en compartirlo 😉

User Testing para tests UX

User Testing para tests UX

 

8. Usa menos opciones en tu menú, intenta simplificarlo

Los humanos podemos retener unos 7 elementos en la memoria a corto plazo, los menús de navegación de una web con más de 7 opciones se pierden en nuestra cabecita.

Esto se traduce a que encontrar lo que estás buscando se convierte en una tarea mucho más difícil. Es como ir a una bocatería y escanear con la vista un largo menú de bocatas mientras esperas en la cola. Cuando llegas a la parte inferior de ese menú necesitas volver a empezar de nuevo la lectura, se te han olvidado los bocatas del principio.

Además, cuantas más opciones tenga un menú, menos importancia tienen esas opciones de forma individual. Si quiero que compres mi producto pero he enterrado el enlace entre una pila de 20 opciones… nadie encontrará relevante ese link sobre los otros.

Simplifica la navegación mediante la inclusión de pocas opciones, no te voy a decir que te pongas de límite 7, ya que como dice este artículo de UX Myth “En una página Web la información está presente visualmente, los usuarios no tienen que memorizar nada”, lo que sí está claro es que más opciones no siempre nos llevan a buenos resultados.

 

9. Huye muy lejos de los sliders siempre que puedas

No, no eres el único que se pone nervioso con los sliders que van pasando automáticamente. Un estudio de usabilidad de Nielsen Norman Group confirma que molestan a los usuarios y reducen la visibilidad.

Al pasar el slider automáticamente el usuario siente que pierde el control de la interacción con tu página. Es especialmente engorroso para el usuario con problemas de motricidad.

Por otro lado a menudo son ignorados por los usuarios, lo primero que solemos hacer al llegar a una web es saltarnos el slider y hacer scroll para ver lo que hay más abajo. En este ejemplo de mapa de calor (fuente) puedes ver como la parte del slider (el área negra) casi es ignorada por completo por los visitantes de la web:

Mapa de calor de una mala experiencia de usuario

En este mapa de calor el slider apenas recibe atención

También debes pensar en el usuario que aterrice en tu web y tenga problemas con el idioma, seguramente leerá los textos más lentamente y no tendrá tiempo si el slider cambia bruscamente.

Durante muchos años nos han propuesto los sliders como una forma sencilla de unificar el contenido importante que ofrecemos en nuestra web. Ya sea un servicio, ofertas, etc.

Sin embargo los datos ofrecidos por un test de la  Universidad de Notre Dame (han analizado su propio slider) revela  que el 84% de los visitantes han interactuado solo con el primer slide del slider:

Interacción con el slider de la Universidad de Notre Dame

 

10. Cuidado con los botones de redes sociales que distraen al usuario

Muchos eCommerce tienen los típicos botones de redes sociales para compartir el producto desde la misma ficha. Si el usuario sale fuera de tu página para darle a like, favear, retwittear, etc, debes enseñarle el camino de regreso.

Imagina que el usuario llega a una página de ficha del producto, queremos evitar distraerle del objetivo principal. En este ejemplo sería un gran botón de color contrastado que pusiera “Añadir al carrito”.

Se considera una buena práctica tener  un objetivo definido en cada página y conducir a los usuarios hasta este objetivo mediante una CTA (call to action), llamada a la acción.

Si tenemos además botones para compartir en redes sociales dentro de la ficha del producto provoca que el usuario tenga más opciones donde elegir, y si aumentamos el número de opciones creamos distracción respecto al CTA, reduciendo pues la conversión.

Un ejemplo real del tema que tratamos es un test A/B realizado por el eCommerce finlandés Taloon.com. El objetivo era aumentar los clicks en su botón CTA “Añadir al carrito”. Al principio en la versión A de la ficha del producto tenían los botones de redes sociales:

Experiencia de usuario, A/B test

 

Un test A/B es un método que ofrece al usuario dos versiones de una misma página que se diferencian entre sí en un elemento muy concreto, con el fin de recopilar información sobre cual de las dos versiones ha tenido más rendimiento para alcanzar un objetivo. Ya sea suscribirse en un newsletter, aumentan la conversión, etc.

En la versión B de la ficha del producto se quitaron los botones de redes sociales y aumentó en un 11,9% el número de clicks en el CTA “Añadir al carrito”, actualmente Taloon conserva esta última y beneficiosa versión:

Versión final resultado del test A/B

Versión final resultado del test A/B

 

Espero que te sirva de algo esta entrada, su contenido ha sido fuente de libros como “5 Minute UX Quick Fixes” de Craig Morrison y blogs de UX tan interesantes como Demacmedia.

¿Tienes experiencia en este campo?, ¿puedes arrojar luz sobre algunos de los puntos tratados? ¡No dudes en comentar! 😀

3 Comentarios

  1. Monica 27 junio, 2015 Responder
    • amldesign amldesign 28 junio, 2015 Responder
  2. Harold 15 agosto, 2015 Responder

Añadir un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *