Mejora la experiencia de usuario con 6 sencillos consejos

Ofrecer al usuario la mejor experiencia posible en la visita a nuestra web pasa por ser uno de los objetivo fundamentales para optimizar el rendimiento de nuestra web. Podemos tener el mejor producto al mejor precio y podemos no ser rentables. ¿Por qué? Por la forma en presentarlo, por el tiempo que tardamos en hacerlo, por la dificultad en el proceso de adquisición, etc… Hay mil factores que tenemos que cuidar al detalle para conseguir optimizar la conversión… y cualquiera de estos detalles influirá en la ecuación final según tomemos una decisión u otra.

Seguro que tenemos un restaurante favorito al que nos gusta volver de vez en cuando porque el ambiente es ideal, la comida es perfecta y el trato exquisito. Posiblemente no sea el más barato de la zona pero el pensamiento que nos provoca el momento de salir del local es que hay que ir buscando hueco en la agenda para volver. El diseño, el ambiente, la velocidad en el servicio, los platos… todo ello aderezado trasladémoslo de forma análoga a la web: El diseño de la misma, la velocidad de carga, el encontrar toda la información necesaria siempre a mano, la presentación del producto…

En este mundo multicanal, aquello que funciona en el llamado mundo offline hay que trasladarlo al mundo online. Un gran experiencia de usuario en nuestra web garantiza que el usuario encuentre todo aquello que está buscando de forma fácil y sencilla. Garantiza una visita recurrente y, en los casos más satisfactorios, podemos convertir al usuario en prescriptor de nuestra web y servicios.

Hay infinidad de detalles en UX que deberíamos de analizar en cada uno de los proyectos, pero por aquí van una serie de tips de obligado cumplimiento que evitarán errores muy comunes que se repiten con más frecuencia de la deseada:

CLARIDAD. SENCILLEZ.

Debemos de ser claros con el objetivo de nuestra web. Si vendemos tornillos, debe de quedar claro que nos dedicamos a ello. Si somos un ecommerce de calzado de mujer, tiene que quedar claro cuál es nuestro nicho de mercado y qué es lo que vendemos. La sencillez hace que el usuario en un primer vistazo tenga una concepción más o menos precisa de lo que va a encontrar en la web y no pierda el tiempo buscando aquello que necesita.

LLAMADAS A LA ACCIÓN EFECTIVAS

Allí donde queremos que el usuario haga algo, pongámoslo sencillo y visible. Normalmente el usuario tiene asumido una serie de estructuras mentales según el tipo de web al que se está enfrentando (blog, corporativa, ecommerce, …) y espera más o menos las llamadas a la acción en sitios estándar. No inventemos ni se lo pongamos complicados: Llamadas a la acción visibles y concretas.

OPTIMIZA IMAGENES

La velocidad de carga es crucial… y uno de los factores que más influyen en ello es las imágenes que mostramos en nuestra web. Cada segundo que el contenido no se ha cargado, es una vía de escape para el usuario y una de frustración. Optimiza procesos para que las imagenes se muestran tal cual el usuario las va a necesitar: ¿Para qué cargar una imagen de 1200 pixels de ancho si la vamos a mostrar a 600 px?

OPTIMIZA LA CARGA

Aunque las imágenes son elementos cruciales… optimiza el resto de elementos para mejorar la carga. Utiliza sistemas de cacheo (cualquier CMS presenta plugins y módulos de fácil configuración que cachean contenidos). Minimiza la carga de CSS, cargar solo aquellos elementos imprescindibles (por ejemplo, cargar las imágenes según demanda y no cargar todo el contenido aunque no se vaya a mostrar).

DISEÑO COHERENTE

Propón un diseño coherente con tu marca. La imagen que traslades debe de ser igual en todos los canales, de nada vale cuidar la presencia offline si online apostamos por otro concepto. Crearemos confusión en el usuario.

Muestra realidades de tu empresa/marca: Demuestra cercanía y tu lado personal. En la medida de lo posible evita el uso de las típicas imágenes de stock que todos hemos visto de forma recurrente en miles de webs

PIENSA EN MOBILE

Pensar en navegación mobile es pensar en el presente y casi en términos de pasado. No es hablar de futuro como algunas empresas parece que quieren enfocarlo. El uso de los dispositivos móviles están creciendo día sí dia también y el tráfico a las webs son mayoría en estos dispositivos. ¿Por qué seguimos diseñando para desktop cuando el canal de visitas más importante en la mayoría de las ocasiones es el mobile?

Este último apartado, resumido en un párrafo, da para más de un post hablando de ello. De las mejoras a incorporar en el diseño mobile y de los errores comunes que se cometen a la hora de trasladar un diseño pensado para desktop a un diseño para dispositivos móviles.

Con estos 6 sencillos consejos (aunque algunos no tanto), seguro que conseguimos mejorar la experiencia de usuario en nuestra web… y ya sabemos que una mejor UX solo puede aportarnos experiencias positivas.

Los pasos en el carrito de la compra

Aquellos que seáis lectores de este blog me habéis visto utilizar varias veces la frase de “MENOS ES MÁS”. Es un lema que suelo aplicar a muchos de los conceptos sobre desarrollo web, usabilidad, diseño… la cosas deben de ser claras y sencillas. Información directa y nada rebuscada. Todo lo importante tiene que estar accesible.

En este caso quería centrarme en el proceso de confirmación del carrito de la compra que encontramos en nuestro ecommerce. Cada proyecto hay que entenderlo como algo específico pero en líneas generales soy partidario de reducir al máximo los pasos que un usuario tiene que ir confirmando hasta llegar a efectuar el pago y confirmación final de nuestro pedido.

Proceso de checkout en un paso

 

A nivel de diseño y estructura del ecommerce, sería recomendable que durante el proceso de finalización de la compra, el entorno que ve el usuario sea totalmente limpio, orientado a la conversión, sin distracciones: Botones de redes sociales, otras llamadas a la acción que pudiéramos tener en nuestra web, etc… sería recomendable que no estuvieran visibles (y/o accesibles): Que el usuario se centre en la confirmación del pedido.

En primer lugar, es completamente lógico que si dedicamos 4 pasos en lugar de 1 tenemos más opciones de que en alguno de ellos el usuario desista de la compra y abandone la cesta. Si sólo hay que completar uno, facilitamos el “CHECK OUT & GO” y evitamos puntos de fuga.

Un paso implica sencillez, líneas directas… hay que facilitarle la vida al usuario. Además, si analizamos muchas tiendas online, muchos de los pasos intermedios que damos hasta la confirmación final son evitables porque sólo se ofrece una opción de transporte o una opción de pago… ¿Qué tipo de selección es aquella en la que hay una sola opción? ¿Por qué no suprimimos esos pasos intermedios en los que únicamente tenemos que hacer clic en el botón de “Siguiente” porque no tenemos que seleccionar nada?

checkout

Ejemplo de proceso de checkout realizado en un solo paso. En una sola pantalla el usuario aporta toda la información necesaria. Sólo una llamada a la acción claramente identificada (“PLACE ORDER”)

En el caso de que sea necesario la implementación de un proceso de confirmación de pedido en varios pasos, es totalmente necesario tener información proveniente de la analítica web de cómo se comportan dichos pasos, en que puntos hay más abandonos. Tenemos que saber qué está pasando en nuestra web.

Por ejemplo, si no hacemos mención a los costes de envío de nuestro pedido y en el paso dedicado al transporte mostramos el precio y este sale a un precio desorbitado (o que sencillamente el usuario no ha tenido en cuenta), es factible que en ese punto sea un punto de abandono de carritos. ¿No sería más recomendable informar de los gastos de envío de primera mano? Así el usuario tendría asimilado el coste del envío durante todo el proceso de la compra y no se llevaría “sorpresas desagradables” que harán que abandone su idea inicial de compra.

Otro tema relacionado con la sencillez en el proceso de compra es optimizar el proceso de alta/registro/login del usuario. Si es la primera vez que compra, que los datos que nos facilite cuando esté completando su pedido sirvan para darse de alta (sin tener que colocar la información dos veces) es lo más óptimo. Como siempre, los datos a solicitar que sean los justos y necesarios. Ni más ni menos.

Además, otros factores a tener en cuenta durante el proceso del carrito de la compra son, por un lado, las recomendaciones de productos a añadir al carrito en base a lo que en este se encuentran (crosselling) y por otro la gestión de carritos abandonados, que no deberían de caer en saco roto y ser el punto de partida para acciones de recuperación de los mismos (por ejemplo, recordar el carrito que se ha dejado a medias y puede recuperar de forma sencilla, el ofertarle algún tipo de descuento o promoción por completar el mismo, etc…). En definitiva, si ha picado, conseguir la pieza… siempre bajo los parámetros de la cercanía y sin ser intrusivos. Ser pesados puede conseguir el efecto opuesto: Que no nos compre ahora… ni nunca.

Diseñando la ficha de producto perfecta

En el momento de diseñar una ficha de producto para nuestro ecommerce hay que aplicar una máxima: Menos es más.

Hay que olvidarse de estructuras sobrecargadas y coloristas, dejando bien claro nuestro producto, las ventajas del mismo, como conseguirlo y las opiniones de los usuarios:

  • Titular de nuestro producto atractivo. Que quede claro que es lo que estamos ofreciendo
  • Imágenes atractivas de nuestro producto. Si es necesario invertir en un profesional o en un estudio fotográfico para que las fotos de nuestros productos queden sumamente atractivas, será una buena inversión. Siempre es más fácil vender aquello que entra directamente por los ojos
  • Claridad y concisión en describir nuestros productos. Para aquel que requiera más información le dejaremos la opción habilitada al efecto, pero de un primer vistazo tienen que verse las bondades de nuestro producto.
  • Un mensaje de llamada a la acción importante: “Compra ahora”, “Resérvalo ya”, … acompañados de botones de llamadas a la acción que indiquen los siguientes pasos a realizar (“Compra”, “Reserva gratis”,…) altamente visibles y accesibles.
  • Sencillez. Hay que tratar de obviar todos aquellos elementos que puedan suponer una distracción en la navegación de la ficha de producto (redes sociales), sin embargo si que es recomendable incluir elementos que aporten confianza al usuario (pago seguro, sellos de confianza online, …)
  • Opiniones de usuarios. Es muy interesante mostrar las opiniones de los mismos ya que aportan ese plus de personalización y confianza a nuestra tienda. Evidentemente podemos encontrarnos con opiniones negativas que hay que saber gestionar: Si nuestro producto no está a la altura es una potente herramienta de feedback, si son malintencionadas, la comunidad –por norma general- sabrá discernir cuales son intencionadas o no. Lo mismo que si solo admitimos aquellas opiniones superpositivas… la audiencia no es tonta.

 

En resumen, los detalles anteriores se podrían resumir en el siguiente diseño:

 

mockup-ficha-producto

 

Estos elementos son básicamente desde el punto de vista estético, aunque muchos de ellos tienen consonancia con indicaciones SEO que mejorarán el posicionamiento de nuestra landing de producto

  • Uso de tag H1 único por página, en este caso para la keyword de la misma donde se incluirá la ficha de producto
  • Usar densidad de keyword dentro de la descripción de nuestro producto, a través de la pequeña descripción y, sobre todo, a lo largo de esa información más ampliada que dejamos para aquellos que estén más interesado en información de nuestro producto. Muy importante destacar que esta información debería de ser única (y propia) y no contenido duplicado para evitar penalizaciones del algoritmo de Google.
  • Las imágenes utilizadas debería de estar correctamente etiquetadas (ALT) y correctamente optimizadas. Una imagen no optimizada ralentiza la carga de la web, perjudicando la experiencia de usuario y afectando de forma negativa al posicionamiento de nuestra web atendiendo a factores de WPO

Sencillez. Simplicidad. Cero distracciones… Así debería de ser el diseño de una landing optimizada de producto

El principio de menos es más aplicado al diseño web

En el campo del desarrollo web, como en casi todo, las tendencias de diseño están a la orden del día. Hemos pasado de estructuras recargadas, animaciones por doquier, sonidos que nos persiguen y poco estructuración de contenidos a desarrollos limpios, puros, sencillos y elegantes, de fuentes claras y fáciles de leer e imágenes grandes y atractivas.

El concepto de menos es más aplicado al desarrollo web. Menos elementos que no aportan nada (salvo perdernos en la navegación) para obtener más conversiones, mejor experiencia de usuario.

Las influencias de los nuevos sistemas operativos están presentes en el diseño web. Quien no ve una clara correlación entre el sistema operativo de Apple (con su gran cuota de mercado en todos sus dispositivos) y el diseño plano y sencillo de las actuales webs.

Además, este nuevo concepto de diseño también va asociado a una serie de estructuras que funcionan en la actualidad. Cada tipo de página va asociado a un formato de página que está más o menos estandarizado y que casi todos tomamos por base. ¿Por qué es así? Bien sencillo: somos animales de costumbres, enseguida identificamos un ecommerce por la disposición del carrito, los sidebar con las categorías de productos, los filtros de precios, etc… El usuario está familiarizado con este tipo de estructuras y salirse de ahí puede conllevar que la experiencia en la navegación del mismo no sea todo lo positiva que desea. Siempre es deseable innovar, aportar cosas nuevas, pero mirando siempre la cuenta de resultados. De nada nos serviría tener la web más atractiva del mundo si el usuario no sabe donde esta localizado el menú.

Además los razonamientos enumerados anteriormente, el concepto de menos es más aplicado al diseño web aporta otra serie de ventajas.

Al reducir los elementos de “distorsión” le damos más importancia a aquellos elementos en los que queremos focalizar la atención. Nuestro mensaje e imágenes son los que aportan el valor de la web. Nos centramos en el contenido, en lo importante, no en el continente.

Menos elementos supone menos carga de la web. Si simplificamos los elementos a mostrar en nuestra web (y la forma de hacerlo) mejoramos la experiencia de usuario a nivel de tiempos de carga. Las cargas eternas aderezadas con animaciones previas son de épocas pasadas a las que no hay que volver de ninguna manera.

Esto último también mejora el WPO, es decir, a efectos SEO, mejoramos la forma en la que los robots nos miran.

Diseños más sencillos permiten que podamos aplicar un responsive design de forma más sencilla que sí utilizamos estructuras muy complejas. Nuevamente, mejoramos la experiencia del usuario al poder ofrecerle al usuario una web adaptada al dispositivo en el que esté realizando la navegación.

Es definitiva, parecen claras las ventajas que aporta el diseño plano, el diseño sencillo basado en contenidos de calidad y abandonando los artificios de tiempos pasados.

 

Cómo generar confianza en nuestra tienda online

Destacábamos 5 puntos a tener en cuenta desde el punto de vista SEO. Como comentábamos en este post, es fundamental generar confianza a los visitantes de la web, ser transparentes y no ocultar información.

Hoy hablaremos de ciertos detalles que tenemos que tener en cuenta y vigilar, ya que son de vital importancia para generar una confianza a los usuarios de nuestra web.

  • Tener siempre accesible la información de contacto. La gente quiere saber quién hay detrás de una tienda online. Ocultar dicha información o solo hacerla accesible después de arduas tareas de investigación no habla muy bien de la transparencia de nuestra tienda online
  • Comentarios. Es interesante tener activo un sistema de comentarios. Muchas de las personas que navegan buscan conocer la experiencia de terceros para dotar de credibilidad a las bondades que nosotros ofrecemos en nuestros productos. Prohibir los comentarios puede ser un punto negativo. Es evidente que se puede colar comentarios malintencionados, pero la audiencia, por lo general, sabe discernir entre esos comentarios mal intencionados. Además, si fueran ciertos, suponen un importante feedback para mejorar nuestros productos.
  • Si tenemos algún tipo de certificado que aporte confianza, debería de estar siempre visible
  • Claridad desde el minuto cero con los gastos que se pueden originar en el proceso de compra. El error común de ocultar gastos adicionales de gestión, no ser claros con los gastos de envío, etc… puede suponer en un gran porcentaje el abandono de los carritos de la compra por considerarse los clientes “engañados” ante unos precios que están manejando y que luego no son los reales.
  • El proceso de compra tiene que ser claro y conciso. El usuario quiere saber los pasos que tiene que dar para completar su proceso de compra. Si lo podemos hacer en una sola pantalla mejor, si tiene que ser en varias, que quede totalmente claro cuantas son y en qué momento estamos en cada momento.
  • Imágenes atractivas. De estos hablaremos en un próximo post, pero las imágenes de nuestros productos tienen que ser sumamente atractivas, realizadas por profesionales si fuera necesario. Lo que entra por los ojos es más fácil de vender

Todo esto, aderezado de un sitio dotado con un diseño actual, realizado con buen gusto y donde la importancia del mismo se centre en mostrar el producto en todo su esplendor y no en los artificios que rodean al mismo harán que nuestra web gane muchos puntos de cara a los ojos del usuario.