Sebastián Thüer

Comunicación, diseño y tecnología

Usabilidad

Por qué los usuarios dejan tu sitio web [infografía]

· ·

Una buena campaña de marketing no sirve para nada si no podés retener los usuarios dentro de tu sitio web. Sea cual sea el sector, no hay nada peor que un usuario frustrado que abandona una página sin llegar a cumplir su objetivo: buscar información, descargar algo, buscar un dato de contacto o utilizar un servicio online.

Hay varias razones por las cuales un usuario puede abandonar tu sitio: una estructura de navegación deficiente, saturación de publicidad, mala organización de la información, audio o video intrusivo, necesidad de registro, contenido o diseño aburrido, mala legibilidad de los textos o falta de actualización.

Esta infografía resume las principales causas de abondono de un sitio y propone mejoras para evitarlo.

Infografía: Por qué los usuario abandonan un sitio web

Vía KissMetrics

¿Cuál es la red social más rápida?

· ·

El tiempo de respuesta de un sitio es una variable crítica para la experiencia de usuario. En el caso de las redes sociales, con mayor razón debido a la importancia de conocer lo que esta sucediendo justo en el preciso instante en que estoy delante de la página.

Por eso es interesante conocer esta evaluación de la compaía SmartBear que hizo una investigación sobre la confiabilidad de los social media en el tercer trimestre de este año. El estudio considera la carga del sitio completo, esto es, con imágenes, animaciones, Flash, JavaScript y demás tecnología que utilice.

Tiempo de carga

Facebook se adjudica con comodidad el primer lugar con un tiempo de carga menor a 1 segundo, bastante por encima del promedio de 2,29 segundos. Le sigue LinkedIn con 1,33 segundos y YouTube con 1,58. Twiter y MySpace están por encima del promedio con una performance bastante mala, en el último caso superior a los 5 segudos.

Disponibilidad

Si hay algo más molesto que una página lenta es un sitio caído. YouTube obtuvo la mejor medición con una disponibilidad en el 99.98% durante un trimestre. Facebook se acerca bastante con un 99.96% y luego sigue el resto con un Twitter en cuarta posición y por encima de la media. Nuevmanete MySpace da la nota con un inaceptable 98,75% para un sitio de su envergadura.

Vía ClasesDePeriodismo.com

Ubicación y diseño de botones en cuestionarios online

· ·

En apariencia, ubicar un par de botones debajo de una encuesta para continuar o retroceder es una decisión sencilla. Tiempo atrás publicaba un post sobre la usabilidad y los botones atrás / adelante donde cuestionaba la solución que una prestigiosa consultora había implementado: ubicar el botón de siguiente a la izquierda, en lo que parece un lugar anti natural y extraño.

Ahora llega la evidencia a través de un estudio elaborado por Mick Couper, de la Universidad de Michigan y Reg Baker, de la consultora Market Strategies International. Los investigadores publicaron el artículo Placement and Design of Navigation Buttons in Web Surveys donde reconocen que la simple ubicación de estos botones es un tema de discusión y que hay muchas diferencias de criterio.

La decisión más habitual es colocar el botón siguiente a la derecha. Así lo hacen los navegdores web, los buscadores como Google y es normalmente como se paginan las pantallas en la web. Colocar el botón siguiente a la izquierda sigue otra convención: seguir los lineamientos de la interfaz de Windows que siempre coloca la opción más habitual sobre este lado.

Una tercera posibilidad es ubicar ambos botones alineados a la izquierda uno debajo de otro. Finalmente, la cuarta variante es directamente ocultar el botón de atrás lo cual anula la posibilidad que el usuario corrija sus respuestas.

En total, las cuatro opciones habituales son estas:

Siguiente a la derecha, Anterior a la izquierda.
Siguiente a la derecha, Anterior a la izquierda
Siguiente a la izquierda, Anterior a la derecha.
Siguiente a la izquierda, Anterior a la derecha
Siguiente y Atrás a la izquierda con Atrás al final.
Siguiente y Atrás a la izquierda con Atrás al final
Siguiente a la izquierda, sin botón Atrás
Siguiente a la izquierda, sin botón Atrás

El estudio

A partir de los objetivos del estudio y del análisis de investigaciones previas los autores presentaron 5 alternativas diferentes para el colocar los botones en formularios online:

  1. Botón Atrás en el extremo derecho, Siguiente en el extremo izquierdo
  2. mbos botones alineados a la izquierda, primero opción Siguiente
  3. Botón Siguiente a la izquierda, Botón Atrás a la izquierda debajo de Siguiente
  4. Botón Siguiente a la izquierda, Botón Atrás a la izquierda con hipertexto
  5. Ambos botones alineados a la izquierda, primero opción Atrás

El estudio empírico se realizó a través de un muestreo no probabilítisco entre usuarios mayores de 18 años en los Estados Unidos. A ellos se les solicitó que contestaran unas preguntas relacionadas con el consumo de energía. Utilizaron 3 herramientas online diferentes con un total de 1800 respuestas, 600 por cada una. 

Los resultados que encontraron los investigadores se resumen en la siguiente tabla (clic para ampliar la imagen):

Tabla comparativa de resultados por variantes.
Tabla comparativa de resultados por variantes.

Conclusiones

En primer lugar, parece no haber diferencias significativas en el tiempo que emplean los usuarios según la diferente distribución de botones. No se pudo verificar que colocar la opción Atrás en un hipertexto para hacerla menos visible sirviera de algo. Por el contrario, la opción 5 registró el menor tiempo.

En segundo término, sí se observaron diferencias entre la cantidad de personas que usan la opción de volver según donde se ubique el botón Atrás. En los 2 primeros casos 1 de cada 5 usuarios usó la opción de volver. En cambio, en los casos restantes el uso cayó a menos de 1 cada 10.

La opción ganadora.
La opción ganadora.

En síntesis, el estudio no permite establecer diferencias sustanciales según la ubicación de los botones. No obstante, hay que tomar nota que los usuarios que participaron del estudio están habituados a responder encuestas online. De todas maneras, la opción más razonable parece ser ubicar ambos botones alienados a la izquierda siguiendo el orden lógico de situar primero Atrás y luego Siguiente.

Estudio original: Placement and Design of Navigation Buttons in Web Surveys. Gracias a Sergio Ortega por el enlace.

Consejos para mejorar la usabilidad en el envío de formularios online

· ·

Los formularios suelen ser el talón de Aquiles en la usabilidad de muchos sitios web. Después de una página clara, atractiva, bien organizada y de fácil lectura suele venir un formulario que no siempre tiene el mismo esmero que el resto del sitio.

En Six Revision dan 10 consejos de usabilidad para enviar formularios por la web con recomendaciones muy sencillas y, la mayoría, que se puede implementar sin grandes complicaciones. Aquí va la lista:

  1. Marcar claramente los campos requeridos
  2. Proporcionar mensajes amigables y claros en caso de error.
  3. Usar validación por JavaScript del lado del cliente
  4. Marcar el campo que se encuentra activo para ayudar al usuario a saber dónde está.
  5. Si hay varias páginas, mostrar claramente el proceso.
  6. Guardar o cachear los datos ingresados por el usuario regularmente
  7. Cambiar el texto «Enviar» por algo más directo y atractivo.
  8. No usar el botón «Cancelar»
  9. Mostrar claramente al usuario el formato de entrada de los datos (especialmente las fechas)
  10. Mejor formulario de una columna en lugar de dos.

¿Que otras cuestiones tenés en cuenta para tus diseños? ¿A qué aspectos de usabilidad prestás más atención en el diseño de formularios? Tus comentarios son bienvenidos.

Navegación horizontal vs. navegación vertical, ¿cuál funciona mejor?

· ·


Uno de los primero temas que surgen a la hora de plantear un diseño web es definir el área de navegación. En general, hay dos soluciones: una barra horizontal o un menú lateral, generalmente a la izquierda ¿Cuál de las dos conviene?

En el blox UX Movement han analizado ambos estilos de navegación según diferentes criterios: scanning, espacio en la página, prioridad de los ítems, visibilidad y el tipo de contenido (general o específico). Las conclusiones son bastante interesantes:

  • Scanning: La navegación lateral es más rápida y eficiente para los usuarios que pueden identificar dos elementos por cada vez que fijan la vista. Es decir, para un menú con 6 elementos bastan que el usuario solo fije 3 veces la mirada.
  • Espacio en página: Obviamente, la navegación horizontal ocupa menos lugar y ayuda a optimizar el espacio en la página con lo cual es una alternativa que adquiere fuerza cuando hay mucho contenido para mostrar.
  • Jerarquía: En la navegación horizontal los ítems ubicados a la izquierda tienen mucho peso visual porque suele ser el inicio de los recorridos de lectura. En cambio, las listas verticales no implican necesariamente una jerarquía visual porque el sentido natural de lectura es de izquierda a derecha.
  • Visibilidad: Las barras horizontales ganan en visibilidad porque suelen situar al comienzo de la página y el usuario sabe fácilmente como localizarlas. Por el contrario, los menús laterales no están siempre en la misma posición y el usario tiene que buscarlos dentro de la página.
  • Tipo de contenido: En general, la navegación lateral funciona mejor en los sitios con contenidos generales dirigido a una audiencia amplia. Como no tiene implicita una jerarquía, los usuarios pueden determinar con mayor facilidad cuál es su contenido preferido. En cambio, los sitios con contenidos especializados se benefician de las barras horizontales porque -dentro de este contexto- ayudan a definir la jerarquía.

    • Ya lo sabés. Antes de definir la zona de navegación en tu próximo proyecto conviene repasar estas categorías y definir cuáles son las prioridades.