Las características más importantes del diseño de un sitio de comercio electrónico

Tienes un plan para vender online. Has decidido lo que vas a vender, has decidido usar WooCommerce y ahora necesitas diseñar tu tienda.

Esta etapa puede ser difícil. Encontrar el tema perfecto, o incluso seleccionar un diseñador que comprenda sus objetivos, puede consumir el tiempo que no tiene. Y si nunca antes ha vendido en línea, puede sentirse como si estuviera buscando algo que simplemente "se ve bien", sin tener una comprensión sólida de lo que es realmente importante.

Para ayudarlo a comprender qué es crucial y qué no, debe saber cuáles son realmente las características más importantes del diseño de una tienda. Esto le ayudará a separar los diseños que "se ven bien" de los que funcionan bien.

Echemos un vistazo a las características más importantes del diseño de su tienda WooCommerce para que pueda comenzar con la siguiente etapa crucial.

Navegación de fácil comprensión

La navegación bien podría ser la parte más importante del diseño de una tienda . Una buena navegación ayuda a los nuevos compradores a encontrar lo que buscan sin problemas. Por otro lado, la mala navegación los frustra y puede incluso llevarlos a abandonar tu tienda.

La pregunta, entonces, es qué constituye realmente una buena navegación. La idea principal es presentar una ruta clara desde la página de destino hasta el pago . No importa en qué página aterrice inicialmente un visitante, debería poder orientarse rápidamente en su sitio sin tener que preguntar "¿cómo puedo...?"

La mayor parte del tiempo, esto consistirá en presentar solo las categorías o páginas más importantes en su navegación principal y delegar destinos menos importantes a los menús desplegables o al pie de página del sitio.

HUMAN tiene una navegación simple en la parte superior del sitio con categorías muy básicas, y el menú desplegable lo desglosa un poco más:

Kohl's, una tienda mucho más grande, también hace algo similar: sus categorías más importantes están en la parte superior y el menú desplegable tiene divisiones claramente etiquetadas que ayudan a guiar la navegación a la ubicación correcta (y, a menudo, más específica).

Si tiene bastantes productos y la navegación se vuelve complicada, puede agregar el widget de navegación en capas integrado a su tienda WooCommerce; al igual que Kohl's, esto permitirá a los clientes filtrar sus resultados de búsqueda por color, tamaño u otros criterios. especificar.

La presentación de opciones amplias y estrechas con etiquetas claras permite a los clientes navegar por su tienda como quieran. Y si prefieren evitar su navegación por completo, su búsqueda está a solo un clic de distancia.

Compatibilidad con todos los dispositivos y tamaños de pantalla

A medida que seguimos viendo un aumento en los compradores que solo usan dispositivos móviles, es importante ser consciente de los diferentes dispositivos y tamaños de pantalla que utilizan sus clientes.

El diseño receptivo es un método de diseño web que escala automáticamente la apariencia de un sitio hacia arriba o hacia abajo para que coincida con el tamaño de la pantalla en la que se ve. Se ha convertido rápidamente en un estándar para los sitios web en los últimos años, gracias en parte a que Google consideró la compatibilidad con dispositivos móviles de un sitio como un factor de clasificación y recomendó la capacidad de respuesta como la mejor manera de cumplir.

Con más compradores que optan por usar sus dispositivos móviles para comprar, el diseño de su tienda debería poder coincidir con las pantallas en las que se ve . Si no es así, es probable que descubras que tus clientes están abandonando sus carritos (si es que llegan tan lejos).

La buena noticia: todos los temas de WooCommerce disponibles en nuestro sitio responden de forma inmediata (incluidos Storefront y sus muchos temas secundarios). Y debido a que la capacidad de respuesta se ha convertido en un estándar, casi todos los temas compatibles con WooCommerce que encontrará en WordPress.org también son aptos para dispositivos móviles.

Si está buscando un tema en otro lugar , esté atento a la palabra "responsivo" en la descripción o entre las etiquetas. Una vez que elija un tema para usar, pruébelo en todos sus propios dispositivos para asegurarse de que sea realmente compatible con dispositivos móviles.

Si planea trabajar con un desarrollador para crear un diseño receptivo desde cero, eche un vistazo a esta guía de Google para priorizar la compatibilidad con dispositivos móviles: le brindará algunos consejos específicos para tener en cuenta mientras intercambian ideas juntos.

Tiempos de carga rápidos para cada página

Un dato curioso: aproximadamente el 40 % de los compradores en línea abandonarán un sitio web si tarda más de tres segundos en cargarse. No importa cuán hermosa sea su tienda, si es lenta, su tasa de rebote aumentará y su tasa de conversión disminuirá drásticamente.

Para evitar perder una gran parte de sus clientes, debe intentar implementar un diseño que cargue todos sus activos rápidamente . De lo contrario, verá altas tasas de rebote y salida.

No se preocupe: es completamente posible lograr un hermoso diseño de tienda sin que todos sus visitantes golpeen sus pies con impaciencia . Entre las herramientas de compresión, las redes de entrega de contenido y los ajustes y complementos específicos de la plataforma, puede asegurarse de que incluso sus imágenes y elementos gráficos más grandes se carguen de inmediato.

Aquí hay algunos consejos para ayudarlo a evitar que su diseño atasque su sitio:

• Comprimir archivos de imagen de gran tamaño. ¡Los servicios gratuitos como Kraken.io y TinyPNG te permiten hacer esto en solo unos segundos!
• Asegúrese de que su alojamiento sea adecuado : considere chatear con su anfitrión para actualizar su plan si las cosas parecen un poco lentas.
• Busque redes de entrega de contenido como CloudFlare, que entregan versiones en caché de su tienda a los visitantes desde un servidor local.

Haz uso de imágenes claras y hermosas.

¿Ha notado todas las imágenes grandes que llenan la pantalla en las tiendas últimamente? Por ejemplo, la página de inicio de Moment está dominada por esta hermosa foto de la lente en acción en un iPhone:

Estas imágenes grandes y llamativas no solo son bonitas: inmediatamente dirigen la atención del visitante a un llamado a la acción crucial .

Echa otro vistazo a la página de inicio de Moment. La hermosa foto de fondo muestra de inmediato de qué se trata el producto, mientras que el texto superpuesto tiene un claro llamado a la acción: esencialmente, "haga clic aquí para obtener esta lente".

Imágenes grandes como esta, combinadas con llamadas a la acción, hacen un trabajo maravilloso al explicar sus productos o hacer que sus clientes vean algo específico . El área grande le permite resaltar un producto con gran detalle, y la foto correcta puede venderle un artículo desde el primer segundo.

Por supuesto, el diseño de su sitio no debe centrarse solo en una o dos imágenes grandes en su página de inicio. También debe usar imágenes de productos nítidas en todo su diseño , ya sea para dirigir a los compradores a páginas específicas o simplemente para mostrar de lo que es capaz.

Arriba hay un gran ejemplo de la tienda New Balance. Estas imágenes se crearon simplemente superponiendo fotografías de productos existentes sobre un fondo: bam, promoción instantánea de la página de inicio. Son atractivos, motivadores y muestran a los nuevos en la marca exactamente lo que vende New Balance.

No hay razón por la que deba limitar el uso de imágenes de productos a sus páginas individuales. Comience a utilizarlos en todo su diseño y tendrá una mejor oportunidad de dirigir a los nuevos clientes hasta la pantalla de confirmación del pedido.

Una industria y un partido del cliente

Finalmente, si bien los consejos que le hemos dado hasta ahora están destinados a ayudarlo a encontrar diseños de tiendas con las cualidades que le gustan, no siempre se trata de usted . También deberá considerar lo que sus clientes esperan de ese diseño.

Solo debe elegir un diseño que crea que coincida con la industria de su tienda y las necesidades de sus clientes . Si elige un tema que funciona bien pero que no se adapta a su empresa, a la larga podría incluso perjudicarlo.

Si vende accesorios de moda de alta gama, el diseño que seleccione debe ser elegante y con estilo para reflejar esto. Pero si vende zapatillas deportivas, es probable que ese mismo diseño se vea fuera de lugar en su tienda, y no le gustará la forma en que se relaciona con el resto de su marca, lo que probablemente lleve a un rediseño rápido.

Eche un vistazo a esta publicación sobre diseños de página de inicio apropiados para varias industrias para aprender un poco más sobre lo que queremos decir cuando hablamos de encontrar la combinación adecuada. A menudo lo sabrás cuando lo veas.

Cómo elegir un tema para tu tienda WooCommerce

Con estos consejos en mente, debe estar mejor preparado para encontrar un diseño que satisfaga sus necesidades y se adapte a sus clientes. Sin embargo, es posible que todavía no estés seguro de por dónde empezar a buscar el tema de WooCommerce perfecto.

Si necesita orientación, aquí hay algunas sugerencias:

• Empieza aqui. Nuestro tema Storefront es gratuito y 100% compatible con WooCommerce. También hay numerosos temas secundarios adaptados a industrias específicas y tipos de tiendas.
• Haz una búsqueda. Hay muchos sitios que ofrecen temas gratuitos o a precios razonables; es posible que solo tenga que buscar un poco para encontrarlos.
• Póngase en contacto con un WooExpert. Muchos de nuestros WooExperts pueden personalizar un tema para ti o incluso diseñar uno desde cero, si prefieres seguir ese camino. ¡Y con su conocimiento de WooCommerce, son excelentes socios!
• Infórmese sobre las últimas tendencias y mejores prácticas. Esta guía sobre por qué es importante el diseño UX es una buena lectura.
• Finalmente, si eres realmente ambicioso... intenta diseñar tu propio tema . Nuestros socios educativos no solo enseñan WooCommerce, muchos de ellos también tienen cursos de HTML, CSS y diseño de sitios web que lo ayudarán a personalizar o crear un diseño que le encante.

Esperamos que esta guía le haya ayudado a comprender mejor las características de diseño que realmente importan. ¿Tiene alguna pregunta? Déjanos saber y estaremos encantados de ayudarte.