Tabla de contenidos
Antes de abrir PhotoShop, GIMP o cualquier otro editor gráfico, debe sentarse en un escritorio con un bolígrafo y una hoja de papel y pensar en el mapa de sitio de su tienda, haciéndolo tan flexible como sea posible (no todas las tiendas tienen la misma cantidad de categorías o de productos por categoría).
Un tema completo de PrestaShop requiere por lo menos 30 páginas o secciones de página:
Tome todas estas en cuenta y procure no olvidarse de ninguna de ellas. El no tomar en cuenta alguna página puede resultar en un tema incompleto y por lo tanto en una mala experiencia para sus usuarios.
Una vez que se sienta bien con su mapa de sitio, realice unos cuantos bosquejos de la interfaz, para conseguir una buena apreciación del lugar donde los diferentes elementos serán colocados: nuevos productos, promociones, imágenes, texto, etc.). También, incluya los detalles importantes, como las diversas menciones en la página del producto: en venta, promoción, nuevo producto, precio...).
Por supuesto, éstos son sólo consejos generales; un profesional quizás prefiera hacerlo todo directamente en PhotoShop, luego saltar en PHP, HTML y CSS.
Para garantizar que pueda compartir fácilmente su creaciones con otros (diseñadores, integradores, clientes), le aconsejamos guardarlas como un archivo de PhotoShop(RGB, 72 dpi, no-aplanado)
Debe trabajar teniendo en mente la resolución de ancho de 980px.
Puede utilizar varios métodos, dependiendo de sus preferencias:
No utilice el modelo de color de CMYK, ya que sólo es adaptado a la impresión. Siempre utilice el modelo de color de RVB.
¡No utilice tipos de letra atípicas! ¡Manténgalo legible en todo momento!
Texto estándar (título, subtítulo, texto regular) debe ser limitado a los tipos de letra respetados, para asegurar que los visitantes puedan ver siempre lo mismo:
Mantenga el número de tipos de letra en lo indispensable, para evitar que su sitio web sea confuso e ilegible.
Al diseñar para la web, la unidad básica de medida es el píxel. No mida ni en cíceros, puntos ni centímetros.
Siempre tenga presente que el usuario tiene la última palabra en lo que dice el texto, ya que el navegador moderno puede expandir o reducirlo. De hecho, debe probar su sitio web con distintas variaciones de navegador, ver lo fácil que puede ser quebrantar su diseño... y por lo tanto rehacer su diseño para evitar el sencillo quebrantamiento del mismo.
Dicho esto, usted puede comenzar con unos cuantos tamaños básicos de texto:
Las imágenes transparentes no funcionan bien con navegadores antiguos, especialmente con Internet Explorer, así que debe alejarse de imágenes PNG de 24-bits. En cuanto a imágenes GIF con transparencia, utilícelas sobre un fondo simple para asegurar que trabajen apropiadamente. Evite 50% de opacidad al utilizar el mismo color sin brillo como color de fondo del sitio web.
Aquí no ahondaremos en teorías complejas de interacción entre humano y computadora, sino que trataremos de asegurarnos que su tienda sea accesible a tantos clientes potenciales como sea posible. Su objetivo principal debe ser contar con visitantes que confían en su tienda lo suficiente para que comiencen a comprar.
Cada vez que un visitante tropieza con un problema de facilidad de uso, su sitio pierde confianza. Si la confianza alcanza un punto bajo, la frustración viene y los visitantes abandonan su sitio, sin comprar nada por supuesto. De ahí la importancia de la facilidad de uso en el mundo del comercio electrónico.
Cuando diseñe el tema de su tienda, tenga en mente que su misión (además de la venta de productos) es de mostrar a sus visitantes que su sitio web es gestionado por personas serias y competentes.
Esta es la página más importante de su tienda, donde se trata más que de una cuestión de suerte. Esta es la página donde el visitante obtendra una opinión general de su tienda y decidirá si debe confiar en su tienda con su dinero.
Debe asegurarse de lograr que su tienda sea fácilmente reconocible y que su catálogo sea lo primero que se fije la gente.
El encabezado del sitio web es donde usted podrá colocar los detalles más reconocibles: logo, nombre, imagen única...No debe ser mayor de 250px, para que sus visitantes puedan alcanzar su catálogo sin recurrir al desplazamiento hacia abajo de la página. En otras palabras, su contenido principal nunca se debe encontrar debajo del doblez.
El aspecto visual de su sitio web es por supuesto muy importante (de ahí nuestra sección "Pensando anticipadamente"): usted debe encontrar la manera de colocar sus productos hacia adelante con sobrecarga de página. Además, debe utilizar colores y diseño homogéneos dentro de una página y entre páginas. Por ejemplo si un botón cuenta con un efecto de interacción en una página, asegúrese de aplicar ese efecto a todas las otras páginas en el sitio.
El buscador debe ser fácil de encontrar. Los visitantes a menudo saben para lo que vinieron y lo que menos desean es explorar categoría por subcategoría buscándolo.
Más aún, al construir el contenido de su sitio web, piense en el usuario que explora las categorías y hágalo sencillo e intuitivo.
Puede reforzar la confianza percibido mostrando logos o menciones de sus asociados (bancos, transportistas), y su calificación desde una institución comercio electrónico conocida, como FIA-NET en Francia.
Muestre sus detalles de contacto, como el sistema de número de teléfono o chat, si está disponible. Esto mostrará que es real y eso puede hacer una inmensa diferencia. Por supuesto, no utilice su número de teléfono personal: los clientes deben sentir que llaman al equipo del soporte de una empresa, no para perturbarle mientras cocina.
Muestre claramente sus condiciones de Devolución de Mercancías, sus T&C generales y otras reglas aplicables que su tienda respeta.
Un visitante sólo se acerca a la página de producto si es interesada por dicho producto y desea más detalles. Por lo tanto debe contar con detalles en abundancia.
Haga que el botón "Añadir al Carrito" sea claro y visible. Debe distinguirse del resto del diseño, tanto por el tamaño como el color – pero mantenga un diseño homogéneo: si el botón está demasiado lejos del diseño general, el visitante puede fácilmente no verlo, de la misma manera personas se han entrenado a sí mismas a no observar anuncios en el Internet.
Asegúrese de mostrar todas las etiquetas importantes: "Nuevo producto", "Promoción", "Vale", etc. También, no se olvide de agregar las demoras de entrega.
El embudo de conversión es donde sus visitantes se convierten en clientes (de ahí el uso de "conversión", o a veces "transformación"). Si éstas páginas son diseñadas o estructuradas incorrectamente, esto puede significar la pérdida de muchos clientes potenciales y por lo tanto, toda los pedidos que pudieron haber realizado en su sitio.
El tema por defecto de PrestaShop viene incluido con un formulario de cuenta que ofrece un muy buen porcentaje de transformación. Aunque todavía no se adapte del todo a las necesidades de su sitio. Por consiguiente, aquí le ofrecemos unos cuantos consejos a seguir si piensa actualizar el formulario.
¡El visitante ha creado su cuenta de cliente, maravilloso! Pero aún no hemos terminado, ahora debe finalizar la compra.
Lo mismo que para el formulario de creación de cuenta:
Todas estos consejos de facilidad de uso son sólo partes del cuento, pero le pueden ofrecer una base sólida en la construcción de su tema, para mejorar su tienda.