Exploración del front-office
Last updated
Last updated
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.
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.
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 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 logo de tienda. Un clic en el logo traslada al cliente de regreso a la página de inicio, desde cualquier lugar de la tienda.
El bloque de moneda. El cliente puede elegir la moneda en la cual la tienda debe mostrar los artículos. Esto es muy importante para comparar precios con otras tiendas internacionales.
Contacto y Mapa del sitio. Estos dos enlaces llevan al cliente a páginas específicas, fuera del contexto de compras: contactar con el administrador de la tienda, o ver una lista completa de las páginas accesibles al público.
Favoritos. Este no es un enlace de por sí, sino una acción de JavaScript: al hacer clic el enlace provocará que el navegador del cliente marque a su tienda como favorita. Luego el cliente decidirá si completa la acción o no.
El motor de búsqueda. Muchos clientes prefieren buscar por un artículo específico a través del buscador que explorando categoría tras categoría. En algunas tiendas virtuales, esta es la única manera de explorar el contenido para muchos clientes.
"Bienvenido, XXXX". Invite al cliente a conectar con su tienda al ingresar sus credenciales. Una vez que se conecta, se podrá visualizar “Bienvenido, (nombre)”.
"Su cuenta*. Un enlace a la cuenta del usuario, o si no está conectado, a la página de autenticación/ registración.
"Carrito o Cesta: (vacío). Un recordatorio breve del estado actual del carrito del cliente. A veces los clientes seleccionan artículos mientras exploran y los olvidan después de cambiar de página. Por lo tanto es fundamental ofrecerles una manera de recordar los productos.
El encabezado casi nunca cambia durante toda la experiencia de compras.
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.
Tres enlaces a listas de productos:
Descuentos: todas las promociones actuales.
Nuevos Productos: artículos agregados recientemente.
Mejores ventas: artículos más populares
Cuatro enlaces a las páginas informativas:
Nuestras Tiendas
Contacto
Términos y Condiciones
Sobre la Tienda
Tome en cuenta que estos enlaces pueden ser cambiados por el propietario de la tienda.
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:
(si inició sesión) El bloque “Mi Cuenta”, con enlaces para las páginas de los clientes.
Tres de los bloques por defecto ayudan al usuario a navegar la tienda y filtrar el contenido: etiquetas, categorías y marcas son las maneras más comunes en las que los clientes buscan por un producto determinado.
“Productos Más Vistos” sirve como un recordatorio de los productos que previamente le interesaron al cliente, y ofrece un acceso directo de regreso si desea escogerlos al final.
Finalmente, “Informaciones” donde se encuentran las páginas estáticas, determinadas por el propietario de tienda: información de entrega, avisos legales, términos y... No son argumentos de venta, pero su contenido es lo suficientemente importante para justificar su presencia.
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:
Mis pedidos. Todos los pedidos actualmente en proceso.
Mis vales de descuento. Recibidos cuando un pedido ha sido cancelado, los vales de descuento pueden ser utilizados en pedidos futuros.
Mis direcciones. Un cliente puede tener muchos domicilios, por ejemplo cuando quiere enviar un producto a la casa de un amigo.
Mis datos personales. Nombre, Apellido, dirección de correo electrónico, domicilio, número telefónico, fecha de nacimiento: toda la información necesaria sobre el cliente.
Mis vales. Todos los códigos de cupones que no han sido utilizados.
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.
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”.
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.
Los clientes pueden elegir sólo mostrar los productos de una marca, independientemente del tipo o precio.
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.
Aquí es donde se produce la magia. La sección media cambia constantemente para adaptarse a las elecciones de los clientes.
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.
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:
Miniatura de imagen a la izquierda
Nombre y descripción en la sección media
Precio, disponibilidad. Botón "Añadir a la cesta" y enlace de la página del producto a la derecha
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.
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:
Un bloque de “Descripción Corta” que presenta los datos principales del producto de una forma libre.
El bloque "Añadir a la cesta" con la posibilidad de elegir entre las variaciones disponibles (definidas por el propietario) y la cantidad que se solicita.
Al final de la página de producto se encuentran las pestañas predeterminadas que son:
Más información. Donde los clientes encontrarán la descripción completa del producto, introducida por el propietario. El contenido de esta página se encuentra de una forma detallada.
Ficha técnica. Donde PrestaShop lista las características detalladas que fueron añadidas en su base de datos. Estos datos también son los que se utilizan para comparar dos productos. Por lo tanto, el contenido de esta pestaña es escasamente rellenado: estos son datos sin refinar, lejos de la descripción detallada de la pestaña de “Más información”.
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.
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.
Crear una cuenta.
Ingresar a una cuenta ya registrada.
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:
Información personal. Datos para identificar al cliente de una manera única: nombre, apellido, correo electrónico (ya ingresado), fecha de nacimiento.
Su dirección. Esta será la dirección de envío por defecto para este cliente – puede añadir otras, pero es mejor solicitar una por ahora que solicitar una cuando confirme el pedido, tomando el riesgo de perder una venta.
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.
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:
(si el visitante no ha ingresado a su cuenta) Mostrar la pantalla de autenticación, donde el visitante puede acceder a la página de creación de cuenta o ingresar a esta.
La página de elección de dirección. Dos direcciones son necesarias para un pedido:
La dirección de facturación, la que está ligada al método de pago.
La dirección de entrega, donde el pedido debe ser enviado. Si necesita que lo envíen a otra dirección, desmarque la casilla “Usar la misma dirección para la facturación” y elija una dirección entre las disponibles o añada una nueva.
La página de envío. Aquí es donde el cliente puede elegir entre algunas opciones - de envío y embalaje. Aceptar los términos y condiciones de la tienda es obligatorio y dependiendo de las opciones que la tienda puede ofrecer, el cliente puede elegir embalaje reciclado, envolver en papel de regalo (con un mensaje especial como opción) o seleccionar el transportista que más le agrade.
La página de pago. El cliente puede escoger muchas opciones de pago, dependiendo de las configuraciones del propietario de la tienda. Cheque y tarjeta de crédito son los más comunes, pero PrestaShop facilita el ofrecer pagos a través de PayPal, PayPalt u otros terceros. El cliente hace clic al método elegido y dependiendo del método, es enviado al controlador de pago seleccionado o continúa hacia una de las páginas de PrestaShop donde puede ingresar los detalles necesarios como validación, antes de mostrar un cheque, o información de transferencia bancaria.
Una vez que el cliente ha validado el proceso, será trasladado a la página de confirmación, la cual comienza con “Su pedido en nombre de la tienda está completo”. Dependiendo del modo de pago seleccionado, debe proporcionar información final al cliente, junto con una notificación de que el correo electrónico de confirmación ha sido enviado y un enlace a la página de atención al cliente. El cliente debe hacer clic en el botón "Confirmo mi pedido" para enviarlo.
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.
