Analytics para diseñadores web

por Natalia Ventre el ・ podés leerlo en 8 minutos ・

Las estadísticas de un sitio web sirven para saber qué funciona y qué no y tomar decisiones.

Como diseñador web podés trabajar:

  • in-house: el diseñador in-house trabaja solo o en un pequeño equipo, para una empresa que no provee servicios de diseño web para terceros. Está involucrado en proyectos a largo plazo.
  • agencia/freelancer: el diseñador que trabaja para una agencia o como freelancer trabaja con varios proyectos para clientes simultánea o sucesivamente.

Si trabajás como diseñador in-house generalmente tenés acceso a las estadísticas pertinentes y si trabajás para una agencia o como freelancer podés interesarte por el negocio del cliente y pedirle los datos que necesites.

Anotaciones

En Google Analytics haciendo doble click sobre una fecha en la gráfica podés agregar una nota indicando qué cambios hiciste en el diseño para más adelante comparar el antes y después.

Anotaciones en Google Analytics
Las anotaciones en Google Analytics te sirven para darle un contexto a los cambios en el tráfico.

Soporte a navegadores

Cuando un cliente te pide un sitio web para Internet Explorer 6 y/o 7 no es para hacerte la vida imposible. Puede ser porque tiene usuarios de IE6–7 que le generan ganancia o por falta de información y en ese caso, como profesional, lo podés asesorar.

Para un sitio web nuevo te podés basar en las tendencias mundiales. En StatCounter tienen estadísticas globales, por continente y por país de la cuota de mercado de los navegadores, sistema operativo, etc. Por ej. en Uruguay en los últimos 30 días la distribución de navegadores es:

NavegadorMarket share
Chrome59,93%
Firefox 5+17,98%
IE84,91%
IE93,88%
IE103,87%
Firefox 32,46%
Firefox 3.62,2%
Safari iPad0,98%
Opera0,48%
Firefox 3.70,47%
Safari 60,44%
Android0,38%

En líneas generales, el soporte a características de HTML5 y CSS3 alcanza el 90,61%. Dependiendo del presupuesto disponible se podría dar o no soporte a versiones viejas de Firefox e Internet Explorer 8, pero matemáticamente no tenemos chance1 de recibir visitantes con IE6–7.

Para un sitio web existente, en Google Analytics o con otras herramientas2 podés averiguar el porcentaje y cantidad de visitas de cada navegador y segmentar las conversiones para determinar cuánta ganancia genera cada navegador y con esos datos tomar una decisión informada y no basada solamente en percepciones. A partir de las tendencias de adopción de nuevas versiones podés planificar hasta cuándo vas a dar soporte a cada versión (por ej. dejar de soportar activamente 2 versiones anteriores un año después del lanzamiento de una nueva).

Visitas por navegador en Google Analytics
Gráfica de torta (porcentajes) y cantidad de visitas por navegador en Google Analytics.

Diseño web adaptable

El acceso a Internet desde dispositivos móviles es menor que desde computadoras de escritorio pero está en aumento. Por ej. en Uruguay en mayo del 2013 fue del 2,99%, pero para vender RWD suena mucho mejor decir que durante el último año creció un 234%.

Mobile vs Desktop via StatCounter
Tendencia de Mobile vs Desktop via StatCounter

Para ayudarte a identificar los dispositivos, Google Analytics te muestra una foto de cada uno. Si para los breakpoints te vas a basar en dispositivos populares, tomá como referencia los usados por tus usuarios.

Informe de dispositivos móviles en Google Analytics
¡Gracias Google Analytics por las fotos de los dispositivos! No me sé todos los modelos y marcas de celulares y tabletas :(

El porcentaje de rebote y la duración de la visita son indicadores de la experiencia del usuario. En un re-diseño de ancho fijo a adaptable de un sitio web de contenido, donde no tenés muchos indicadores para medir, podés analizar si disminuyó el porcentaje de rebotes y aumentó la duración de las visitas.

Usabilidad

Los datos estadísticos no son un sustituto de un estudio de usabilidad con participantes, pero cuando por un tema de presupuesto no podés hacer por ej. un estudio de seguimiento ocular (eyetracking), podés guiarte con un mapa de calor. En diseño y desarrollo web siempre es mejor que hagas un testing básico a que no hagas nada.

Mapa de calor

El mapa de calor es una representación visual de la interacción del usuario con la página. Google Analytics tiene una implementación beta llamada analítica de página que no distingue entre más de un enlace que apunta a la misma página. Crazy Egg tiene varias visualizaciones incluyendo el heatmap que muestra dónde los usuarios hicieron click (¿en la foto? ¿en el botón?) y el scrollmap que muestra hasta dónde los usuarios hicieron scroll. Si en un botón no tenés clicks podés cambiarlo de posición o modificar el color, tamaño, forma, etc. para que luzca más “clickeable” y al revés, si tenés clicks en una imagen u otro elemento que no es un enlace, deberías reconsiderar el diseño.

Velocidad

TIP: Para analizar promedios representativos, eliminá los valores máximos y/o mínimos.

Google Analytics muestra datos relacionados a la velocidad del sitio (tiempo medio de carga de la página, redireccionamiento, búsqueda de dominio, conexión de servidor, respuesta de servidor, descarga de la página). La diferencia con PageSpeed Insights es que los datos se muestran en el contexto del país/territorio, página, navegador, etc. Podés ver por ej. sugerencias de velocidad para las páginas más visitadas o la relación entre el tiempo medio de carga y el porcentaje de rebote.

Velocidad en Google Analytics
Tiempo medio de carga de la página por país en Google Analytics.

Conversiones

Si especificás una ruta que querés que siga el usuario (por ej. detalle del producto > carrito de compra > ingreso de datos personales > agradecimiento por compra exitosa) Google Analytics te muestra un embudo de conversión. Un número alto de abandonos indica un problema en el paso. Cuando el objetivo es la descarga de un archivo, o irse a un sitio web de terceros, tenés que configurar eventos.

El testing A/B o test multivariable3 es un experimento donde tenés dos o más versiones de una página y un objetivo. Se divide el tráfico entre las dos opciones y la página con más objetivos cumplidos pasado un tiempo4 resulta ganadora. Un caso de uso puede ser variar el color de un botón en una landing page, o alternar entre un formulario largo en una página o dividido en múltiples páginas. Google tenía un producto llamado Google Website Optimizer que actualmente está integrado a Google Analytics (Contenido > Experimentos). Unbounce es un producto específico para landing pages, está orientado más que nada a no-diseñadores, pero según las necesidades de tu cliente, se lo podés recomendar. MailChimp denomina “Evil Popup” a la ventana modal para suscribirse a un newsletter, es un recurso que como diseñador seguramente te parezca malvado, pero funciona. Para todo lo que tengas duda, hacé un experimento y para incrementar las conversiones, animáte a diseños, por así decirlo, más comerciales.

Arquitectura de la información

En la visualización del flujo de tráfico y la búsqueda del sitio podés detectar debilidades en la navegación. Por ej. si tenés un enlace “P+F” en el footer y en el buscador interno hay muchas búsquedas de la palabra “soporte” puede ser un indicador de que el enlace no es suficientemente visible o que la etiqueta no es clara.

Conclusiones

Los clientes son personas de negocios y como tales responden bien a las estadísticas. Los números no mienten y evitan todo tipo de discusiones o decisiones basadas en caprichos. Los estudios de diseño y los diseñadores freelance pueden usar las estadísticas en casos de estudios. Además de mostrar capturas de pantalla de tu trabajo, un texto “con el re-diseño, las ventas incrementaron un 20%” suena muy bien y te puede servir para atraer nuevos clientes.


  1. “Matemáticamente tenemos chance” es una frase popular que se originó en una declaración radial del entrenador de la selección uruguaya en referencia a las posibilidades de clasificar para el mundial de Francia.

  2. En Cómo dejar Google Analytics sin dolor Guillermo Carbajal menciona varias alternativas.

  3. El A/B testing se refiere a una única variable (un título, un color, etc.) y el test multivariable es una combinación de varias diferencias.

  4. Para que los resultados de las pruebas A/B sean concluyentes tenés que tener una muestra suficientemente grande. En un página con decenas de miles de visitas diarias, puede llevarte horas y en un sitio con tráfico más modesto puede llevarte semanas.