Tabla de contenidos

Consejos de Diseño

Pensando anticipadamente

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:

• Página de inicio
• Página de categoría
• Página de producto
• Página de comparación de producto
• Página de resultados de la búsqueda
• "Mi Cuenta" y sus páginas interiores:
  • Mis vales
  • Historial de pedidos
  • Información personal
• "Mi Carrito"
• Página de autenticación
• Creación de cuenta
• Páginas de finalización de compra:
  • Listas de direcciones
  • Costos de envío
  • Elección de pago (cheque, transferencia)
  • Finalización de una página
• Creación de dirección
• Página de entrega
• Página de mantenimiento
• Lista de fabricantes y página individual de fabricante
• Lista de proovedores y página individual de proveedor
• Página 404 ("Página no encontrada")
• Página "Mejores ventas"
• Página "Nuevos productos"
• Página "promociones actuales"
• Página "contraseña olvidada"
• Aviso Legal
• Mapa del sitio
• Página de tiendas
• Formulario de contacto

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.

Recomendaciones técnicas

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.

Arreglo de Capas

Puede utilizar varios métodos, dependiendo de sus preferencias:

• Una carpeta para cada capa de texto, para que los integradores puedan conseguir acceso fácil al diseño mismo.
• Una carpeta para cada bloque de diseño (Nuevos productos, Mejores ventas, etc.)

Colores

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.

Tipos de letra

¡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:

• Arial
• Verdana
• Helvetica
• Georgia
• Tahoma
• Times New Roman

Mantenga el número de tipos de letra en lo indispensable, para evitar que su sitio web sea confuso e ilegible.

Unidades

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.

Tamaño del Texto

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:

• 10 a 12px para el texto regular
• 14px para subtítulos
• 18px para títulos
• etc.

Transparencia

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.

Misc.

• Pruebe su tema con las opciones activadas de PrestaShop, para observar como reacciona su tema.
• Edite un producto para observar cómo las diferentes opciones influyen con su diseño... si realiza todas.
• Asegúrese de contar con un estilo homogéneo para su tienda.

Facilidad de uso

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.

La página de inicio

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.

La página de producto

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: "Mi Cuenta" y páginas relacionadas

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.

Creación de cuenta/ "Mi Cuenta"

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.

• Sea básico, mantenga sólo lo esencial. El visitante debe concentrarse en la creación de cuenta y en la compra. Vea cómo lo hace Amazon.
• Reduzca el número de pasos. El usuario debe conocer el número de pasos que debe atravesar antes de completar su compra.
• Muestre claramente cualquier error que realiza el usuario, justo al lado del campo en el formulario. Los errores deben ser mostrados en un color claro (rojo es preferible), y los campos obligatorios deben ser indicados (con un asterisco *, por ejemplo).

Pago

¡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:

• Reduzca el número de pasos (dirección de entrega, página de pago).
• Muestre los errores en un color claro.
• Página de pago:
  • si el visitante utiliza una tarjeta de crédito, adviértale que serán trasladodos al servidor seguro de su banco. Por ejemplo agregue un icono de candado pequeño, con una explicación
  • Si este elige pagar por cheque (o cualquier otro método de pago que no sea en línea), mencione claramente los pasos a seguir: importe, dirección, etc.

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.