PASO 1: 10 CLAVES PARA QUE EL DISEÑO DE TU TIENDA FUNCIONE

10 claves para que el diseño de tu tienda funcione 

A continuación te vamos a contar 10 aspectos que son fundamentales y que es necesario tener en cuenta a la hora de crear el diseño de tu tienda online. Son 10 pasos que desde Mabisy siempre seguimos con cada uno de los proyectos de los clientes que contratan el servicio de diseño y la configuración de la tienda. ¡Te los contamos!

1. Crea un diseño coherente con la marca. Decide qué colores, textos y tipo de imágenes ayudan a transmitir tu marca y cuál es la actividad de tu negocio. La primera impresión siempre cuenta y es la que se llevara tu posible cliente la primera vez que entre a tu tienda. Si ya conoce tu marca, querrás que la reconozca y si todavía no la conoce, querrás que la recuerde. En los proyectos Mabisy trabajamos una primera fase de análisis en la que el cliente proporciona información a nuestro diseñador acerca de lo que quiere transmitir sobre su marca.

2. Elige una plantilla para definir la estructura del diseño. Elige la plantilla que mejor se ajuste a tu tienda, esto te permitirá trabajar sobre una estructura ya creada. En Mabisy contamos con más de XX plantillas adaptables y gratuitas que están a tu disposición para que puedas crear tu tienda.

3. Organización y estructura de navegación. Define la estructura de navegación de tu tienda, cómo se organizan las categorías y los productos, así como las páginas corporativas que son de obligatoria inclusión o las páginas extra que quieras añadir porque son imprescindibles para aportar información al cliente potencial.

4. Cuida el tiempo de carga. Controla el tiempo de carga. La plataforma de Mabisy está diseñada para una carga rápida, pero de ti dependerán los elementos que subas a la tienda. Vigila el peso de las imágenes para que no superen los 400 o 500 KB. En caso de que las imágenes pesen más el tiempo de carga de tu página se verá afectado. Además de que los usuarios solo esperan entre 3 y 5 segundos para que una página se cargue, Google tendrá en cuenta también el tiempo de carga para su posicionamiento.

5. Ten en cuenta la usabilidad. Haz que la experiencia del usuario sea óptima. Solo de esta manera aseguramos el éxito en la finalización del proceso de compra. Asegúrate de que todos los enlaces están visibles, subrayados o en color. Comprueba que todos los botones funcionan, que no existen páginas con error y que los pasos que debe seguir el usuario son claros y no existen ambigüedades que generan confusión. El carrito de la web debe estar visible arriba a la derecha, el menú principal debe ser fijo durante toda la navegación.

6. Favorece la indexación. Todo el contenido de tu tienda ha de ser indexable por los buscadores, incluídas las imágenes. Mabisy añade automáticamente la información de producto a las imágenes, pero en tus manos está cada una de las imágenes corporativas o elementos que subas a tu tienda. En otro post, ampliaremos información sobre este punto.

7. Ten presente cómo han de ser las imágenes. El diseño de tu tienda puede ser coherente con tu marca pero las imágenes que subas posteriormente van a permitir que esto se mantenga así o no ya que afectan directamente a la apariencia. Define qué tipo de imágenes quieres utilizar, qué luz tendrán, qué transmiten, etc. Recuerda que no deben superar los 500 KB para no afectar el tiempo de carga.

8. Revisa que se adapte a todos los dispositivos. Un diseño no está listo si no está preparado para cualquier dispositivo. Asegúrate de que el diseño de tu tienda se muestre bien tanto en móvil como en ordenador o tablet. La experiencia del usuario debe ser óptima desde cualquier dispositivo desde el que acceda.

9. Contenido de portada.  La página principal de tu tienda es la home o portada. Asegúrate de mostrar toda la información que el usuario necesita para querer avanzar más en el proceso y visitar las páginas de tus productos o servicios. ¿Estás dando motivos para que compren? ¿Qué es lo que el cliente quiere encontrar? ¿Se lo estás contando? Más abajo podrás ver cómo lo hemos resuelto nosotros.

10. Revisión de que todo funciona. Antes de publicar la tienda es imprescindible comprobar que todos estos puntos están resueltos y que todo funciona correctamente. En Mabisy no lanzamos ninguna tienda creada por nuestro equipo sin realizar las revisiones necesarias para confirmar que un proyecto cumple todos estos factores clave para que el diseño funcione.

Y en nuestra tienda online, ¿cómo lo hemos resuelto nosotros?

En nuestra tienda https://www.toppers.es/ hemos utilizado un diseño coherente con la marca utilizando colores que transmiten descanso y una tipografía suave acorde con lo que queremos comunicar. 

A la hora de seleccionar sobre qué plantilla queríamos trabajar nos dimos cuenta de que queríamos hacer un mix entre dos distintas. Tras esto, nuestro equipo de diseño se encargó de hacer una adaptación de ambas presentando una primera propuesta.

Primera propuesta de diseño de Toppers.es

Al hacer la revisión de esta primera propuesta, decidimos hacer modificaciones buscando un diseño que transmitiera más marca y mejorar algunas secciones para que el impacto visual fuera mayor, como el diseño del menú de navegación,  secciones como categorías destacadas o la posición de los más vendidos. Nuestro equipo de diseño presentó entonces otra propuesta que finalmente se aprobó y que adaptamos tanto para ordenador como para móvil. 

Diseño (casi) definitivo de Toppers.es 

Ordenador

Móvil 

¿Por qué decimos (casi) definitivo?

A pesar de estar incluídos en la imagen, algunos elementos como los sellos de calidad todavía no están decididos, ya que es posible que la consecución de alguno de ellos lo dejemos para más adelante cuando tengamos la tienda activa y vendiendo. Hablaremos de esto más adelante. 

Otra modificación posterior que hicimos fue la estructura de navegación y qué elementos se iban a mostrar en cada uno de los menús. Al analizarlo nos dimos cuenta de que no teníamos suficientes secciones en el menú por lo que decidimos mostrar directamente las tres categorías de producto: viscoelástico, plumas y microfibra/fibra, aunque al activar la web desactivamos la categoría plumas temporalmente porque el proveedor que teníamos dejó de fabricarlo antes de la publicación de la tienda. 

Una vez el diseño estaba listo y antes de activar, hicimos las pruebas de tiempo de carga, comprobamos que todos enlaces y botones funcionaban y que se podía navegar sin problema. 

Todas las comprobaciones las hicimos desde móvil y desde ordenador para revisar que todo funcionaba correctamente y se podía finalizar la compra sin ningún freno. 

¿Qué te ha parecido? Esperamos que este artículo te resulte útil para crear el diseño de tu tienda. Te recordamos que en Mabisy tienes la opción de contratar este servicio y nuestro equipo deja lista tu tienda para vender. ¿Quieres que te llamemos? Haz clic aquí y rellena el formulario. 

No te pierdas el próximo post en el que te contamos cómo configurar tu tienda online con los métodos de pago y envío.