Blogs de Shopify

4 reglas básicas para el diseño de tu página web

Diseño

Piensa en la última vez que visitaste una tienda de comercio electrónico, ¿recuerdas cómo se veía? Tal vez no, pero apuesto a que recuerdas cómo te hizo sentir: ¿Emocionado? ¿Confiado? ¿Feliz? O tal vez te sentiste confundido o frustrado porque era difícil navegar.

El diseño para el comercio online es algo más que el aspecto de una página web, ya que toma en cuenta la forma en que realmente funciona un sitio, el flujo entre una página y otra, cómo se cuenta una historia y el estado de ánimo que produce.

Las tendencias de diseño van y vienen, pero hay cuatro elementos visuales fundamentales que no pasan de moda para crear un sitio de comercio online efectivo. Antes de detallarlos, hay una pregunta que quiero que tengas en cuenta:

¿Cómo deseas que se sientan los clientes cuando lleguen a tu página web?

Después de todo, el marketing y el diseño realmente se reducen a ayudar a tus clientes a experimentar un sentimiento que los impulse a tomar medidas (idealmente, hacer una compra, o tres).

Exploremos los cuatro pilares del diseño de una tienda de comercio online moderna: la confianza, el atractivo visual, el formato y la navegación.

Los pilares del diseño para el comercio online

La confianza

Cuando alguien visita tu tienda por primera vez, es posible que no sepa nada sobre tu marca, la calidad de tus productos o tu compromiso para hacer feliz al cliente. Las ofertas pueden atraer su atención, pero tendrá que confiar en ti antes de realizar una compra.

Los clientes deben saber que cuando compren en tu tienda, recibirán el producto tal y como aparece en el anuncio. Hay tres indicadores de confianza esenciales que recomiendo que todo emprendedor incluya en su página web:

Información de contacto

No hay nada que espante más clientes potenciales que una página web sin información de contacto. Incluye un correo electrónico y, si es posible, un número de teléfono y una dirección física de correo. Este tipo de información, junto con una página “Quienes somos”, ayuda a los clientes potenciales a sentir que están comprándole a una persona real.

Una política de devolución

Una política de devolución no solo hace que sea más fácil para las personas devolver los productos que no los satisficieron, sino que también aumenta las ventas al infundir en el cliente un sentimiento de seguridad y confianza de que puede devolver un artículo si es necesario.

Devoluciones gratis

Certificaciones técnicas

No dudes en usar gráficos o distintivos para mostrar tu cumplimiento de seguridad y todos los métodos de pago que aceptas. Es más difícil ganar la confianza del cliente cuando no tienes clientes, por lo que recomiendo incorporar estos indicadores de confianza cuando diseñes tu tienda.

El atractivo visual

La percepción lo es todo al vender tus productos online. Las personas adquieren su primera impresión de tu sitio en tan solo 50 milisegundos. Con tu tienda de Shopify, el secreto para hacer que las impresiones cuenten reside principalmente en la calidad de tus imágenes.

Piénsalo de esta manera: la fotografía de tu producto es como un embajador que comparte la promesa de tu producto online. Tu cliente no puede probar, degustar, sentir o usar tu producto antes de comprarlo, por lo que en gran medida, dependerá de tus imágenes para decidir si ese producto es el adecuado para él/ella.

En general, recomiendo incluir fotos de productos con fondo blanco, así como fotos de estilo de vida de tus productos siendo utilizados. La página de inicio de Outdoor Voices presenta imágenes de estilo de vida en las que muestra el uso combinado de la marca con imágenes más centradas en el producto para atraer al visitante para que busque más información.

Personalizacion del mensaje

Es posible que cuando hayas comprado un producto en la página web de un minorista con grandes volúmenes de venta, te hayas percatado que casi siempre se incluye una foto con un fondo blanco para cada fotografía de estilo de vida. Los productos fotografiados en un fondo blanco son el estándar de oro de la fotografía para el comercio online, y esto se debe a que el fondo blanco hace que sea más fácil ver el artículo en detalle y hace desaparecer la marca para que tu producto pueda atraer a diferentes sectores demográficos.

Las fotos de estilo de vida son importantes porque permiten que los clientes se visualicen usando un producto en sus vidas cotidianas, al imaginarse a sí mismos como el modelo que se muestra.

Las fotos de tus productos son un factor clave para la interacción, conversión y retención de tu tienda.

Además de las fotos de productos, también ten en cuenta los colores y las fuentes de tu página. Es posible que tengas el producto más increíble, pero si la estética de tu página web, específicamente sus colores y fuentes, no funcionan, tus clientes quedarán desconcertados y es posible que no realicen una compra. La apariencia de tu tienda favorece la experiencia general de compra del producto.

El color es una de las herramientas más poderosas que puedes utilizar para despertar el interés y las sensaciones, además de que también se puede utilizar para llamar la atención sobre secciones específicas de tu página web y guiar a tu cliente en su experiencia de compra.

Recomiendo que solo utilices dos colores principales para tu página: un color primario y otro secundario. Para elegir mis colores, me gusta ver la rueda cromática de Adobe para conseguir qué colores se complementan mejor entre sí.

Aquí hay un ejemplo en el que el negocio usó el texto simple en blanco y negro con tonos de verde como sus colores de acento.

Fondos verdes

Otro aspecto clave es la accesibilidad de tu página web. Deseas que los colores que selecciones contrasten lo suficiente como para que las personas de cualquier edad y con cualquier capacidad puedan leer y ver tu texto.

Por último, querrás pensar en la tipografía, no olvides que los clientes esperan ver tipografías dinámicas e interesantes en las páginas web, no fuentes obsoletas como Times New Roman. Mientras que las palabras que escribes comparten información, es la tipografía la que transmite la emoción detrás de esa información.

La buena noticia es que, con la Tienda de temas de Shopify, cada plantilla viene con las fuentes recomendadas, por lo que puedes usar estas fuentes en tu página web, o seleccionar fuentes externas.

Al igual que con los colores, es una buena idea utilizar dos fuentes y crear una jerarquía entre ellas. Manejar múltiples fuentes puede ser complicado para quienes no son diseñadores, y tu página web puede volverse un desorden, así que usa solo dos fuentes para simplificar las cosas. Selecciona una fuente que utilizarás para la fuente de tu título o encabezado y otra para que sea la fuente del cuerpo.

La empresa Supergoop consiguió un buen efecto seleccionando una fuente de título que refleja su marca, mientras que la fuente del cuerpo es simple, clara y fácil de leer.

Maquillaje

Una fuente de encabezado única puede embellecer tu marca, mientras que la fuente del cuerpo será tu caballo de batalla, la que se utilizará para todos los demás contenidos de tu página web, desde las descripciones de los productos hasta las instrucciones de la pantalla de pago. Si bien las fuentes de los encabezados pueden tener un poco más de atractivo debido a su tamaño, independientemente de la fuente del cuerpo que uses, es importante elegir una que sea legible. No todas las fuentes están diseñadas para ser leídas en una pantalla, y seleccionar la inapropiada (por ejemplo, una Sans Serif delgada) podría alejar a los clientes si no pueden leer tu página.

El formato (monitores fijos y dispositivos móviles)

Según comScore, casi el 70% del tiempo invertido en medios digitales se lleva a cabo a través de dispositivos móviles. Desafortunadamente, muchos sitios web y plataformas de comercio electrónico están construidos tomando en cuenta únicamente la navegación en monitores de fijos de escritorio, lo que puede generar un buen número de nuevas ventas perdidas.

Si estás construyendo tu negocio con Shopify, tu tienda tiene un diseño reactivo. Esto significa que el sitio se adapta a los diferentes dispositivos y tamaños de pantalla, independientemente de que los clientes lo vean en una pantalla fija de escritorio, un teléfono inteligente o una tableta.

Al elegir un tema basado en un diseño compatible con dispositivos móviles, es mejor probar personalmente el proceso de compra para ver si estás satisfecho con el flujo transaccional. Si no lo estás, es muy probable que tus clientes tampoco lo estén. Elementos como los carritos de compra laterales y la navegación móvil intuitiva son cruciales al hacer tu elección.

La navegación

La navegación de tu página web debería ayudar a los clientes a encontrar tus productos de forma rápida y sencilla.

Una buena navegación mejora la experiencia de compra online y ayuda a los comerciantes a aumentar sus ventas y ganancias. La navegación también puede influir sobre el tema que elijas. Por ejemplo, si tienes un gran catálogo de productos, un tema con un menú más grande podría ser lo más conveniente para ti.

Aquí hay algunas directrices para diseñar tu tienda: primero, trata de limitarte solo a pocos encabezados de menú en tu navegación. Sé claro y directo al etiquetar estos encabezados; este no es el momento para ser inteligente. Aquí están los encabezados que recomiendo para la navegación de nivel superior:

  • Tienda [Categoría de producto]
  • Quiénes somos
  • Los más vendidos
  • Contáctanos

Aquí hay tres ejemplos de menú fantásticos que simplifican la navegación porque el visitante sabe exactamente lo que va a ver en cada caso. Como principiante, sigo pensando que deberías comenzar con los cuatro que se mencionaron anteriormente, pero con el tiempo, aprenderás lo que le gusta a tu público.

ecommerce navegacion 1

ecommerce navegacion 2

ecommerce navegacion 3

Los enlaces de navegación adicionales pueden ir en tu pie de página, la sección en la parte inferior de tu página web. Estas son las etiquetas que recomiendo para tu pie de página:

  • Tienda [Categoría de producto]
  • Política de devolución
  • Términos del servicio
  • Contáctanos

En todo momento puedes cambiar tus encabezados si notas que no están haciendo clic en ellos, o agregar un menú de navegación secundaria para incluir enlaces a otras páginas importantes o colecciones de productos.

Las reglas básicas serán muy benéficas

Es importante tener en mente estos cuatro elementos de diseño fundamentales a medida que construyas tu tienda. He trabajado en docenas de empresas, desde las empresas nacientes hasta las marcas imponentes, y estas son las constantes en todo el proceso.

Genera confianza: hazlo visualmente atractivo. Piensa en el dispositivo que están usando tus visitantes y haz que la navegación en el sitio sea sencilla para que el visitante llegue al producto lo más rápido posible.


¿ Tienes una idea de negocio?

Comienza a usar Shopify gratis por 14 días, sin necesidad de ingresar los datos de tu tarjeta de crédito

Publicado por Pablo Golán, editor en jefe del blog de Shopify en español y responsable de marketing de contenidos y localización para España y Latinoamérica. Texto original de Stephan Peralta. Traducción a cargo de Elizabeth Pestana.

 

¿Tienes preguntas sobre el funcionamiento de Shopify?

Escríbele un correo electrónico a nuestro equipo de Soporte Técnico, y ellos responderán en español a la brevedad posible.

soporte@shopify.com

Mapa de categorias: