 ¡Caro! Surprise. ¡Chan! Dicho ni siquiera va a ser anahuella, se lo digo. ¿Estamos en directo? ¿Están empezados? Bienvenidos al... al verdadero track bueno. Yo así lo dejo... Yo os lo dejo caer. Y tomando asiento, tenemos con nosotros hoy a Doña Ana, Cirujano Garzo, que es, voy a leer porque siempre lo digo, diseñadora de negocio digital especializada en tipografía branding y WordPress. Además de eso, hace un montón de cosas. Es organizadora en... organizadora del grupo de WordPress Torrelojones, que va a haber sorpresitas, probablemente, pronto. Es embajadora desde hace poco de Piensas Solutions, uno de nuestros patrocinadores bronce. Y aparte con el señor Pablo Moratinos, tenéis ahí el billete a Chatanuba todos los lunes y algún jueves aparentemente. Y me hace mucha ilusión que Ana esté aquí porque ella estuvo en 2018, tenía charla a las 9.50. Ana estuvo en la work-out de 2019, tuvo charla a las 9.50. ¿Ah sí? Este año dijimos, vamos a dejarla descansar y de repente a última hora, curiosamente, un aponente no ha podido venir y tenemos a Ana Cirujano a las 9.50. ¿Esto quiere decir algo, no? Yo no voy a decir nada que cada uno ate sus cabos, pero nos alegra mucho tenerte a las 9.50 un año más y nos va a hablar de cómo diseñar el checkout para aumentar la conversión. Muchas gracias, Ana. Muchas gracias por venir a otra cabaixa. Espero que gocedes con este relatorio. ¿Cómo diseñar el checkout de bucos para aumentar la conversión? Antes de empezar con la charla, me voy a volver a presentar y no me ha presentado Juan muy bien, pero para que me os acordéis de mí. Soy organizadora de Torrelerones WordPress Meetup y este año en marzo de Torrelerones en la Sierra de Madrid hay una web a Madrid en media ahorita estáis allí, así que os esperamos para la Workup. El 18 de marzo. Soy diseñadora de negocio digital, trabajo con WordPress. Embajadora de Piensas Solutions, una empresa de hosting que tiene un producto especializado en WordPress gratuito, superchulo, profe entre sí media school de diseño, sobre todo de Figma y podcast en un vieta chatanuga todos los lunes a las 10 y media hablando de mucho WordPress, negocios online, diseño y marketing. Se invito también a que conozcáis el podcast si no lo conocéis. Y me podéis seguir también en Twitter en azirujar. El checkout es algo muy parecido a esto, esto sería un checkout convencional el checkout es la página de pago, donde se hacen las transacciones donde se realiza la compra de una tienda online. ¿Por qué esta charla así improvisada en el último momento cuando me llamaron? ¿Tienes que ver una charla? Algo muy concreto pero que tiene mucho potencial porque en una tienda online hay lo que se conoce como el Customer Journey el viaje del cliente que empieza que el cliente aterriza en la landing page que puede ser la que esté mejor posicionada si tenemos muy buen branding será la página de inicio si somos nuevos seguramente será la página de inicio pero si estamos haciendo alguna campaña o tenemos muy bien posicionado la página de producto estamos haciendo alguna campaña en Google AdWords por ejemplo ir directamente a la página de producto si tenemos un buen contenido en el blog pues será un artículo del blog entra el usuario por ahí y después puede ir a la página de producto o a la página de listados donde están los listados de los productos y se van cayendo por el camino cuando el usuario llega puede que abandone la tienda online en uno de estas páginas de todo el Customer Journey y al final pues llega al checkout si ya ha llegado al checkout es que ha pasado todas esas barreras entonces optimizar el checkout si solo podemos optimizar una cosa en una tienda online vamos a empezar por el checkout busqué para esta charla cuál es el porcentaje de abandono del carrito Google me decía en castellano que era un 84% con 98% de abandono del carrito si lo buscaba en inglés pues era un 69,57% yo siempre hago diseño basado en datos claro, depende de quién haga el estudio pues te dice una cifra u otra el estudio de Fla101 que hace un estudio de e-commerce todos los años con e-commerce españoles también arroja una cifra del 70% de abandono del carrito esto que es por las personas que ya están ya han hecho todo ese Customer Journey y llegan están con la tarjeta en la mano y abandonan solo compra un 15% o un 30% a todos los demás los perdemos hay mucho margen de mejora ya en esa parte final del Customer Journey claro, haces diseño basado en datos pero si es una tienda nueva qué datos tienes hay que medirlo todo lo que no se mide no se conoce lo que no se mide no se puede mejorar pero es una tienda nueva estoy diseñando una tienda no tiene datos, nos basamos en los estudios que se hacen de otras tiendas resumen, si quieres mejorar tu tienda online empieza por el checkout si ya con que sepamos esto esto sería un checkout a luso fijaos que el checkout es un proceso muy estandarizado todas las tiendas tienen su checkout y en todas hay que recoger más o menos necesitamos los datos del cliente para poder cobrarle y sin embargo a pesar de ser tan estandarizado fijaos que no se consigue en la mayoría de los casos diseñar muy bien porque la tasa de abandono como hemos visto es súper alta como algo tan estandarizado y que siempre hay que tener en todas las tiendas funciona tan mal que hay realmente una conversión muy baja cuando el usuario ya ha llegado aquí a mano y sin embargo se cae mucha gente claro muchas veces vamos pasando por todo ese customer journey y sabemos que vamos a tener la oportunidad de antes de darle al botón de finalizar compra de pensarnoslo de yo voy a ir añadiendo productos al carrito voy a continuar, voy a informar de este producto este otro, yo voy añadiendo cosas al carrito que ya sé que hasta que no le de al botón de finalizar compra no me van a cobrar nada entonces muchas veces simplemente para ver un poco cuál es el precio final porque a veces te añaden los gastos en video o te añaden muchas veces vamos a checkout pero no tenemos la mejor intención de compra entonces a través del diseño podemos, ya que tenemos ahí al usuario que igual no tiene intención de compra ya que lo tenemos ahí mediante unas buenas prácticas de diseño de experiencia de usuario podemos hacer que el usuario efectivamente compre aunque en principio estuviera sólo llegando al checkout sabiendo que hasta que no le de al finalizar compra lo va a comprar entonces vamos a ver estos consejos para una vez que está aquí el usuario que al final le de al botón de finalizar compra porque hay tanta baja conversión vamos a ir viendo cosas que deshacen mal y cómo se pueden hacer bien el checkout es un formulario a que le gusta rellenar formularios a nadie con el desarrollo rellenar un formulario con el cual hay que hacerlo lo más fácil posible todos los formularios tienen que tener sólo una columna esto no sólo para checkout sino para cualquier formulario que diseñemos porque si le ponemos dos columnas al final el usuario tiene que rellenar los campos bajar y luego tiene que subir a continuar rellenando campos siempre todos los campos en una única columna y que no tengamos que estar subiendo y bajando para cumplimentarlo la columna a la derecha tenemos un resumen de la compra pero no tenemos campos que cumplimentar es sólo cosas que nos dan información sobre lo que estamos comprando eso es el primer tip siempre en una columna he dicho que cuanto más fácil mejor cuanto más sencillo mejor cuanto más minimalista mejor no pidamos datos que no sean estrictamente necesarios los clientes siempre nos piden que unamos muchas cosas ahí ponme aunque no sea un producto para enviar es un producto digital pero vamos a pedirle el código postal porque así luego hacemos un estudio de en qué provincia a qué provincia vendo más y así eso me sirve para personalizar y a los gallegos les hablo en gallego a los vásculos les hablo en luzquera pero eso se lo podemos pedir después en una conversación posterior con el usuario le podemos fidelizar ahora en la primera compra antes de tener los datos del usuario lo que queremos es que compre que nos dé por lo menos el correo electrónico y que haya comprado algo ya después le podremos pedir lo que queramos en la primera compra sólo la información imprescindible no solicitar información de envío si es un producto digital ya pediremos después lo que haga falta información de facturación muchas veces como particulares no me pidas los datos de facturación incluso quítalos y si quieren factura ya nos pedirán la factura cuántas veces hemos escrito para que nos den una factura bueno esto todo siempre disclaimer, voy a dar muchos datos de cosas que pueden ser mejor y por qué son pero cada caso es distinto porque por ejemplo si es una tienda online un negocio especializado para profesionales autónomos claro yo si no veo si estoy comprando algo para un cliente o relacionado con mi actividad profesional y no veo claramente que me voy a poder declarar el gasto a lo mejor no hago la compra en esa tienda yo sí que necesito ver si estoy comprando algo como autónoma que me pide la información de facturación a ver si luego esto no me voy a poder declarar el idiota entonces pensemos hay que pedir facturación a veces sí a veces no normalmente es mejor quitarlo pero los datos no son imprescindibles ponemos primero arriba todos los datos que van a cambiar el precio total del producto el usuario como decíamos antes muchas veces llega al checkout para ver cuánto es el precio total entonces vamos a ponerlo siempre arriba si tenemos un cupón de descuento si tenemos que según el tipo de envío si es estándar o express o si lo envuelves para regalo si cobramos más o menos según el envío que se seleccione también vamos a poner arriba para que inmediatamente el usuario vea siempre tenemos que quitarle el miedo al usuario y que siempre sepa que lo que está comprando es lo que quiere comprar entonces todas estas opciones que modifican el precio las ponemos arriba ojo con el cupón tiene que estar arriba si alguien tiene un cupón tiene que encontrar fácilmente dónde introducir el cupón pero no pongamos el cupón con un campo grande enorme por supuesto si no tenemos cupones lo quitamos del todo y si tenemos cupón lo ponemos para que el que lo esté buscando lo encuentre con un desplegable pero no lo ponemos muy visible porque si lo ponemos muy visible el usuario se va a ir a buscar cupones de la tienda no sé qué entonces se va a ir y ya se va a poner a ver vídeos de youtube y le hemos perdido entonces sería la recomendación hay un 30% de abandono de checkout cuando te piden que te registres no queremos que la gente que las tiendas tengan nuestros datos y cuando nos piden registrar me tengo que registrar para comprar nos molesta tanto que abandonamos un 30% que es altísimo entonces si facilitar que puedan comprar sin registrarse o que puedan registrarse con su cuenta de google hay muchos plugins para esto los puntos de fuga, hablamos con lo del cupón el checkout hay que personalizar la plantilla para que el encabezado y el pie de página sean diferentes en la página del checkout distintos a los del resto de la tienda online el logo lo podemos poner para confirmar al usuario que sigue estando en nuestra tienda quitarle ese envidio que sepa que está comprando lo que quiere pero le quitamos el enlace quitamos todo el menú principal que no se vaya a buscar nada ni a comprar otra cosa la política de reembolso y de evolución es muy importante que la pongamos porque muchas veces podemos comprar porque estamos tranquilos de que luego lo vamos a poder devolver entonces la incluimos en el checkout pero en una ventana modal no hay otra página son cosas que tenemos que poner para darle tranquilidad al usuario pero las ponemos siempre con un pop up y que no se vaya tenemos que evitar los puntos de fuga en cuanto al pie de página es obligatorio poner los enlaces a las páginas legales aviso legal, política de cookies política de publicidad eso no los podemos quitar pero yo creo que no son puntos de fuga porque quién se va a ir a leer política de publicidad, eso no es un punto de fuga porque nadie hace click ahí bueno, si hacemos click ahí cuando estamos haciendo la web a un cliente para inspirarnos en los textos legales de otras páginas pero solo nosotros la gente normal no visita esos enlaces pero igualmente en el checkout los ponemos en una ventana modal en un pop up para que nadie se vaya como decía antes y para eso en la ventana de la derecha le vamos dando la información que necesita el usuario para confirmar los gastos de envío ya con Amazon nos hemos acostumbrado que los gastos de envío sean gratuitos pues vamos a incluirlos en el precio si podemos decir gastos de envío incluidos pues mucho mejor y que esté claramente o si tienen si hay alguna modificación de envío pues que claramente aparezca el tiempo de envío también fue muy importante incluir también el tiempo de procesado porque muchas veces se pone el tiempo que tarda la paquetería en llegar pero si tardas un día en procesar el producto por cualquier motivo también hay que incluirlo en el tiempo que va a tardar el usuario en recibirlo tengo que saber cuando voy a recibir el producto y todas estas cosas que estén muy claras las valoraciones también confirmamos confirmamos al usuario que está comprando un producto que tiene buenas valoraciones las facilidades de pago también es alucinante el porcentaje de abandono cuando no hay facilidades de pago mucha gente leía ayer en twitter que hay un 30% también de abandono cuando no se puede pagar con Google Pay perdona Apple Pay decía yo si no tengo Apple Pay porque Apple Pay tiene tus datos y entonces no tienes que rellenar nada ya directamente pagas con Apple Pay y entonces hay que dar todas las facilidades es que Paypal me cobra mucha comisión ya a ver será mejor tener Paypal que la gente confía en Paypal porque es muy conocido será mejor tener Paypal y que te cobre más comisión que no tenerlo y que no realice la compra entonces dar facilidades incluso transferencia muchas veces hay clientes que prefieren pagar con transferencia entonces todas las facilidades de pago que podamos y además que estén bien visibles la fiabilidad es muy curioso cómo a través del diseño podemos hacer que el cliente se sienta más seguro hay otros estudios que dicen que sombreando el campo donde hay que introducir la tarjeta de crédito el usuario piensa que ese campo está securizado como está sombreado como tiene un borde más grueso piensa que ahí justo es donde actúa el certificado se sale le ponemos el candadito y dice sí tiene candadito entonces es seguro las tiendas fake también tienen el candadito el sombreado pero bueno es que están muy bien hechas entonces siempre vamos a hacer eso cambiar el aspecto para dar más confianza y todos estos todos estos son todos los trucos igual simplemente haciéndole una foto a esta diapositiva ya tenéis toda la infografía de la checklist de cuando hagáis un checkout en qué cosas hay que pensar como he dicho antes en el disclaimer dices ah bueno bueno entonces nada yo hago todo esto en todas las tiendas y ya está tengo un checkout optimizado que va a convertir que va a bajar la tasa de abandono bueno hecho también algunos comentarios sobre esto antes depende de la tienda muchas veces decimos no pide los datos de facturación bueno depende pues pon los gastos de envío bueno depende que si tienes un gasto de envío muy alto por lo que sea entonces siempre cada tienda online es un mundo y hay que pensarlo pero esta checklist nos ayuda a saber en qué hay que pensar concretamente y quiero terminar con una reflexión porque la optimización de la conversión nunca tiene fin una vez que tengamos echada la tienda pues se pone a medir hacemos test a b si efectivamente lo que hemos diseñado en base a los estudios de otras tiendas para nuestra tienda vale o no vale así que no dejéis de medir contact con los analistas que nos da mucha información a los diseñadores para vender más y raciñas si tenéis alguna pregunta que sea fácil por favor es el momento ahora hay preguntas ¿influye que se pague fuera de la tienda o sea en el ratio de conversiones que salte a resis me refiero claro siempre que salgas de la tienda es peor el plugin de jose conti el nuevo oficial de resis no te saca de la tienda aunque tengas un tpv del banco y ahora es el que recomiendo que se use quería saber si realmente es importante y da confianza que esté en la tienda que no vayas a la web de resis todo lo que sea, mantener al usuario en nuestra tienda, en nuestro dominio va a ayudar a que se realice la conversión porque si te vas al banco ya en la página del banco tú no tienes control lo importante es tener control sobre el usuario no me sé el dato lo podría buscar pero estoy convencida de que es así aquí otra pregunta hola muchas gracias que penses de Apple Pay de tenerlo solo en el checkout o integrado en las páginas del producto y segundo si conoces alguna solución para que cuando pagues con Apple Pay puedas tener campos costumizados de checkout porque normalmente si vas a Apple Pay no tienes que colocar los datos ningunos pero también no tienes como recoger campos como el NIF o otros así si ponernos en la página del producto o ponernos en checkout habría que verlo, habría que estudiarlo no te sé, no me atrevo a darte una respuesta y sobre plugins para optimizar el pago con Apple Pay yo le digo al desarrollador que trabaja conmigo y que esté optimizado por favor entonces ya se encarga el desarrollador no conozco ningún plugin el marrón de los plugins se lo dejo a la persona que trabaja conmigo y yo diseño y pido cosas pero los plugins aquí otra pregunta hola buenos días eres más partidaria de multistep checkout dividir los pasos en varios o one single page porque con eso he visto bastante debate y discutir con diseñadores como decís los galleros depende entonces lo que hay que tener en cuenta son muchos pasos y muy necesarios tienes que pedirle todo a un cliente porque es una tienda que realmente necesita no puedo quitar ningún campo pero es que tiene que ser minimalista pero es que te necesitamos todo si no no puedo enviarle el producto vale pues por lo menos vamos a dividirlo en pasos para que sea esto un poco más le decimos cuantos pasos son lo dividimos es más asequible si tienes pocos campos no lo dividas en pasos porque ya es que se le hace bola y luego para pedirme dos cosas es un poco de coherencia en eso si son muchos dividelo vamos por partes una columna y que el usuario vea que los que son un primer vistazo alguna preguntilla más todo claro todos vais a poner en práctica y vender mucho más tú quieres una pregunta o no lo vas a poner en práctica no no hablaste de colores porque los diseñadores usualmente hablan todos de colores tú optaste por no hacerlo porque no te ves de tiempo o porque para ti no es importante es muy importante en este caso estaba hablando de diseño de más experiencia de usuario que diseño visual pero es verdad que como la charla tuve que preparar ayer improvisado todo lo que he podido pero es muy buena pregunta me das pie para explicar una cosa que sí que estaba en el esquema que veis que todo tiene grises escala de grises es el botón de finalizar compra que tiene el color de acento de la ponte Workup el color corporativo usamos el color de acento para el botón de finalizar compra y solo para el botón de finalizar compra bueno y el loco también que está ahí pero bueno no molesta la vista ahora mismo donde se os ha ido directamente al botón de finalizar compra gracias a parte del tamaño gracias al color también por supuesto el jerarquía visual imprescindible es verdad muchas gracias José José es que es muy difícil alguna última pregunta alguien no pues muchas gracias Ana