Los 5 aciertos del diseño en un eCommerce

Alternative Text

Agencia eCommerce

Los 5 aciertos del diseño en un eCommerce

¿Sabías que en promedio las personas nos tardamos 7 segundos en formar una primera impresión en nuestra cabeza? Desde las primeras centésimas de segundo, nuestro subconsciente hace asociaciones y empieza a crear opiniones de lo que estamos viendo, por lo que el diseño de tu tienda en línea puede ser el factor decisivo para que tu negocio sea un éxito. 

Por esto, el día de hoy te estaremos hablando de 5 aciertos en el diseño que te pueden ayudar al momento de crear tu tienda en línea, o para encontrar un punto de mejora que impulse tu negocio al siguiente nivel. 

Acierto #1: Homogeneidad

El tener un mensaje claro y conciso de lo que quieres que tu negocio transmita es clave, la comunicación debe estar alineada y ser coherente para generar una mayor confianza en tus usuarios, gracias a lo cual pensarán en ti y en tu negocio como algo veraz y que le servirá a futuro. 

Lo mismo sucede con el diseño; cuando un sitio no es coherente con su estilo, puede percibirse como una marca de baja calidad o poco prestigio, esto no solo perjudica el cómo nos percibe el usuario, sino en la confianza que deposita en ti y su decisión de compra. 

Cuida las tipografías

Una de las mejores prácticas en temas de páginas web, no solo eCommerce, es buscar utilizar únicamente 2 tipografías a través de todas tus plataformas, una que te sirva de acento o para resaltar titulares o aspectos clave de tu página, y otra para el texto que estará complementando la información. 

Te recomendamos elegir un tamaño estándar para cada elemento de tu plataforma, y ser constante con su repetición en todas sus páginas; los elementos que debes considerar son:

  • Titular de Acento y CTAs
  • Titular de sección
  • Subtitulo
  • Texto
  • Botones y breadcrumbs
  • Formulario 

Ten en mente que el promedio de tamaño de la tipografía para el texto en eCommerce que propicia una correcta lectura es de 14 puntos.

Elige tu colores

Así como en la tipografía, el seleccionar los colores clave de tu tienda proporcionará un buen mensaje de marca y proyectará mayor profesionalismo. De esa forma, se entenderá de mejor manera, qué función tiene cada elemento y mejorará la experiencia del usuario, lo cual facilita el proceso de compra.

Usualmente los colores que se ocupan son los previamente seleccionados en el manual de identidad de marca por un experto en branding de marca, pero si aún no has definido este punto, lo mejor que puedes hacer es seleccionar de 3 a 5 colores, así como la proporción en los que los utilizarás. Para esto debes tomar en cuenta definir un color principal y los colores secundarios, por ejemplo: 

  • Color primario 40%
  • Color secundario 1 25%
  • Color secundario 2 25%
  • Color secundario 3 10%
  • Colores de botones y formularios:
    • Color de error
    • Color de acierto

Esta configuración podrá cambiar dependiendo del número de colores que selecciones, pero será muy importante que esta proporción se mantenga a través de toda tu tienda en línea, incluso en tipografías. 

Mantén márgenes constantes

Este es un punto al que pocas personas le prestan atención, pero que repercute en la percepción de estatus con la que se percibe a tu marca. 

Debes poner especial atención en la separación de elementos que tienes y manejarla de forma que se vea repetida en cada módulo. Supongamos que entre el límite inferior de tu menú y tu primer imagen o título existe una separación de 100 pixeles, pero del límite donde acaba tu primer título, al texto que lo acompaña, existe una separación de 200 pixeles; entonces la comunicación del mensaje va a verse afectada porque los ojos relacionan la pertenencia del primer título a la parte más cercana. En este caso, pensaríamos que es un elemento que nos habla por completo de otro tema. 

Lo mismo pasaría si después ocupamos una separación distinta entre los mismos elementos, pero en otro módulo del eCommerce; lo único que lograríamos sería confundir al usuario. Como en los puntos anteriores, deberás seleccionar y definir las separaciones clave para mejorar tu mensaje, y revisar que se apliquen de la misma forma siempre

Los márgenes que deberás pensar son:

  • Espacio de separación entre título y texto
  • Espacio de separación entre texto y botón
  • Espacio de separación entre módulos de información
  • Espacio de separación o márgenes de los recuadros que contienen texto, como botones o llamadas a la acción
  • Espacios y tamaños entre botones, especialmente en móvil, para que al momento de seleccionar con los dedos, se elija la opción deseada. 

Acierto #2: Coherencia entre textos e imágenes

Volvemos al tema de relacionar el mensaje para que sea coherente. Así como es muy importante pensar en qué tamaños, qué colores y cuánto espacio debemos mantener para que el mensaje se entienda de forma correcta, las imágenes y vectores que ocupamos para ejemplificar cada punto ayudan al usuario a comprender mejor la información y los productos o servicios que se encuentran en nuestra tienda. 

Supongamos que la tienda en línea es de productos para bebés, las imágenes que selecciones deberán tener cierto tono infantil y siempre mostrar ya sea a padres que se parezcan a tu mercado, niños ocupando el producto, o los artículos desde un punto de vista útil para los padres. 

Otro ejemplo, si tu tienda en línea está enfocada a productos de moda para mujer, la imagen que selecciones para hablar de los métodos de pago de tu tienda debe mostrar una mujer que compra en línea con alguno de los métodos de pago que manejas; así el cliente podrá sentirse identificado y entender a qué te refieres en cada punto. 

Esto también es relevante cuando elaboras una estrategia de contenidos, ya sea descargables o un blog para tu tienda en línea, pues las imágenes o vectores que ocupes para ejemplificar cada punto deberán reflejar siempre tu identidad y estar ligadas al tema del que estás hablando. 

Una vez que hayas identificado las imágenes y vectores que estarás ocupando en cada punto o módulo, lo siguiente es asegurarte de que todo elemento tenga la medida correcta para el lugar donde lo quieres ocupar. Si la imagen es muy pequeña, te recomendamos que busques otra similar, pero más grande, para evitar que se pixele. 

Para esto te sugerimos conocer las medidas de cada módulo de tu tienda en línea donde exista una imagen o vector; así como apoyarte de un diseñador o de una herramienta gratuita o de paga que te ayude a editar el tamaño de las fotografías para dejarlas ideales para tu tienda. 

Acierto #3: Identidad personalizada

Así como la personalidad nos ayuda a entender, identificar y recordar con mayor facilidad a cada individuo, en tu tienda en línea sucede lo mismo. Si tienes la oportunidad de crear o personalizar los elementos como botones, íconos o ilustraciones, aprovecha generar unos que sean únicos y proyecten la identidad que quieras que se perciba.

No es necesario que generes algo muy complicado, inclusive puedes descargar algunos elementos de bancos de recursos o plantillas y adaptarlos a la identidad de tu negocio. Debes poner atención en los siguientes puntos: 

  • Que los íconos y botones tengan los colores de tu marca
  • Que los botones y CTA’s estén en el idioma y tono que maneja tu marca
  • Que el estilo de los íconos y vectores sea el mismo a través de todas tus plataformas
  • Que las ilustraciones tengan pequeñas modificaciones (como el logo de tu marca en productos si se muestran en la ilustración) que apoyen el mensaje de tu tienda.
  • Que no ocupes elementos registrados de otras marcas. 

Acierto #4: Detalles atractivos

Bien, ya hablamos de cómo los colores, tipografías e ilustraciones ayudarán a tu eCommerce, ahora veamos cómo algunos detalles o acentos pueden ayudarte a fidelizar tu identidad en línea. 

Cambios de color y texturas

Cuando creas una tienda en línea y realizas la limitación de colores y tipografías, uno de los principales retos es generar dimensión y diferenciación entre módulos, pues si no generan el suficiente contraste entre ellos, tus clientes tendrán mayor dificultad para encontrar lo que están buscando.

Por el contrario, si existe demasiado contraste entre módulos, la tienda en línea pierde coherencia y seguimiento; además, genera una percepción de poco profesionalismo y baja confianza en el producto o servicio. 

Algunas buenas prácticas que podemos ocupar para generar estos cambios o contrastes de manera que sea atractiva y equilibrada son: 

  • Ocupar un color sutil como un gris muy claro que nos ayude a dividir entre secciones. 
  • Balancear los módulos con tonos muy contrastantes, alternándose de un lado a otro, o cada 2 a 3 módulos en la página. 
  • Ocupar los colores más contrastantes para texturas sutiles que acompañan de fondo a cada módulo, no como color principal.
  • Ocupar los colores más contrastantes para acentos de experiencia de usuario, como el Over de un botón, o líneas o vectores que te ayuden a identificar dónde te encuentras. 

Elementos flotantes con animaciones llamativas

Si tu marca lo permite, y cuentas con fotografías de buena calidad, puedes integrar elementos flotantes o en diferentes capas para que tu producto o servicio resalte; si a esto incorporas una animación que apoye el diseño, entonces ya ganaste. 

Animaciones como parallax con la navegación del cursor, pequeños zooms al momento de pasar por una imágen, cambios de color de algún elemento, o inclusive que ellos mismos aparezcan o desaparezcan cuando el usuario interactua con el cursor; son pequeños detalles que encantarán a tus clientes y servirán para que se mantengan por más tiempo en tu tienda en línea.

Acierto #5: Diseño basado en la experiencia de usuario UI/UX.

El diseño es crucial en cuanto a experiencia de usuario. El poder poner un botón de cierto color, tamaño o incluso ubicación dentro de tu tienda en línea puede incrementar tus posibilidades de venta. 

Imaginemos que estás pensando en cómo debería verse tu menú en un dispositivo móvil. La mayoría de nosotros hemos tenido contacto con otras tiendas en línea y estamos acostumbrados a ver el ícono de menú hamburguesa (=); ahora piensa que, en vez de este, vemos un ícono de tache (X). No entenderíamos que el botón se refiere al menú.

En este punto lo más importante será que nos pongamos en los zapatos de nuestros usuarios y pensemos ¿Cómo va a ocupar mi tienda en línea? ¿Cómo será el proceso a la hora de comprar mis servicios o productos? ¿Qué problemas he tenido yo, o las  personas que conozco al comprar en una tienda en línea?

Recuerda que puedes recurrir a la opinión de un experto que te ayude a identificar todas estas áreas de oportunidad y posibles problemas a futuro. De esa forma conseguirás que el diseño de tu tienda comunique lo que verdaderamente quieres transmitir.

Cuéntanos ¿cuántos aciertos obtuviste?  Y no te olvides de seguirnos en nuestras redes sociales y suscribirte para encontrar este y más consejos que te ayudarán a mejorar tu tienda en línea.  

Déjanos tus comentarios

Suscríbete a Nuestro Newsletter

Recibirás contenido de valor, tips, consejos y más.