Cómo organizar un pedido online de productos personalizados

Un cliente quiere encargar un producto con su diseño: elige un modelo, indica la cantidad y adjunta un archivo. Antes de pagar, necesita saber si ha seleccionado bien las opciones, qué está incluido y qué ocurrirá después. Organizar esas decisiones es una parte central del diseño de una tienda online de productos personalizados.

Para explicarlo, utilizaremos una tienda ficticia de bolsas personalizadas. El recorrido, los archivos y los mensajes son ejemplos educativos, no una descripción de un proyecto real ni requisitos de un proveedor. El objetivo es preparar un mapa que puedas adaptar a tu negocio antes de diseñar las pantallas.

Dibuja el recorrido desde la elección hasta la confirmación

Empieza por un pedido que el negocio pueda resolver con sus reglas habituales. Para nuestra tienda de ejemplo, el recorrido tendría cinco etapas:

1. Producto: escoger el modelo, el color y la cantidad de bolsas. Al avanzar debe quedar identificado qué se va a personalizar.
2. Personalización: indicar la cara de impresión y adjuntar el diseño. Si hay texto personalizado, recogerlo en un campo propio para poder revisarlo.
3. Revisión: comprobar opciones, archivo, datos de entrega y desglose del pedido. Incluir una forma clara de corregir cada apartado.
4. Pago: mostrar el total confirmado y permitir realizar el pago mediante el sistema elegido para la tienda.
5. Confirmación: indicar la referencia del pedido y su estado real. Explicar si queda alguna revisión pendiente antes de prepararlo.

Cinco etapas no obligan a crear cinco páginas. Agrupa las tareas según su complejidad. La guía del W3C sobre formularios por pasos recomienda dividir los formularios largos en partes lógicas e indicar el progreso. Un rótulo como «Personalización · Paso 2 de 5» resulta útil si coincide con el recorrido real.

Pide los archivos y datos necesarios en el momento adecuado

Decide primero qué necesita recibir quien prepara el producto. En el ejemplo, el archivo se pide después de elegir la zona de impresión: así la ayuda puede explicar qué diseño corresponde a esa opción. Los datos de entrega se solicitan cuando ya se ha configurado el producto.

Identifica cada campo con una etiqueta que describa su función y esté asociada al control, como explica el W3C sobre etiquetas de formularios. «Archivo para la cara delantera» es más preciso que «Adjunto». Si un dato es opcional, indícalo de forma visible.

Antes de encargar el formulario, deja definidos estos requisitos con el equipo de producción:

• Qué formatos se admiten y si cambian según el producto o la técnica.
• El peso máximo permitido y cuántos archivos corresponden a cada unidad, cara o variante.
• Las medidas y otras condiciones del diseño que necesita comprobar una persona o un sistema.
• Qué ocurre si el cliente todavía no tiene un archivo preparado y quién revisará las dudas.

Coloca las instrucciones junto al campo y mantenlas visibles mientras se completa. El W3C sobre instrucciones señala que el texto de ejemplo que desaparece al escribir no sustituye a una etiqueta. Como ayuda para nuestra tienda ficticia podríamos usar: «Diseño de la cara delantera. Adjunta un PDF o PNG de hasta 20 MB. Comprueba que corresponde al modelo elegido». Esos formatos y ese límite solo ilustran el mensaje; deben sustituirse por los requisitos reales.

Distingue «archivo subido» de «archivo aprobado para producción». Aceptar un formato o completar una carga no confirma que el diseño sirva para fabricarlo. Si existe una revisión posterior, explica qué se revisa y en qué momento se solicitaría una corrección.

Explica cómo se calcula el pedido

Antes de dibujar un botón de compra, decide si el pedido puede tener un importe cerrado o necesita una valoración previa. Esa decisión cambia el recorrido:

• Importe cerrado: las combinaciones admitidas y sus reglas de cálculo están definidas. El cliente puede conocer el total antes de pagar.
• Solicitud de presupuesto: el equipo debe estudiar el archivo, una medida especial o un acabado antes de fijar el importe. El recorrido termina inicialmente en «Solicitar presupuesto» y en una confirmación de recepción; el pago llegará después de aceptar la propuesta.

Para el primer caso, enumera qué modifica el importe: modelo, cantidad, caras personalizadas, preparación y entrega, cuando correspondan. Define cómo se presentan los impuestos aplicables y qué conceptos están incluidos. No muestres como total definitivo una cifra a la que todavía le falten costes por calcular.

En nuestra tienda ficticia, cambiar de una cara impresa a dos obligaría a revisar el cálculo y el resumen. El equipo debe acordar también qué ocurre con las combinaciones no disponibles: impedir elegirlas o explicar por qué necesitan presupuesto. Estas reglas deben quedar resueltas antes de trasladar el catálogo a la web.

Permite revisar lo que se va a comprar

Antes de completar la compra, ofrece un resumen que permita detectar errores y volver al apartado correspondiente. El W3C sobre validación incluye la revisión y corrección de los datos por la propia persona, con ejemplos de confirmación de pedidos. En un producto personalizado, conviene dar especial visibilidad al contenido que se va a reproducir.

El resumen de nuestras bolsas podría reunir, en este orden: modelo y color; cantidad; caras impresas; texto exacto, si lo hay; nombre del archivo; dirección de entrega; conceptos del importe y total. Junto al diseño, una acción «Cambiar archivo» evitaría tener que buscar dónde se adjuntó.

Si se ofrece una vista previa, aclara qué representa. Un montaje orientativo no debe presentarse como una prueba de producción aprobada. Decide si la aprobación del diseño sucede antes del pago o en otro momento y refleja esa diferencia en el resumen y en la confirmación.

Separa «Producto», «Personalización» y «Entrega» con encabezados claros. La guía del W3C sobre estructura de páginas explica cómo una jerarquía de secciones ayuda a orientarse y navegar por el contenido. Esos títulos deben formar parte de la estructura de la página, además de distinguirse visualmente.

Prepara los errores y la recuperación

Escribe también las pantallas que aparecen cuando algo falla. El W3C sobre avisos al usuario recomienda mensajes claros que expliquen cómo corregir el problema y una confirmación cuando la tarea termina. Para nuestra tienda ficticia, podríamos preparar estos textos:

• Formato no admitido: «No podemos adjuntar este archivo. Para la cara delantera, elige un PDF o PNG». El requisito debe ser el mismo que se mostró antes de la carga.
• Carga interrumpida: «El archivo no se ha terminado de subir. Comprueba tu conexión y vuelve a adjuntarlo». La opción de reintentar debe existir y funcionar.
• Dato incompleto: «Indica la cantidad de bolsas para continuar». El aviso debe identificar el campo y acompañarlo donde pueda corregirse.

Prevé qué se conservará al volver atrás o después de un fallo. Si el sistema no puede recuperar un archivo, debe pedirlo de nuevo; no prometas que lo ha guardado. Estas decisiones necesitan desarrollo y comprobación, además de una frase de ayuda.

Si se interrumpe el regreso desde el pago, define cómo consultar el estado del pedido antes de ofrecer otro intento. La documentación de Stripe sobre confirmación de pedidos advierte de que un pago puede completarse aunque el cliente pierda la conexión antes de volver a la tienda. Con el proveedor que utilices, acuerda cómo verificar el estado y distinguir «pago pendiente», «pagado» o «no completado» cuando proceda.

Una lista para revisar el pedido en móvil

Prueba el recorrido en un entorno de pruebas, con archivos y datos ficticios y el modo de pruebas del sistema de pago. Haz una pasada completa y otra con errores deliberados:

1. Abre cada opción y comprueba que puedes entender qué cambia en el producto antes de avanzar.
2. Selecciona un archivo desde el móvil y confirma que su nombre y estado de carga se leen completos.
3. Escribe en los campos: las etiquetas y ayudas deben seguir disponibles cuando aparece el teclado.
4. Vuelve desde el resumen para corregir el color o el diseño y verifica qué información se conserva.
5. Introduce un dato incompleto y prueba un archivo no admitido. Comprueba que el mensaje lleva a una corrección posible.
6. Revisa el desglose, la dirección y la acción final sin desplazamiento horizontal ni contenido tapado.
7. Completa una operación de prueba y contrasta la referencia y el estado mostrados con lo que recibe el equipo.

Repite la revisión en escritorio y comprueba la navegación con teclado y lector de pantalla. Esta lista sirve para preparar y probar el recorrido; no constituye una evaluación completa de accesibilidad.

Este mapa permite concretar el alcance del diseño de una tienda online: qué se automatiza, qué necesita revisión humana y qué debe poder corregir el cliente. Para ver un trabajo del estudio en comercio electrónico, puedes consultar el proyecto Vuela DTF. El ejemplo de las bolsas de esta guía es independiente de ese proyecto.

Si tu proceso de pedido tiene opciones o archivos, cuéntanos cómo funciona y lo estudiamos contigo.