Los 10 mandamientos (y unos cuantos más) del diseño para hacer el mejor ecommerce posible

Gestionas una joyería en tu barrio y has decidido incrementar tus ventas mediante la creación de un ecommerce. No has previsto que en el diseño de tu tienda online el usuario aprecie con exactitud cada uno de los detalles del producto mediante un zoom y ampliación a pantalla completa de la imagen y que además esto no entorpezca en la velocidad de navegación de la web. Tampoco una visión global en 360 grados, ni una breve ficha técnica, ni una pasarela segura con gestor logístico,  de pagos y otras opciones como comentarios, extras para regalo, …

Estamos ante un ejemplo práctico de mejoras a implementar en esta tipología concreta de negocio electrónico. Sin embargo, ¿sería necesario aplicar estas mismas herramientas y contenidos en el diseño web para todos y cada uno de los productos de un comercio online de una gran cadena de supermercados? Es obvio que no.

Por lo tanto, es imprescindible adaptar cada comercio digital a la realidad de cada negocio y tener claros una serie de mandamientos relativos al diseño gráfico y diseño web para tener el mejor ecommerce posible.

Permitidnos exponeros antes una previa. Cualquier diseño ecommerce debe responder no sólo a la naturaleza intrínseca del negocio, sino a su propia estrategia de venta y a su valor diferencial respecto a la competencia. Si nuestro principal reclamo es el precio determinará el tratamiento y el diseño UX/UI de los elementos correspondientes en nuestra tienda digital.

Son tres parámetros que deben estar sobre la mesa en todo momento a la hora de plantearse el proyecto de un negocio electrónico.

Un mal diseño –o incompleto- aumentará las posibilidades de que el usuario no tenga una experiencia excelente de usabilidad de la web, no perciba la navegación como un espacio cómodo y de confianza y abandone el proceso de compra. Y no sólo él. No recomendará a sus familiares y amigos nuestra tienda online.

Por este motivo es tan importante recurrir a empresas experimentadas en el diseño web de un ecommerce, que entiendan realmente las necesidades de la empresa y potencien desde el ámbito gráfico las tasas de conversión.

Pero hay más. Pensemos que en el plano digital el usuario no dispone de un contacto humano directo, del servicio y la empatía que un vendedor de una tienda física puede ofrecer. No puede tocar los artículos. De alguna manera, el proceso digital es más “frío”. La experiencia de compra se concentra en una página web por su estructura, jerarquía de contenidos, calidad de contenidos, imágenes, colores, textos y videos. Se realiza a través de una pantalla, cada vez más pequeña, como son la de las tablets o los móviles.

No podemos persuadir a nuestro buyer persona con un ambiente, una iluminación e incluso con un olor para que se encuentre totalmente cómodo y relajado y acabe, finalmente, realizando la compra.

No olvidemos que la psicología ha demostrado ampliamente que la acción final de compra es un proceso básicamente emocional, aunque busquemos justificaciones racionales para realizarla. Se basa en buena medida en las sensaciones que seamos capaces de transmitir al usuario a través de nuestra imagen de marca. Sin olvidar, obviamente, la propia experiencia de compra que empieza en el momento en el que el cliente potencial observa el escaparate de la tienda en la calle.

Pues bien, en el ámbito digital el escaparate de la marca es nuestro e-commerce. Debemos persuadir desde la primera toma de contacto y ser capaces de transferir al plano digital esa imagen de marca, valores vinculados con la identidad corporativa e intentar reproducir una experiencia de compra asociada a nuestra filosofía.

En este contexto, resulta esencial identificar las herramientas digitales, funcionalidades y todas las posibilidades que tenemos a nuestro alcance para generar una experiencia de compra impecable y persuadir así a nuestro cliente potencial y convertirlo en un consumidor real y, en consecuencia, en nuestro posterior prescriptor.

Lo que no debe faltar para crear un ecommerce de calidad

Ahora sí. Recopilamos para vosotros los mandamientos. ¡Nos han salido más de 10! Los consideramos imprescindibles para que un buen diseño web puede sume a un comercio electrónico. Todos están relacionados con las pautas generales que debe seguir cualquier diseño web para ser eficiente: experiencia de usuario, usabilidad, funcionalidad y accesibilidad:

1. Espacio visual atractivo y agradable. El ecommerce debe ser bonito, precioso. Recordemos que es la tarjeta de visita y el primer impacto que el usuario tendrá con nuestra marca. Recuerda, es nuestro escaparate. Realiza así un recorrido visual en nuestra tienda digital, que debe ofrecer una experiencia agradable y ser capaz de generar un impacto positivo y una percepción excelente al cliente. De esta manera, la estética cuidada cumple con la función de generar confianza en un usuario que, recordemos, facilitará sus datos personales y económicos para realizar la transacción. Sin embargo, la estética está supeditada a la experiencia y usabilidad del usuario.

2. Gestión de los “blancos”. Relacionado con el punto anterior es básico gestionar correctamente los espacios vacíos en los que no hay nada en la web. Permiten que la web no se vea apretada, rellenada sin sentido, sino que debe “respirar” para poder identificar rápidamente los elementos realmente importantes y estructurar las secciones correctamente.
   
3. Diseño responsive. Cuando hablamos de adaptabilidad o diseño web adaptable o directamente web responsive (RWD, Responsive Web Design en inglés) nos referimos a la capacidad del ecommerce de reestructurar sus elementos de manera eficiente para garantizar la mejor exposición de contenidos en función de las dimensiones de los dispositivos. No es lo mismo la pantalla de un móvil que de una tablet o un ordenador. Además, Google penaliza el posicionamiento SEO de las páginas que no sean responsive.

4. Arquitectura web sencilla Lo primero a tener en cuenta es que la distribución y jerarquización de los contenidos responda a criterios racionales. Por ejemplo, facilitar que el cliente encuentre lo que busca sin ningún tipo de esfuerzo. Además, es lógico priorizar la exposición de los productos que más nos interese vender. No olvidemos, así mismo, que los menús deben ser fáciles de interpretar.

5. Diseño en malla (grid). Se está imponiendo la tendencia de un diseño gráfico de ecommerce basado en cuadros o tarjetas con fotografías reales de los productos, dado que facilita la acción del posible comprador y ayuda a estructurar mejor la home.
   
6. Uso adecuado de elementos gráficos. La recomendación es descartar elementos superficiales que no enriquecen la funcionalidad ni la usabilidad de la navegación. Los iconos y los elementos gráficos han de estar al servicio de los productos y del diseño de la interfaz de la web.

7. Óptima legibilidad. Aunque parezca de sentido común merece la pena  recordarlo porque no son pocos los ejemplos en los que leer con claridad el texto de una web no es tarea sencilla. ¿Motivo? Incorrecto contraste entre el color del fondo y el de texto, tipografías complejas así como el propio tamaño de la tipografía. Además, no debemos desaprovechar la oportunidad de potenciar nuestra identidad e imagen de marca en consonancia con nuestros valores, misión y visión a través de la tipografía escogida.
   
   Una de las recomendaciones a tener en cuenta es que en pantalla son mucho más legibles las tipografías sans serif (sin serifa o de palo seco) que cualquier otra como, por ejemplo, las romanas. Tampoco es un buen consejo combinar dos fuentes similares ni abusar de ellas. Lo idea es utilizar dos y, en casos realmente necesarios, un máximo de tres. En cambio, sí es efectivo jugar con distintos grosores de una misma tipografía.
   
   También estaremos facilitando la legibilidad y la visibilidad del texto de nuestro ecommerce si apostamos por un fondo blanco y el color negro para las palabras. Para el tratamiento de los fondos debemos descartar, por ejemplo, los diseños muy complejos, que utilizan mosaicos o excesivamente ornamentados.
   
   Obviamente, la legibilidad no debe ser tratada de la misma manera si el diseño gráfico debe su aplicación a un ecommerce, a una valla publicitaria o a un folleto.

8. Vista previa rápida de los productos.

Habilitando la opción de la vista previa de los productos estamos facilitando especialmente el proceso de compra a los usuarios con dispositivos móviles. (Pensemos que la pantalla es mucho más reducida). En todo caso, la vista previa ayuda a visualizar de manera más rápida y cómoda el producto que más pueda interesar al cliente y a comprar, por ejemplo, desde el mismo listado de productos. En este sentido, es recomendable que la visualización ampliada y detallada del producto se realice mediante un pop up y no se deba cargar obligatoriamente otra página externa, facilitando la compra compra on-line. El beneficio es doble, dado que ahorramos tiempo y facilitamos que el usuario lo pueda invertir en consultar más productos.

9. Diseño propio de los call to action. El consejo es que haya llamadas a la acción como “Comprar”,  “Reservar”, “Solicitar atención”  y estas se diferencien gráficamente del resto de elementos del ecommerce y tengan una personalidad propia para que destaquen y sean rápidamente identificables. Para ello deben ser grandes y estar ubicadas de manera estratégica.

10. Pop ups sí, con causa justificada. Atrás han quedado los tiempos en los que abrir una web era luchar previamente para cerrar la multitud de ventanas emergentes que nos impedían interactuar con facilidad. Los pop ups están indicados para comunicar ofertas o promociones especiales y lanzamiento de nuevos productos. Obviamente, no debemos abusar de ellos y han de estar programados para facilitar el cierre en la navegación, pensando especialmente en los usuarios de smartphones.

11. Imágenes grandes y de excelente calidad. No hay peor experiencia de compra en un tienda online que depositar tu confianza en un artículo basándose en una imagen de poca resolución, pequeña, que no ensalza el valor real del producto y que no se corresponde en absoluto con la realidad. Además, recordar que los productos no se deben retocar, las imágenes tienen que ser reales, profesionales y descriptivas.

12. Proceso de compra sencillo, cómodo, transparente y en pocos pasos. De nada sirve el mejor diseño del mundo de un ecommerce si a la hora de la verdad el proceso de compra implica una gran inversión de tiempo y complicados pasos de verificación y procesos de registro previos. Una buena práctica es permitir la compra como invitado y, una vez completada, ofrecer la posibilidad registrarse para obtener ofertas, descuentos, etc. Otra recomendación es realizar previamente un mapa gráfico de la experiencia de compra del usuario para, poniéndose en su piel, verificar que el proceso es rápido y fácil de llevar a cabo.

13. Pasarela de pago sencilla y fiable. Los campos con los datos personales y de la tarjeta de crédito a rellenar por el usuario han de ser estrictamente los imprescindibles para la operación. Ni más ni menos. La transacción ha de funcionar sin errores, ser fiable y estar avaladas por entidades de reconocido prestigio.

14. Carga rápida. Otro elemento clave para una buena experiencia de usuario es la velocidad de carga del site que además favorece el posicionamiento SEO de Google. Pueden haber ecommerce con un gran número de imágenes, textos, elementos gráficos, etc y no hay mejor garantía de fracaso que el hecho de hacer esperar al usuario, por lo que aquí recae un profundo proceso de optimización de contenidos y desarrollos tecnológicos para mitigar los tiempos de carga de una web. Y de disponer de un alojamiento web (hosting) dentro de un servidor rápido.

15. Ubicación del buscador. Con el objetivo de facilitar al máximo posible la acción de compra online y localización de lo que está buscando el cliente es muy recomendable que el buscador esté ubicado en la parte superior de la web e, incluso, destacado gráficamente como si de un call to action se tratara. De igual manera también deberá hacerse con teléfonos o formularios.

16. Chatbots, funnels y atención al cliente. Resolver lo antes posible las dudas y los comentarios de un usuario es uno de los servicios que mejor puede aumentar la imagen y el prestigio de una marca. Ofrecer el servicio de chatbot, chat on-line, formularios con filtraje, whatsapp o, en su defecto, un formulario o un email de contacto directo generarán mayor confianza en el proceso de compra.
    
17. Redes Sociales. ¿Debemos difundir nuestros perfiles en nuestra web de comercio electrónico? La respuesta es claramente sí. Es básico que cualquier usuario pueda difundir nuestra oferta, esta no deja de ser una acción comercial que convierte a la persona que ha visitado la web en un prescriptor de nuestros productos o servicios  a todos sus contactos.

18. SEO: Como en todo contenido digital generado, debemos maximizar la posibilidad de que sea indexado orgánicamente en las primeras posiciones de los resultados de  búsqueda en Google.
    
    En este sentido todos los CMS más conocidos – WordPress, Joomla, Drupal por ejemplo-, incluyen pluguins que pueden ser instalados con el objetivo de analizar en profundidad el nivel de calidad en cuanto a las variables SEO y ofrecer un gran número de posibilidades para mejorarlo.
    
    Tendremos a nuestra disposición una amplísima cantidad de parámetros configurables que nos ofrecen soluciones de SEO onpage concretas, además de información sobre la funcionalidad de nuestro canal de venta online.
    
    Algunos de los pluguins SEO más conocidos para WordPress son Yoast y Rankmath

19. Pasarela logística. Debe estar integrada perfectamente en el diseño y  funcionalidad del ecommerce. Algunos de los elementos e informaciones que se le debe facilitar al cliente que determinarán el éxito de nuestra venta online son el tiempo de entrega, disponibilidad de stock, fechas de entrega,métodos de envío y coste del transporte. Todo esto a nivel técnico será posible por medio de pasarelas con bases de datos de las empresas logíticas y RP con el que trabajemos.

20. Seguridad en la connexión. Un ecommerce que no tenga implementado el protocolo de seguridad https habla, ya desde el inicio, muy mal de él mismo. El protocolo HTTPS (Transferencia de Hiper-Texto) establece una conexión segura entre el servidor y el cliente, lo que garantiza que no sea interceptada por personas no autorizadas. Básicamente, el ecommerce con https logra encriptar la comunicación y la transferencia de datos, así como autentificar el servidor. De esta manera estamos transmitiendo la máxima seguridad para que el cliente ejerza su compra con la tranquilidad que se merece.

21. Calendario ecommerce. No porque sea el último punto de nuestro listado implica que sea el menos importante. Al contrario. Se trata de establecer con la suficiente antelación posible la estrategia comercial y el calendario anual de las acciones de ventas previstas a lo largo de 12 meses teniendo en cuenta periodos especiales y eventos promocionales como el inicio del verano, la vuelta al colegio, el blackfriday, las fiestas de Navidad, etc. Pensemos que un ecommerce es un servicio de ventas online vivo, dinámico y que está sujeto a variaciones en función de la cada época del año y de las promociones especiales que deseemos implementar en función de la estrategia predefinida.

Finalmente, no debemos olvidar una acción muy importante y muy sencilla para lograr maximizar la visibilidad de un ecommece.

Al lograr una venta exitosa en tu canal de venta online habrás logrado un cliente satisfecho que hará de prescriptor de tu servicio. Y no olvidemos que un cliente es el mejor comercial que podemos tener. Por lo tanto, debemos animarlo y lograr que nos recomiende a otros posibles clientes, mediante la difusión de su experiencia de compra y de nuestros servicios en sus redes sociales.