Exploración del front-office

El front-office de una tienda es lo que los clientes observan constantemente cuando exploran la misma. Es la interfaz, los productos, las imágenes, la descripción, el proceso completo de transacción, etc.

Como cliente, esto es todo lo que verá en una tienda durante la experiencia de explorar y comprar, desde el principio hasta el final.

Como propietario de la tienda, debe conocer su front-office como la palma de su mano, no sólo porque se lo debe a sí mismo sino porque necesita entender lo que experimentan sus clientes, el número de páginas y clics que atraviesan durante un sesión típica de compra, cualquier tipo de inconveniente y cómo poder ayudarlos, etc.

Tema por defecto

Prestashop tiene incluido un tema predeterminado, el cual utiliza sombras grises en un fondo blanco. Este diseño simple fue creado con el propósito de ser adaptable a todas las líneas de negocios: ¡autos, fotografías, antigüedades... todas! Fue diseñado para facilitar la exploración, de forma ergonómica y conforme a las normas. Además es completo, ha sido fuertemente probado por miles de tiendas y ha demostrado su valor.

Si instaló PrestaShop con estos datos de muestra, usted observará productos Apple.

A pesar que el propietario de tienda puede cambiar el front-office en cualquier momento, gracias a la riqueza de temas disponibles en el sitio de Addons de PrestaShop, nos basaremos sólo en el tema por defecto en este capítulo.

Note que estamos describiendo el tema predeterminado con sus opciones y módulos por defecto. Activar otros módulos y utilizar otro tema, puede cambiar en gran medida la experiencia de compra.

Navegación de la tienda

Ya sea porque el cliente llegue a la página de inicio al escribir la dirección electrónica de la tienda o mediante alguna sub-página de algún buscador, este siempre tendrá diversas opciones para navegar en el catálogo.

El encabezado

El encabezado es una barra delgada de contenido, accesible desde cualquiera de las páginas del front-office. Contiene algunas herramientas y enlaces esenciales, los cuales se aplican a toda la tienda:

El encabezado casi nunca cambia durante toda la experiencia de compras.

El pie de página

El pie de página ofrece acceso a algunas de las páginas más importantes que pueden ser muy útiles para los usuarios quienes no encontraron nada interesante y se han dirigido a la parte inferior de la pantalla.

Tome en cuenta que estos enlaces pueden ser cambiados por el propietario de la tienda.

La columna izquierda

El tema predeterminado de la columna izquierda no cambia mucho, ya que sirve principalmente como un indicador práctico para la navegación y los enlaces secundarios:

Bloque “Mi cuenta”

Una vez que el cliente ha iniciado sesión, el bloque “Mi cuenta” aparece en la columna izquierda. Su único objetivo es el de ofrecer acceso rápido a todas las páginas personales de sus clientes:

En general, este bloque es una réplica del contenido de la página “Mi cuenta”, la cual puede ser accedida desde el enlace del mismo nombre a la derecha del encabezado.

Categorías

Una categoría es una manera jerárquica de organizar artículos: una categoría puede contener cualquier número de sub-categorías y sirve para explorar fácilmente el sitio. Desde artículos generales hasta los específicos siguiendo un camino lógico.

Una tienda PrestaShop puede contar con tantas sub-categorías como necesite, además de un número de categorías y productos infinitos en un nivel de categoría determinado. De hecho, todas las categorías son sub-categorías de la categoría raíz, “Inicio”.

Esta es también la única lista de productos donde los clientes puede comparar productos, al marcar su casillero y validar su elección utilizando el botón “Comparar”.

Etiquetas

El propietario de la tienda puede indicar un conjunto de etiquetas para cada producto. Una etiqueta es una palabra clave no jerárquica, también denominada como “meta datos”: se muestra en la página de producto ya que no ofrece ninguna información de utilidad, pero puede ser muy útil cuando se construyen listas temáticas – como una nube de etiquetas, donde las etiquetas más comunes son escritas en un tipo de letra más grande que lo normal.

Marcas

Los clientes pueden elegir sólo mostrar los productos de una marca, independientemente del tipo o precio.

La columna derecha

El tema predeterminado de la columna derecha casi nunca cambia en el transcurso de la experiencia de compras. Su bloque principal es el de “Carrito”, donde los compradores pueden echar un vistazo a lo que han elegido y la cantidad que esperan pagar, además de eliminar productos no deseados.

También ofrece acceso rápido a las promociones actuales (si existen) a través del bloque “Promociones”. Finalmente, el cliente puede localizar la tienda más cercana al hacer clic en el bloque “Nuestras tiendas”.

Estos tres bloques se encuentran siempre disponibles, desde cualquier página, en el tema por defecto.

La sección media

Aquí es donde se produce la magia. La sección media cambia constantemente para adaptarse a las elecciones de los clientes.

La portada

La portada ofrece una amplia visión de la tienda y sus posibilidades. Una imagen y un texto de bienvenida sirven como introducción a la tienda.

La página viene seguida del bloque de “Productos Destacados” y presenta 4 productos que el propietario desea resaltar, ya sean por ser novedosos o por el precio rebajado.

La mayoría de internautas entrarán directamente a la tienda a través de un buscador, directamente a una página de categoría de un producto. Muy pocos tropiezan con la página de inicio, y ese es le motivo por el cual esta tiene que ser confeccionada para nuevos usuarios, con una presentación adecuada.

Páginas de listas de productos

Categorías, etiquetas, marcas, búsquedas, promociones, mejores ventas o nuevos productos: PrestaShop tiene muchos caminos hacia un producto, pero a fin de cuentas los clientes son beneficiados con una lista familiar de productos, con el contexto elegido.

Pese a la diferencia de contenido, estos diseños de listas son muy similares para mantener la familiaridad del contenido con nuevos usuarios:

Esta presentación de la lista permite a los clientes observar de forma resumida la información principal del producto cuando ya conocen lo necesario sobre el producto, permitiendo un proceso de decisión acelerado.

Un clic en "Añadir a la cesta" provoca una animación rápida, moviendo la imagen del producto sobre el bloque de Carrito.

Mapeo de la imagen

Algunas categorías pueden ofrecer una imagen de encabezado, donde al menos dos productos son mostrados con enlace directo a estos productos. Una categoría puede ofrecer un número ilimitado de mapas-imagen, los cuales podrá desplazar con la herramienta localizada debajo.

Un símbolo "+" se coloca en los productos, los cuales son enlazados desde esa imagen. La imagen puede mostrar cuantos enlaces sean necesarios: en el contenido la tienda demo por defecto, el mapa-imagen de iPod Nanos despliega 9 enlaces.

Clasificación de Productos

Las listas de Productos por categoría o marcas pueden ser ordenadas por precio, nombre o disponibilidad.

Note que las listas por etiquetas no permiten este tipo de clasificación.

Comparación de Productos

Productos en una categoría pueden ser comparados con otros, gracias a la casilla "Comparar" en cada articulo. Esta es la única manera de comparar un producto, la cual es lógica ya que no tiene sentido comparar un producto que no contiene las mismas características/funciones.

Tras proveer la información del producto completa y consistentemente, la página de comparación mostrará una hilera de cada función comparable. Esto es de gran utilidad, particularmente para productos con diferencias técnicas.

Los clientes pueden comparar hasta 3 productos a la vez.

Páginas de Productos

Aquí es donde toda la información añadida por el propietario de la tienda está disponible al usuario. Dependiendo del diseño del tema, una página de producto puede ser minuciosa, con información extendida o simplemente presenta los datos más esenciales. El tema predeterminado es básico por ser su característica más prominente las imágenes de producto, con una herramienta de desplazamiento en la parte inferior.

Al lado de las imágenes se encuentran dos bloques:

Al final de la página de producto se encuentran las pestañas predeterminadas que son:

Página de Resumen

Al hacer clic al botón "Cesta" del bloque "Añadir a la cesta" en la columna derecha, o al símbolo en el encabezado, el cliente será transferido a la página de resumen de la cesta de compras, la cual es el primer paso en el proceso de compras, como se encuentra indicado por el gráfico tipo “hilo de Ariadna” en la parte superior, indicando los próximos pasos del proceso.

Esta página ofrece una visión concisa de los artículos en el carrito: imagen en miniatura, nombre, características, disponibilidad, precio y la capacidad de cambiar la cantidad de cada producto.

Una suma detallada de precios se muestra debajo, que consta del coste total del pedido con impuestos y envío y si fuera el caso, un indicador de que el vale de descuento fue utilizado. Más abajo, las direcciones disponibles se pueden mostrar.

Haciendo clic en “Siguiente” inicia el proceso de finalización de compra.

Creación de una cuenta

Ya que es una de las razones principales de la pérdida de clientes en una tienda virtual, PrestaShop hace muy fácil y clara la creación de cuentas a los clientes.

Al hacer clic en los enlaces "Su cuenta" o "Entrar", el visitante será trasladado a la página de autenticación, donde tendrá que completar uno de dos formularios.

El primer paso para crear una cuenta se trata de ingresar la dirección de correo electrónico y validarla. Esta acción lo dirigirá a la página de creación de cuenta. Completar dos bloques de información es necesario para obtener una cuenta:

Una vez registrado, el cliente es enviado a la página "Mi cuenta", donde ya puede observar que tiene acceso a: historial de pedidos, vales de crédito, vales de descuento y acceso a la información previamente ingresada.

Compra de un producto

Casi todas las páginas de una tienda virtual muestran un botón "Añadir a la cesta" para cualquier producto y muestran un breve resumen del contenido del carrito. Esto facilita a los clientes a tomar el primer paso hacia un pedido.

El proceso completo para comprar un producto en un sitio de PrestaShop puede seguir diferentes caminos, pero todos ofrecen la misma conclusión, también conocida en el argot de comercio electrónico como "embudo de conversión": desde el momento en que el carrito está completado y el cliente inicia la finalización/confirmación de compra, tendrá que hacer clic en varias pantallas de validación hasta que el pedido sea validado para poder ser procesado.

A esto se le llama embudo de conversión porque aquí es donde muchas tiendas virtuales pierden clientes debido a las exageradamente largas, numerosas o complicadas pantallas. Lea más aquí.

Este proceso comienza cuando el cliente realiza clics ya sea en el botón de bloque "Confirmar" (en cualquier página) o el botón "Siguiente" en el resumen de la cesta en la página de Resumen), y prosigue la misma secuencia de pantallas:

Localización de una tienda

Una de las grandes funcionalidades de PrestaShop es la capacidad de obtener una lista de ubicación de todas las tiendas físicas que están unidas a la tienda virtual. Si se encuentran disponibles (como en la tienda de demo), un clic en el bloque "Nuestras Tiendas" abrirá un mapa con formato de búsqueda y selector de radio.

En este mapa, las tiendas están marcadas indicando el logotipo de la misma. Un clic en el logo abre una ventana que ofrece la dirección completa, el número telefónico y el horario de atención de la tienda, proporcionadas por el propietario de la tienda.