Segunda entrega de la colección de ejemplos de landing pages. En esta ocasión os planteamos una posible página destinada a la generación de contactos interesados en un producto o servicio determinado.

El ejemplo que os proponemos es de lo más genérico, pero hay algunos elementos interesantes que no debemos olvidar:

• Look&feel del sitio web pero con las mínimas opciones de navegación posibles.
• El formulario es una buena forma de conseguir contactos pero no nos olvidemos de nuestro teléfono y dirección. Situarlo en la esquina superior derecha es muy habitual y el usuario generalmente lo conoce, a la vez que no invadimos la zona izquierda de alto impacto visual.
• Gran peso visual del nombre del producto.
• Reducción al máximo de ruido y contenido innecesario.
• Contenido de forma esquemática y con pocos párrafos
• Posible inclusión de una imagen de producto o de público objetivo a captar.
• En el formulario… Sólo los campos estrictamente necesarios. Cuantos menos mejor.
• Una llamada a la acción clara y concisa.

¿Queréis algún ejemplo en particular? Deja un comentario o hablémoslo en Twitter: @edubarredo. ¡Y todo sin cobrar!

Primer wireframe de la colección de ejemplos de landing pages. Empezamos con una página destinada a generar leads para una web de reciente creación. Poco contenido, algo de misterio y una acción muy clara: “Dame tu e-mail si quieres ser el primero en saberlo”

]]> http://www.trucosoptimizacion.com/index.php/2010/05/ejemplos-landing-pages-prelanzamiento/feed/ 0 http://www.trucosoptimizacion.com/index.php/2010/05/usabilidad-landing-pages/ http://www.trucosoptimizacion.com/index.php/2010/05/usabilidad-landing-pages/#comments Mon, 24 May 2010 18:15:44 +0000 Eduard Barredo http://www.trucosoptimizacion.com/?p=497

En la mercadotecnia en Internet, se denomina página de aterrizaje (del inglés landing pages) a una página web a la que una persona llega, después de haber pulsado en el enlace de algún banner o anuncio de texto situado en otra página web o portal de Internet. En la mayoría de los casos esta página web es una extensión del anuncio de promoción, donde se explica más detalladamente la oferta del producto o servicio que se está promocionando a través de una carta de ventas.

Esta es la definición de landing page propuesta por la enciclopedia colaborativa Wikipedia, pero de que se trata exactamente esto de las landing pages?

Básicamente, una landing page o página de aterrizaje es cualquier página de un sitio web que es accesible y localizable, un punto de entrada a una web. Generalmente la página de entrada más común es lo que conocemos como página principal o homepage, en la que tratamos de resumir la temática del sitio y que sirve como página de distribución de tráfico. Enlazamos con las diferentes categorías de contenido, mostramos nuestro contenido más reciente o simplemente damos a conocer nuestras ofertas y promociones por citar algunos ejemplos.

Sin embargo por diversos motivos estratégicos nos puede interesar dirigir a los visitantes a alguna página en concreto que contiene información precisa para el público que andamos buscando. Páginas que de algún modo pueden o no formar parte del entramado de la web y que podemos modificar y optimizar de forma muy reactiva.

Usabilidad básica para landing pages

Podemos crear tantas páginas de aterrizaje como tipos de objetivos y públicos distintos vayamos buscando. Podríamos por ejemplo, crear una página de aterrizaje para todas aquellas personas que nos encuentran por una fuente de tráfico determinada (orgánico, ppc, redes sociales, e-mial…) o también en función de si ya nos conocen o no. Segmentamos nuestro tráfico.

En línias generales al crear una landing page intentaremos…

• Ser claros
• Ser concisos
• Ser atractivos
• Ser sencillos

Al mismo tiempo, tendremos en cuenta que los usuarios son…

• Impacientes
• Desconfiados
• Distraídos
• No leen, escanean.
• Buscan un lugar donde hacer clic

Y ante todo…

• Debemos ser ágiles, testear y modificarlas sin que esto signifique sudar sangre.

¿Utilizáis landing pages? ¿Os parecen útiles? Os animo a dejarnos un comentario o a charlar directamente en Twitter: @edubarredo

La semana pasada @crismataix encendió la mecha del debate sobre el intrusismo profesional en el marketing online. La verdad es que vale la pena leerse el artículo y sobretodo la colección de comentarios que ha generado.

A raíz de este tema, en en último artículo del blog de WebAnalytics.es se explican las diferencias entre las certificaciones de Google Analytics a nivel individual (GAIQ) y la red de partners (GAAC), y hemos notado cierto interés en conocer las otras certificaciones existentes para los productos Google.

Del mismo modo que existe una red de expertos sobre Google Analytics, también existe la red hermana de expertos en optimización de sitios web utilizando Google Website Optimizer.

Website Optimizer Authorized Consultant (WOAC)

Para Website Optimizer no existe una certicificación a nivel individual y sólo las empresas y agencias dedicadas al e-marketing pueden conseguirla. Para ello, es necesario lo siguiente:

• Haber diseñado e implementado exitosamente almenos 3 experimentos en 3 clientes distintos.
• Que la empresa tenga más de 2 años.
• Diponer de un equipo de personas con nivel demostrable en areas de marketing.
• Ofrecer servicios de consultoría, implementación, coaching y formación basadas en la herramienta.
• Demostrar un mínimo de 3 experimentos cada 3 meses.

Todos los detalles los podéis consultar aquí.

Los partners a cambio disponen de acceso a un foro de consultas con otros WOACs, contacto directo con Google, invitaciones para poder asistir al encuentro anual de WOACs en Mountain Viewal y acceso a betas privadas.

En España somos 3 empresas acreditadas para dar este tipo de servicios. Puedes encontranos a todos en esta página.

Si tienes alguna duda sobre la certificación, plantéala libremente en los comentarios, o bien vía Twitter @edubarredo

Si el link es el rey de Internet, el call-to-action no se queda lejos. Estamos rodeados de botones y cada dia pulsamos unos cuantos con esa mano virtual llamada cursor. “Buscar”, “Comprar”, “Aceptar”, “Cancelar”, “Descargar”, “Iniciar sesión”, “Enviar”, “Pulsa aquí”, ¿Por qué?, “Tú pulsa”, etc.
Los hay de mil colores y estilos pero ¿Cómo debe ser el botón ideal? Con este post aprenderemos las 4 reglas que configurarían el botón perfecto. Vamos a ello…

Las 4 Reglas de Oro

• Affordance
  Tal como Donald Norman apunta en The Design of Everyday Things, el affordance es aquella cualidad que un objeto tiene para autodescribir las posibilidades que ofrece y hacerlo de forma perceptible para el usuario. Por ejemplo, el pomo de una puerta y la maneta de otra son mecanismos de apertura que cumplen un mismo cometido, sin embargo y únicamente con su apariencia intuimos que ambos mecanismos requieren diferentes formas de interacción. Es decir, ofrecen affordance diferentes.
  Así que la primera regla es conseguir que todo call-to-action tenga un affordance correcto. Esto quiere decir que todo call-to-action tiene que aparentar ser un elemento pulsable.
  Un efecto 3D es la clave para conseguir una apariencia pulsable.
  En la imagen inferior, el botón de la izquierda tiene una apariencia más bien plana mientras que el botón de la derecha ofrece un aspecto que autodescribe el comportamiento.
  
• Copys descriptivos
  Gracias al affordance ya sabemos el como interactuar con ese elemento que vemos en pantalla, ahora necesitamos saber el que o el para que nos servirá pulsar sobre el mismo. Utilizar un copy—o texto—descriptivo será fundamental.
  Por norma general el texto que incluyen la mayoría de los call-to-action es aquella palabra que describe la acción. Por ejemplo: “Comprar”, “Descargar”, “Suscríbete”, etc. Pese a que estos literales son bastante descriptivos, aún podemos reforzarlos si además incluimos el objeto sobre el que recae la acción. Por ejemplo: “Comprar entrada”, “Descargar catálogo”, “Suscríbete al RSS”, etc.
  En un primer momento, complementar el texto con el objeto puede parecer innecesario pues el propio contenido de la página daría el contexto necesario. Sin embargo, el propio peso visual de un call-to-action puede dirigir nuestro foco de atención hacia el mismo sin haber realizado un previo escaneo de los contenidos. En este caso, contar un botones que contengan el contexto de manera explícita facilitará el uso sin dar pie a posibles ambigüedades.
  
• Refuerzo cromático
  Con un copy descriptivo tenemos un mensaje con contexto, pero aún podemos reforzar el mensaje si hacemos un uso adecuado del color. Es el caso típico de call-to-action con mensajes o acciones de tipo confirmación o anulación.
  Sucede que como usuarios procesamos e interpretamos el significado de un color mucho más rápido que leemos el texto que pueda contener el botón. Así, utilizar el recurso del color resultará en una mayor eficiencia al uso.
  No hay una norma estándar para este punto, pues está lleno de matices. Un consejo es diferenciar los call-to-action de acción neutral (p.e: “Añadir a favoritos”) de aquellos call-to-action cuya acción puede afectar al flujo de un proceso (p.e: “Ir al paso 2″ o “Cancelar compra”). Para el caso de los botones que ejecuten una acción neutral podemos utilizar el tema de color corporativo de todo el sitio web. Para los botones que aparecen durante un proceso podemos utilizar el color corporativo para aquellos botones que accionen confirmación y el color complementario para aquellos que anulen el proceso.
  En la imagen vemos que para la acción “positiva” se emplea el color corporativo, mientras que para la acción “negativa” se utiliza un color neutro que pasaría más desapercibido.
  
• Eye Candy
  El punto estético tiene una influencia directa sobre la percepción de las cosas. Si algo está cuidado a nivel visual automáticamente cautivará nuestra atención, nos persuadirá, y nos transmitirá confianza.
  
  La apariencia importa, somos así.

Despedida

Para terminar, un par de enlaces recomendados.

• “In Defense of Eye Candy” de A List Apart y
• “Buttons Design Showcase“.

Espero que este artículo os sea útil y que lo podáis poner en práctica.

Nos vemos en Twitter @drodriguezlopez

Hace poco más de una semana presentamos el primer post de la serie “Mejorando Home Pages”, en el que hicimos un repaso de las incidencias detectadas en la Home de Correos.es. En este segundo capítulo vamos a ver nuestra propuesta de mejoras y, tal como prometimos, una propuesta de wireframe para Correos.es.

Recuperando el hilo del anterior post, recordamos que la finalidad de estos artículos siempre será didáctica y la actitud de los puntos que debatimos siempre pretende ser constructiva.
También queremos apuntar que todas las sugerencias al cambio que proponemos se plantean desde un contexto alejado de la realidad, un contexto sin limitaciones técnicas, cruces de intereses interdepartamentales o HiPPo-imposiciones. Movernos en un contexto alejado del mundo real nos permite avanzar plácidamente hacia soluciones teóricas, pero hay que ser conscientes de que la práctica no siempre permitirá una plácida implementación.

Dicho esto… ¿vamos al lio?

Las Mejoras

A continuación, el listado de cada propuesta de mejora en base a cada una de las incidencias.

• Replantear menú de navegación principal. Ya comentamos que hay una redundancia entre accesos a contenidos, lo cual puede estar ocasionando confusión a la hora de navegar.
  Tenemos un primer nivel de navegación que segmenta por tipologia de usuario (particular y empresa) y un segundo nivel de navegación que segmenta por tipo de envio.
  El problema es que la segmentación por tipo de usuarios es, para la mayoría de contenidos, mera decoración. Pues los contenidos, son en realidad los mismos independientemente del perfil de usuario que seleccionemos.
  Concretamente, “Enviar documentos”, “Enviar paquetería”, “Dinero” “A.P.E.”, “Otros Productos”, “Filatelia”, “Atención al Cliente” e “Información Corporativa” son secciones compartidas por particulares y empresas. En otras palabras, ambos públicos comparten 8 de las 13 secciones existentes entre ambos menus. ¿Es necesario crear dos menus? Al fin y al cabo, la diferencia entre servicios según público objetivo no es tan grande.
  Proponemos omitir del primer nivel jerárquico esta segmentación por público y definir un menú orientado a los servicios de carácter genérico, es decir, la mayoria. Las otras 5 secciones específicas se añadiren al final del menú indicando su target potencial de manera explícita y mediante los literales “Servicios para empresas” y “Servicios para particulares”.
• Dar aspecto de botón a todo call-to-action.
  Llamadas a la acción como realizar un telegrama online o descargar tarifas pasan desapercibidas. Uno de los objetivos para Correos puede ser conseguir que se hagan envios de telegramas mediante su plataforma on-line. Si es así, hay que potenciar la visibilidad de tal elemento además de crear un botón fácilmente reconocible. Lo mismo sucede con la descarga de tarifas y con todas aquellas secciones accionables que se quieran destacar.
  Proponemos crear botoneria y jugar con el estilo visual de los textos con el objetivo de conseguir una peso visual mayor.
• Definir area dedicada a las herramientas.
  La home de Correos.es dispone de muchas herramientas, bien funcionales desde la propia home o bien accesibles desde la misma. Sin embargo, no hay una estructura consistente y la ubicación de las herramientas sigue un criterio casi anárquico.
  Proponemos crear una zona de pantalla dedicada a todas las herramientas que ahora aparecen desperdigadas: “Localizador de Envíos”, “Calculador de tarifas” y “Asesor de productos” entre otros.
• Agrupar enlaces según ámbito.
  Se nota una mala agrupación en enlaces de secciones aisladas sobretodo dentro de la cabecera y el pie de página.
  Sugerimos reagrupar con cierto criterio cuando sea posible o bien rehubicar las mismas dentro de módulos dedicados, cómo sucederá en el caso de las herramientas.
• Evitar el aspecto de banner para servicios destacados.
  El elemento central donde se destaca el servicio de “Burofax” tiene aspecto de módulo promocional. Hemos evitado esta apariencia optando por un aspecto tipo contenido.
• Mostrar teléfono y horarios.
  Actualmente estos datos se encuentran a un clic de distancia del usuario, en una pantalla dedicada a “Atención al Cliente”. Pese a mantener dicha pantalla, proponemos mostrar de manera omnipresenteme el teléfono de contacto y los horarios de las oficinas en la cabecera de la Home.
• Estandarizar la apariencia de los links.
  Todo aquello que sea enlace debará tener la misma apariencia, a excepción de los enlaces contenidos en el menú de navegación principal.

Y dicho esto…

El Wireframe

Creemos que para una buena comprensión del trabajo realizado, una imagen vale más que mil palabras. Así que como ejercicio práctico, lo mejor es ver el wireframe a tamaño completo y compararlo con la web actual de Correos.

¿Que os parece?

¿Os gusta la propuesta para Correos? ¿Hay algo que no os gusta? ¿Se nos ha escapado algo? ¡Generemos debate!
Estaremos atentos a vuestros comentarios.

¿Para cuando el siguiente?

Pronto, muy pronto… La próxima home a analizar ya está en el punto de mira Aunque ¡Se aceptan ideas! Tal como dijimos en los comentarios y si creeis que alguna Home lo merece… Comentario al canto.

Me podeis seguir en Twitter @drodriguezlopez
¡Nos vemos!

No todas las páginas tienen porque ser eye-candy, trendy o friendly. Pero toda web debería cumplir con unos mínimos. Unos mínimos que la hiciesen óptima para el visitante/cliente. Si hay que prescindir de lo estético, se prescinde, pero hagamos una página que sea neutral para nuestra retina. Si hay que prescindir de funcionalidades 2.0, se prescinde, pero hagamos una página que sea usable.

Lamentablemente, la realidad no es así ¿Por qué pudiendo crear páginas atractivas y funcionales, se degenera creando webs que tiran para atrás? Esta tendencia tiene que cambiar.

En TrucosOptimización vamos a publicar una serie de posts dedicados a mejorar aquellas páginas que necesitan un lavado de cara urgente.
Para todos los sitios elegidos, miraremos con lupa su Home y describiremos las incidencias encontradas. Además, propondremos un rediseño de la pantalla analizada en forma de wireframe. Y todo esto “por amor al arte”.

El alcance de las recomendaciones será conceptual y no debería ser interpretado como modelo a reproducir fidedignamente. En otras palabras, la utilidad de las propuestas que presentamos deben ser vistas como ejemplos prácticos cuya finalidad es el aprendizaje.

Principalmente nos centraremos en cómo mejorar aspectos relacionados con la funcionalidad, navegabilidad, accesibilidad y usabilidad del sitio, y no tanto en juzgar aspectos de carácter estético. Eso sí, cuando el diseño sea lamentable será difícil que no nos pronunciemos al respecto.

El caso Correos.es

El sitio elegido para este primer post es el de la Sociedad Estatal de Correos y Telégrafos, popularmente conocido como Correos.
Algunos datos: 300 años de historia, alrededor de 65.000 trabajadores y más de 5 billones de envíos anuales. Correos es considerada como uno de los grandes servicios de correo postal a nivel mundial.
¿Correos.es se merece una web como esta?

Es posible que Correos no esté considerando el medio online como prioridad para su negocio. Sin embargo, hoy en día su imagen ya no sólo se reduce a esa Vespa amarilla que recorre nuestras calles. Correos está en Internet y debe dar ejemplo.

Veamos que pasa con su Home.

Dando caña…

Como siempre y antes de entrar al trapo, hay que buscar respuesta a la pregunta ¿Cual es el objetivo de esta página? Y complementariamente también hay que cuestionarse ¿Que busca el usuario que aterriza en la home Correos.es?
Siendo prácticos, la web tiene un carácter fundamentalmente informativo: tipo de envíos, tipo de producto, servicio a particular o empresa, contacto, etc. Secundariamente se ofrecen algunas funcionalidades: localizador de envíos y calculador de tarifas entre otros.

Lo que buscaremos será conseguir que esta información y funcionalidades lleguen al visitante de la manera más eficiente posible.

Veamos que fallos hemos encontrado.

En relación a los contenidos:

• Redundancia entre los diferentes accesos a la información: el acceso a los contenidos gira en torno a un menú lateral que agrupa según el tipo de producto/envío. Además, un menú de pestañas distingue usuarios y servicios orientándolos según particulares/empresas. Sin embargo, muchos de los elementos del menú lateral no varían y son los mismos independientemente de encontrarnos bajo la pestaña particulares o empresas. Esta redundancia no sólo reduce la eficacia de navegación sino que también añade confusión. Mientras indagamos pueden aparecer dudas del tipo ¿La sección Telegramas es la misma bien nos encontremos bajo la pestaña Particulares o bajo la pestaña Empresas?

• Las llamadas a la acción pasan desapercibidas: opciones como la descarga de tarifas o servicios como el envío de telegramas online tienen un peso visual reducido y tampoco tienen apariencia de call-to-action. Una descarga o un telegrama online son objetivos a potenciar.
• Las herramientas son poco visibles: herramientas como el localizador de envíos o el calculador de tarifas no se potencian visualmente. No se ve un área de página o contenedor dedicado al emplazamiento de herramientas.
• Mala agrupación de enlaces: hay discontinuidad entre conceptos y como estos se han agrupado. Por ejemplo, situar “Productos A-Z” como enlace hermano de “Atención al cliente” es algo a cuestionar. Del mismo modo que encontramos “RSS” junto a conceptos como “Perfil de Contratante”.
• La información de contacto es poco visible o está mal ubicada. Datos básicos como un teléfono de atención al cliente o los horarios de oficinas no son visibles.

En relación a la apariencia:

• El visual “hit” es deficiente: la primera impresión al ver la página debe mejorar. Hay un exceso de módulos con estilos diferentes, concretamente los módulos auxiliares como el “Localizador de Envíos” o “Tu dominio” transmiten una imagen muy precaria. Los enlaces no mantienen un estilo consistente, observamos el uso de hasta 4 colores diferentes y tampoco se usa el subrayado como norma. Definir un estilo y prestar mayor atención por los detalles es necesario.

• Mal aprovechamiento de la la pantalla: el tamaño del contenedor es de 800px de ancho y 600px de alto. Hoy en día la resolución más extendida es de 1024px de ancho. La sensación es la de tener un contenedor de elementos flotando casi a la deriva.
• Módulos con apariencia de promoción: se utilizan creatividades con aspecto de anuncio para herramientas del propio sitio (“Burofax”, “Tarifas 2010″, etc.).
• El logotipo es de baja calidad: el logotipo se aprecia pixelado y su tamaño es ridículo. Hay que realzarlo, darle mayor fuerza mediante una imagen de alta resolución y de mayor tamaño.
• El pie de página propuesto es un error en uso y apariencia.

Y en el próximo post de esta serie…

Como vemos, el potencial de mejora de Correos.es es evidente y por eso en el próximo post de esta serie (Mejorando Home Pages – El Caso Correos.es II) lo atacaremos de lleno. Veremos la propuesta de mejoras, su razón de ser y sobretodo nuestra propuesta de wireframe para Correos.es.

¡Esperamos vuestros comentarios! y tweets. Puedes seguirme en twitter @drodriguezlopez

Sé que tengo ancho de banda de sobras, sé que el servidor donde hospedo mi web tiene capacidad de sobras y tampoco estoy bajando archivos del tamaño de una Wikipedia. Sin embargo, al cargar mi página web parece que mi conexión va a pedales. ¿Qué está pasando?

¿Sabes si tu página web está optimizada para que cargue como un tiro? Page Speed es tu juguete para estas navidades.

Somos impacientes. Queremos páginas rápidas

Si hay algo que nos desespera mientras navegamos por Internet es toparnos con una web que tarda en cargar.

Según recientes estudios en la materia, tenemos una tolerancia de 2 segundos antes de abandonar una página si esta no se ha cargado. Si bien este valor me parece un tanto excesivo, si es cierto que reducir al máximo el tiempo de carga de una página mejora de forma directa la experiencia de navegación. Sin embargo, una carga lenta no sólo afecta a la experiencia del usuario sino al grado de confianza que este depositará en el sitio web y, por extensión, en la marca.

Puede parecer que la velocidad de carga de una web sólo depende de factores como el ancho de banda con el que navegamos o la capacidad del servidor donde la web esté hospedada. Sin embargo, optimizar el propio sitio web ayuda a reducir drásticamente su tiempo de carga.

Si quieres que tu web “vuele”, puedes probar utilizando Page Speed.

Page Speed, test de velocidad y diagnóstico.

Page Speed es un Add-on para Firefox que nos permite realizar tests de rendimiento sobre páginas web. Esta evaluación de rendimiento se basa en la medición del tiempo de carga de la página y una vez que concluye mostrará un listado de las incidencias encontradas así como una serie de consejos para su solución.

El test realiza una serie de comprobaciones a fin de validar que se están cumpliendo las mejores prácticas para el rendimiento de la web. Un resumen:

• Uso de la caché: validará si estamos permitiendo que algunos elementos del sitio web, como CSS, imágenes o JavaScript, sean almacenados en la caché del navegador.
• Tiempos de respuesta: validaciones con el fin de reducir los tiempos de respuesta cliente/servidor.
• Tamaño de cookies: verifica que el tamaño de las cookies a enviar tienen un tamaño adecuado.
• Tamaño de paquetes: comprobaciones sobre el tamaño de los datos que se transmiten. Page Speed validará, por ejemplo, si estamos usando ficheros JavaScript y CSS compactados o si las imágenes han sido escaladas y optimizadas para la web.
• Rendering de la página: comprueba la simplicidad del código para que este sea eficientemente interpretado por el navegador.

El resumen de incidencias se presenta en forma de lista ordenada según prioridad de cambio.

Veamos un ejemplo.

Caso práctico

Para poder utilizar Page Speed es necesario haber instalado antes FireBug para Firefox.

Para realizar un test, primero hay que ir a la página que se quiere evaluar. Una vez que el navegador haya cargado la página podremos lanzar el test: Abrir FireBug > Pulsar sobre la pestaña “Page Speed” > Pulsar en “Analyze Performance”.

Los resultados del análisis de rendimiento se presentan del siguiente modo:

La herramienta, además de especificar el grado de repercusión para cada incidencia, también explicita que ratio de mejora comportaría la solución.

Por ejemplo, en la imagen inferior se ven los detalles para la incidencia “Minify CSS”. En primer término tenemos un resumen donde ya podemos ver un par de datos interesantes: el tamaño total que podríamos ahorrar en caso de solucionar la incidencia, así como el porcentaje de optimización que supone. Esta información también se detalla para cada una de las sub-incidencias, en este caso para cada una de las hojas de estilo afectadas. No sólo eso, sino que para hacernos la vida más fácil, Page Speed nos da un enlace directo a la versión optimizada para cada CSS, JavaScript e incluso imagen pendiente de ser optimizada para la web.

En resumen…

Descarga Page Speed y échale un vistazo. Muy probablemente, estrenes el 2010 con una web más rápida de lo que era hasta ahora

Bonus

Si quieres jugar a ver quién es el más rápido, prueba con Website Speed Test. Puedes poner varios dominios a la vez y la herramienta comprobará cuales son los tiempos de carga. Ojo, google.com suele hacer pole.

¡Esperamos vuestros comentarios! Puedes seguirme en twitter @drodriguezlopez

En anteriores artículos hemos hablado sobre a/b y multivariate testing y cómo aplicar esta u otras técnicas con Google Website Optimizer. Para refrescar la memoria o para introducir a nuevos lectores (bienvenidos!!) os recomiendo las lecturas:

A/B testing mas a fondo

Conociendo los test que podemos hacer con Website Optimizer

Tu primer experimento en Google Website Optimizer paso a paso

Por otro lado también haremos un repaso de los pasos que hemos dado antes de poder empezar a analizar resultados:

1. Hemos analizado nuestro site y hemos detectado que páginas o secciones son las candidatas a optimizar.
2. Hemos planificado un calendario de trabajo y hemos anotado nuestras hipótesis.
3. Tenemos planeadas que secciones (variables) queremos testear.
4. Hemos pensado y creado las variaciones para cada sección.
5. Tenemos el código implementado (si no somos de perfil un poco técnico o si simplemente no tenemos acceso al código deberemos pedir ayuda a nuestros compañeros de IT).

Hechémosle un vistazo a esos reports

Con el test en marcha, GWO nos pone a nuestra disposicion 2 informes en las pestañas “Combinaciones” y “Secciones de página”. Vamos a verlos un poco en detalle.

:: Combinaciones ::

El informe de combinaciones trata de darnos de una forma muy clara y rapida, cual es la relación entre cada una de las combinaciones del test y su repercusión al ratio de conversión. Para ello en primer lugar nos informa de la efectividad de la página original y en base a ella, nos dice qué combinación rinde más o rinde menos respecto a esta.

El report nos ofrece los siguiente datos:

• Estado: Nos indica si la combinación en cuestión esta habilitada o no. Al empezar ell test todas las combinaciones salen como habilitadas, pero si vemos que alguna de ellas nos rinde muy poco podemos desactivarla para que el test siga con las variaciones restantes. Una vez deshabilitamos una combinación no podremos volver a habilitarla.
• Porcentaje de conversiones estimado: Este dato viene de la mano de un grafo o representación que es el que nos da las primeras conclusiones. En base a la página original como referencia, nos indica el grado de efectividad de la combinación. Todo muy visual. Verde, bueno. Rojo, malo. Esta claro, no? En realidad lo que nos indica es el ratio de conversión actual +/- un intervalo de confianza.
• Posibiliad de superar al original: Esta columna nos da informacion relativa a la capacidad de una combinación de superar en rendimiento a la original. Según la documentación de Website Optimizer, si la posibilidad de superar al original es mayor que el 95%, toda la barra nos aparecerá verde y tendremos con fiabilidad un buen candidato a reemplazar la página original. Este cálculo se efectua en base a un 95% de nivel de confianza por lo que si tenemos una combinación ganadora, podremos estar al 95% seguros que la combinación es mejor por algo mas que no sea por motivos aleatorios o suerte. Le podéis decir a vuestro amigo incrédulo que habéis encontrado algo que funciona mejor sin miedo.
• Mejora observada: La mejora observada suele fluctuar al inicio de los test o en aquellos con bajo tráfico. Nos expresa el porcentaje de mejora de una combinación respecto la combinación original, o lo que es lo mismo, nos da el valor de dividir el ratio de conversión de una combinación con el ratio de conversión del original. Debemos esperar a tener gran cantidad de datos para tomarlo en consideración.
• Conversiones/visitas: Pues exactamente eso, las conversiones y las visitas de cada combinación.

:: Secciones de página ::

Mientras que el informe de combinaciones nos evalua el rendimiento de las combinaciones (parece obvio jeje), el informe de secciones de página nos da interesantes apreciaciones sobre el impacto de las variaciones en cada sección.

En este informe obtenemos los mismos datos que en el informe anterior con un nuevo dato muy intersante:

• Valoración de relevancia: A mi entender este apartado es el mas interesante de todo el informe. Nos aporta el grado de impacto (del 1 al 5) de una determinada sección al experiemento. Si por ejemplo hago un test y encuentro una combinación ganadora, luego con este informe puedo inspirarme para determinar cual puede ser mi siguiente foco de atención. Imaginemos que este report nos dice que a seccion 1 (que es donde he testeado el headline) me dice que tiene una puntuación de 0 o 1, entiendo que las variaciones de esta sección eran bastante parecidas y que no han influido en el resultado del test. Quizá en el siguiente experimento seré más agresivo ene ste apartado… Aun así, ojo con este apartado. Un mal resultado no siginifica una mala sección. Quizá otra sección ha dominado la influencia sobre el resultado, pero no por eso nuestro headline, imagen, copy o lo que sea tiene que ser malo.

Hay veces que el ímpetu y las ganas de testear (o simplemente la inexperiencia) nos llevan a realizar test y test probando todo aquello que nos pasa por la cabeza. Los más avanzados en la materia deben estar sonriendo al recordar ese momento inicial dominados por la excitación… colores, copys, tamaños, posiciones, logos… ¡miles de posibilidades!

En el testing, al igual que en cualquier otra disciplina, es necesario establecer una planificación y unos objetivos previos.

Define tu objetivo

Antes de empezar cualquier tipo de experimento tenemos que tener muy claro que queremos conseguir con el. ¿Queremos más ventas? ¿Más clics? ¿Reducir el abandono en el checkout? ¿Aumentar la media de tiempo que los usuarios pasan en mi página? Estos son sólo unos ejemplos, cada experimento busca una finalidad y esta debe estar clara.

Cuantifica tu objetivo

Vale, sabemos lo que queremos conseguir, ahora nos falta especificar en que grado. No será igual el experimento que busque un aumento de conversión del 5% a uno que el 10 o 20. Hay que saber donde esta la meta y preparar la carrera en consecuencia. ¿Qué pasaría si metiéramos a Uassain Bolt en una carrera de 3000 metros o en una maratón? Aun siendo un súper atleta, toda su preparación está en base a otra disciplina por lo que lo tendría jodido…

Concreta como vas a conseguir lo que te propones

Para futuras consultas y referencias, define cuales son tu o tus páginas de test y cual es tu página de conversión. También deja muy claro que cosas o diferencias vas a poner a prueba y no te líes o vayas por las ramas. Define con rigor tus variables y sus variaciones. Si decides que vas a probar entre diferentes tipos de manzanas, no metas una pera J

¡Haz apuestas!

Pilla a un par de amigotes del departamento y apostaros una birras a ver quien adivina la combinación ganadora. Anota tus hipótesis. Además de un lúdico y divertido juego, luego podrás saber si aciertas o no, y como de cerca o lejos tienes tu visión del usuario.

Llegó el momento

Pon en marcha tu experimento. Involucra a todos aquellos actores que sea necesario e intenta que se sientan interesados y partícipes del experimento. Si no eres técnico necesitaras a alguien con conocimientos para que te lo prepare. ¡Genera las variaciones y dale al play!

Espera y analiza

Si espera, si. No tendrás resultados en 2 días. Tampoco en una semana. Usa herramientas como la calculadora de ratios de conversión y tiempos de duración de un experimento o espera a que GWO te diga que ya tiene datos fiables. Contrapone los resultados con tus expectativas e hipótesis. ¿Lo conseguiste? ¿Diste con una receta ganadora? ¿Es la que esperabas? Lo bueno del testing es que si aciertas te sientes lleno y feliz y si no… pues también Seguimos en el camino para entender a nuestro usuario y dimos otro paso más ¡bien!

Resumiendo

Planifica tus experimentos. Incluso puedes hacerte un planning anual con los que llevaras a cabo durante el año siguiente. En estas épocas nos prestamos a hacer planes J

Y recuerda:

1. Define tu objetivo
2. Cuantifica tu objetico
3. Define al detalle tu experimento
4. Anota tu resultado esperado
5. Crea tu test
6. Espera y analiza

Y luego… ¡Vuelta a empezar!

]]> http://www.trucosoptimizacion.com/index.php/2008/11/el-testing-organizado/feed/ 0