Qué debe aparecer en la parte superior de una página de producto

Trata la parte superior como un primer momento de decisión

La zona superior es lo que se ve antes de desplazarse. No es un rectángulo fijo. Un móvil, una tableta, un portátil y un monitor muestran cantidades distintas de contenido. El tamaño del texto, la orientación y la configuración del navegador también cambian el espacio. Úsala como herramienta de prioridad, no como obligación de encajar todo.

La primera vista debe responder tres preguntas: ¿qué producto es?, ¿por qué puede servirme? y ¿qué puedo hacer después? Si alguien no identifica el artículo, no entiende su valor principal o no encuentra la acción, el contenido inferior ayudará menos.

Empieza por el origen y la intención de la visita. Alguien que llega desde una búsqueda concreta quiere confirmar que la página coincide con su expectativa. Quien viene de una categoría necesita entender rápido uso, precio y opciones. La parte superior debe continuar la promesa del canal anterior.

Haz evidente la identidad del producto

Coloca nombre, imagen principal útil y explicación breve en la primera vista. El nombre debe distinguir el artículo de productos parecidos. Si tamaño, modelo, material, compatibilidad o cantidad son esenciales, inclúyelos en el título o junto a él.

Usa imágenes que muestren el contexto relevante. En ropa pueden importar varios ángulos y el ajuste. En muebles, escala y entorno. En software, una interfaz o flujo reconocible es más útil que una ilustración decorativa. La imagen debe ayudar a entender, no solo crear ambiente.

Añade una frase breve de valor. Explica qué tarea resuelve el producto o qué situación apoya. No llenes la primera pantalla con una introducción larga, pero tampoco reduzcas todo a un eslogan que podría valer para cualquier artículo.

Muestra pronto precio, valor y disponibilidad

El precio forma parte de la identidad del producto para muchos compradores. Muéstralo con claridad e indica suscripciones o variaciones. Si entrega, impuestos o accesorios necesarios cambian mucho el total, ofrece una indicación visible antes del pago.

La disponibilidad debe estar cerca del precio y la acción. Indica si hay stock, si se fabrica bajo pedido, si está temporalmente agotado o si llegará en una fecha conocida. Si la información es aproximada, explícalo. La urgencia artificial no sustituye a una disponibilidad útil.

Usa el espacio cercano al precio para el motivo práctico más fuerte para elegir. Puede ser capacidad, ajuste, compatibilidad, rapidez, garantía o un uso concreto. Mantén la afirmación exacta y relaciónala con pruebas más abajo.

Coloca opciones y acción donde se esperan

Si hace falta seleccionar talla, color, licencia, cantidad o configuración, muestra la elección junto a la compra. Etiqueta opciones claramente e indica cuál está activa. Si la elección cambia precio, stock o entrega, actualiza la información de inmediato. No obligues a escoger lejos y buscar después la acción actualizada.

Haz clara la acción principal: añadir al carrito, comprar, iniciar prueba, reservar o pedir disponibilidad. Usa un verbo de acción en lugar de un botón ambiguo como “continuar”. Coloca errores cerca del campo y explica qué debe corregirse.

Las acciones secundarias pueden estar cerca sin competir. Lista de deseos, comparar, contacto o guía de tallas pueden ayudar, pero demasiados botones con la misma fuerza generan dudas. Cada acción necesita una función y prioridad visual.

Reduce incertidumbre sin llenar la pantalla

Antes de actuar, algunos compradores necesitan confianza. Cerca de la compra muestra solo información que responda preocupaciones inmediatas: entrega, devoluciones, pago, garantía o ayuda. Ofrece enlaces hacia las políticas completas en lugar de colocar todo arriba.

Haz visibles las incertidumbres importantes. Si se necesita instalación, la compatibilidad es limitada o la devolución tiene condiciones, no lo escondas bajo promociones. Los límites claros reducen pedidos inadecuados y hacen más honesta la compra.

Las reseñas ayudan cuando son relevantes y creíbles. Una puntuación o número de opiniones puede apoyar, pero no debe desplazar producto, precio, opciones y acción. Los sellos decorativos sin respuesta a una pregunta añaden ruido.

Diseña para móvil y para lo que viene después

La primera vista móvil suele ser mucho más corta, así que priorizar importa todavía más. Mantén nombre, imagen, precio, elección esencial y acción fáciles de encontrar. No dejes que una gran pancarta empuje la compra muy abajo. Prueba desplazamiento, acciones fijas, zoom y acceso con teclado o lector de pantalla.

La primera vista debe invitar a seguir. Debajo puedes explicar descripción, especificaciones, entrega, devoluciones, reseñas, comparaciones y productos relacionados. Una buena parte superior no sustituye toda la historia; ofrece un motivo y una ruta para continuar.

Revisa la estructura con grabaciones, analítica, preguntas de clientes y pruebas de uso cuando sea adecuado. ¿Llegan a la acción? ¿Eligen opciones correctamente? ¿Encuentran la información que el equipo de soporte da una y otra vez? La mejor estructura ayuda al comprador adecuado a decidir qué hacer después.

Fuentes

• Product page UX research · Baymard Institute
• Web Accessibility Initiative · W3C

Preguntas frecuentes

¿Cuál es el elemento más importante arriba?

Depende de la tienda, pero identidad, valor, precio, disponibilidad y siguiente acción suelen necesitar visibilidad temprana.

¿Debe verse el botón de compra de inmediato?

Debe ser fácil de encontrar cuando se entienden producto y opciones. En móvil, prueba si una acción fija o repetida ayuda sin tapar contenido importante.

¿Las reseñas deben estar arriba?

Las valoraciones o señales de reseñas relevantes pueden ayudar, pero no deben desplazar identidad, precio, opciones o acción principal.

¿Cómo decido qué colocar primero?

Usa intención de búsqueda, preguntas de clientes, complejidad del producto, dispositivos y acción esperada. Después prueba el diseño resultante en lugar de fiarte solo de preferencias de diseño.