Blog

Cómo hacer crecer los ratios de conversión digital

En los años 90, El Corte Inglés revolucionaba el comercio, todo para alcanzar altos ratios de venta, gracias a las promociones de la época, y a los esfuerzos para crear una verdadera experiencia de usuario/compra. Ellos nunca contaron minuciosamente el número de visitates de sus tiendas, ni las ventas que generaba cada visita, pero les iba bien ¿para qué iban a hacerlo?.

En la actualidad, casi todo aquello ha quedado olvidado y lo que se busca es el incremento de las ventas en la nube de internet, atrayendo más visitantes a las webs y potenciando las llamadas conversiones, que no son otra cosa que el ratio entre visitante y comprador. Y es que este valor es más importante que el Ebitda. Concretamente el KPI más importante para los que trabajamos en el sector digital.

Este año 2018, una importante empresa de negocios en internet, FLAT101, ha publicado un estudio con los datos de 476 empresas digitales. Esta analítca nos ayuda a la toma de decisiones para los que buscamos alcanzar altos valores en nuestras conversiones ( Accede al estudio desde su web )

Los aspectos más relevantes y útiles que he encontrado son:

  • Si inviertes en publicidad, hazlo el miércoles. Es cuando más se compra.

  • Empieza a ser hora de olvidarnos de los diseños específicos para tabletas, estas compras solo suponen un 8% del total. Este tipo de compras está sufriendo una pronunciada caída, ya que el año 2015 alcanzaron un 13%.

  • Si tienes más de un 1% de conversión, no sufras, disfrútalo, por que estas por encima de la media.

  • La mayoria de los visitantes acceden desde el móvil (54%), pero estos tienen un índice de convesión más bajo que los acceden usando su ordenador, quienes venden cerca de una tercera parte más.

  • No lo pongas demasiado fácil a la hora de comprar, un carrito con tres pasos convierte más que uno con un único paso, la diferencia es pequeña, pero cuestiona la moda de la compra directa.

  • El buscador interno es posible que no tenga mucha utilidad, pero dentro de los que lo usan (6%) convierte mucho, cerca de un 23%.

  • Invierte en referidos en vez de compra directa, interesa, ya que este sector ha crecido sus conversiones un 33% más.

  • Tiempos dificiles para el desarrollador Front; el navegador que más convierte para compras on-line es el Edge, a pesar de las complicaciones que dan los navegadores de Microsoft y la alternativas de Firefox o Chrome.

Esta información es general y no está segmentada, y por ello debemos leernos el informe para obtener diferentes apoyos a las decisiones dependiendo del sector en el que estamos, o por el cuartil del precio del pedido y facturación de la compañia. Pero en lineas generales estas indicaciones pueden ser de gran ayuda en un ecosistema donde la venta y la adquisición de potenciales clientes por medio de Internet esta crecienciendo y canabilzando a la venta tradicional.

Random storage de Amazon

La gestión del stock en los almacenes de distribución puede parecer un tema banal, carente de complejidad y es que, desde hace cientos de años, la distribución del stock siempre se ha realizado de la misma manera; agrupando cada referencia en un determinado sitio. Sin embargo, ahora parece que esto a cambiado y quien ha introducido esta transformación ha sido la innovadora y avanzada compañía Amazon.

La disposición de los productos en cualquier almacén se podría comparar con la de un supermercado. Nos recorremos los pasillos, buscando los productos que tenemos anotados en nuestra lista de la compra. Examinamos cada balda y vamos adquiriendo los productos que necesitamos e introduciéndolos en nuestra cesta, hasta completar el pedido. En un almacén la magnitud es muchísimo mayor; seguramente no cojas los productos con la mano, utilizarás un portapalets o brazo mecanizado. A su vez, no depositas el género en una cesta sino en la plataforma de un caminión y en vez de disponer de atractivas etiquetas te guíarás por el Kanban.

Habitualmente, en un almacén, cada producto se encuentra organizado junto al resto del stock correspondiente a esa referencia. Por el contrario, Amazon no usa este sistema, se puede observar que cada item se encuetra solo, el resto de productos de la misma familia se encuentran repartidos "aleatoriamente" por todo el almacén. A simple vista, puede parecer un completo caos, complejo y difícil de sostener, pero se trata de un sofisticado sitema que, lejos de ser aleatorio, se apoya en un sistema informático que nos va diciendo, en cada momento, dónde se encuentra cada unidad.

En las sigientes imágenes, observamos la comparativa entre un almacén tradicional y otro de Amazon.

Distribución clasica en almacenes
Distribución clasica
Random storage Amazon
Distribución Amazon

Veamos las ventajas. Cuando caminamos por los pasillos de cualquier supermercado, nos vemos obligados a recorrer varias veces el mismo lugar. primero busco el primer articulo de mi lista, despues busco entre los pasillos el segundo articulo, después el tercero. Dado que todo el estocage de cada artículo se encuentra ubicado en el mismo sitio, resulta inevitablemente pasarnos varias veces por el mismo pasillo, con la consiguiente pérdida de tiempo que esto supone. Para evitar esto, Amazon se apoya en la aleatoriedad de los productos para que siempre haya alguna unidad de cada producto cerca de otras referencias. De esta manera, se reduce el tiempo que dedicamos a viajar entre las lineas de almacenaje.

En la siguiente imagen se observa cómo para un pedido de tres productos, el encargado solo debe de recorrer un pasillo en vez de dos o tres, que recorrería con el sistema clasico.

Random storage Amazon
Camino en Amazon para completar un pedido de una unidad de cada producto

Ref y más información: http://twistedsifter.com/2012/12/inside-amazons-chaotic-storage-warehouses/

Procesando CSS

CSS es un lenguaje diferente, no hay for, ni muchas instrucciones de un lenguaje de programación. Pero llegar al punto de no tener ni variables, en la actualidad es casi demencial. Esto es normal cuando se empezo a crear CSS solo servía para pintar el HTML que estaba en la pantalla, pero en la actualidad lucha con javascript e incluso crea sitios web diferentes para móviles. El CSS debe de evolucionar.

Y asi ha sido y CSS ha evolucionado aunque no lo veamos. Desde hace años que existen lenguajes que nos ayuda a organizarnos, a programar y en definitiva a ser más eficientes a la hora de preparar nuestros CSS en un proyecto Web. Hay varias herramientas, fundamentalmente esta LESS, Styluss y SASS. Y a continuación hablamos de como nos ayudan y su necesidad.

¿Que tiene en común LESS y SASS?

La creación de variables, para mi es el punto fundamental. En varias empresaas donde he estado han cambiado su imagen corporativa, donde era un azul claro, de la noche a la mañana se convertia en azul oscuro. Entonces abrías el Notepad++ todos los ficheros CSS y remplazabas el hexadecimal. Y lo normal es que cambies hasta algún estilo de la base de Bootstrap que no querías. En un proyecto grande ayuda tener todo concretado con variables, en mi caso hasta las fuentes estan mapeadas en varibles de LESS

Otro punto que en este caso no es para que nos ayude en el desarrollo sino para al usuario, el permitir que se compriman los ficheros CSS y unificarlos es un único fichero es obligatorio para pasar test de velocidad e incluso posicionamiento SEO. Explicandolo mejor, imagenemos un proyecto grande, para la maquetación igual que usaremos muchos ficheros tpl o html en CSS deberiamos de acabar con muchos por el tema de la reusabilidad, gestión de errores y evitar el código espagueti. Pero esto nos obliga a insertar multitud de import por cada página que carguemos, no es bueno tener que llamar a 15 o 20 ficheros.css. Tarda más en cargar la web, al final lo del código espagueti es lo mejor en producción. Y para unificar las dos cosas necesitamos un preprocesamiento, que unifique y comprima el CSS solo en producción.

Mi experiencia y opinión

Es complicado, en la actualidad hay varios frameworks de Php y Python que incorporan estos sistemas, pero en proyectos grandes tengo dos gratas experiencias. La primera es usando lesscss-java lo añadimos como una dependencia con Maven y es fácil de usar. Pero tiene una pega, cuando estas probando en el navegador y quieres con F12 ver un detalle, no sirve la linea o el punto del CSS que estas viendo, es decir para el desarrollo puede ser lioso, pero esta todo preparado para un pase a producción. Otro sistema más simple es usar el programa con GUI Winless. Trabajas con los ficheros sin comprimir y cuando quieres compilarlos con el programa te generas el fichero CSS final.

winless

Arquitectura software hexagonal.

Hay varias formas de crear un proyecto software, igual que en un proyecto de edificación se realiza un proyecto con unos mapas y una idea, en la informática no debemos de iniciar un proyecto escribiendo en un único fichero tu código fuente. En los proyectos pequeños no tendras muchos problemas pero en un proyecto grande puede que tengas que invertir muchas más horas de lo necesario.

Que es la arquitectura hexagonal

Es una forma de programar que cambia la forma de diseñar y escribir código, ya que estamos acostumbrados a programar encima de un framework, usamos las capas que conocemos, que suelen ser Vista, Modelo, Controlador, y todo ello encima de un framework que aglutina todo el proyecto, como es Spring o Synfony..

arquitectura hexagonal

En la Arquitectura hexagonal esto cambia, ya que no esta encima de un framework sino este esta separado y se usa , pero no se extiende como se ve en la imagen. Es una metodologÍa diferetente ya que es un sistema que el controlador esta fuera y en el centro estÁn los servicios. De esta forma que el controlador es que esta dependiendo del FrameWork y no el centro que el dominio (lo que conocemos como servicios).

Esto que ayuda a evitar el acoplamiento, podemos probar la applicación sin necesidad de usar el controlador, nos permite el cambiar los sistemas que usa la aplicación igual que separamos la base de datos en MVC aquí separamos todo, la conexión a microservicios, envio de emails, logs..

Opinión

Es una arquitectura que tiene mucha más complijidad de la que estamos acostumbrados, pero que a la vez es sencilla de entender, ya que se basa en una idea de capas, niveles de capas.

Creo que una arquitectura que es muy valida y necesaria en proyectos grandes, en proyectos pequeños creo que puede ser más costoso el crear la arquitectura hexagonal que el seguir una infrastructura basica. Esta arquitectura puede ayudar a solventar los problemas de mantenimiento, pero si tenemos la seguridad de ser un proyecto corto como una migración de datos, el tiempo que usemos en la creación de esta infrastructura no compesara el coste ya que no tendrá mantenimiento.

En conclusión: Los proyecto en la actualidad cada vez son más grandes tanto por su complejidad como por los servicios y esta arquitectura ayuda de mejor manera que algunos sistemas actuales en su construcción.