Reto: Optimiza la UX de un E-Commerce

Diseño de navegación para e-commerce

Reto: Optimiza la UX de un E-Commerce

Contenido del curso

Semana 1

  • 1
    Bienvenida

    Bienvenida

    01:21 min
  • 2
    Semana 1 - La Compra Online y Homepages

    Semana 1 - La Compra Online y Homepages

    00:31 min
  • 3
    Sesión inicial: Diseña tu marca y UX

    Sesión inicial: Diseña tu marca y UX

    76:14 min

Semana 2

  • 4
    Semana 2 - Páginas de categorías, de producto y listados

    Semana 2 - Páginas de categorías, de producto y listados

    00:30 min
  • 5
    Diseño de navegación para e-commerce

    Diseño de navegación para e-commerce

    Viendo ahora

Semana 3

  • 6
    Semana 3 - Checkout

    Semana 3 - Checkout

    00:31 min
  • 7
    Checkout (sesión en vivo grabada)

    Checkout (sesión en vivo grabada)

    64:29 min

Semana 4

  • 8
    Live Class - Repaso Final

    Live Class - Repaso Final

    84:17 min
schoolTomar examen
search
CursosEmpresasBlogLiveConfEventosPrecios

0:00/60:35

Diseño de navegación para e-commerce

Reto: Optimiza la UX de un E-Commerce

Clase 5 de 8

Clase 5 / 8

Progreso del curso

Semana 1

  • 1

    Bienvenida

    01:21
  • 2lock

    Semana 1 - La Compra Online y Homepages

    Suscríbete para ver más
  • 3lock

    Sesión inicial: Diseña tu marca y UX

    Suscríbete para ver más

Semana 2

  • 4lock

    Semana 2 - Páginas de categorías, de producto y listados

    Suscríbete para ver más
  • play_arrowlock

    Diseño de navegación para e-commerce

    play_circleViendo ahora

Semana 3

  • 6lock

    Semana 3 - Checkout

    Suscríbete para ver más
  • 7lock

    Checkout (sesión en vivo grabada)

    Suscríbete para ver más

Semana 4

  • 8lock

    Live Class - Repaso Final

    Suscríbete para ver más
workspace_premiumTomar examen

Escuelas

  • Desarrollo Web
    • Fundamentos del Desarrollo Web Profesional
    • Diseño y Desarrollo Frontend
    • Desarrollo Frontend con JavaScript
    • Desarrollo Frontend con Vue.js
    • Desarrollo Frontend con Angular
    • Desarrollo Frontend con React.js
    • Desarrollo Backend con Node.js
    • Desarrollo Backend con Python
    • Desarrollo Backend con Java
    • Desarrollo Backend con PHP
    • Desarrollo Backend con Ruby
    • Bases de Datos para Web
    • Seguridad Web & API
    • Testing Automatizado y QA para Web
    • Arquitecturas Web Modernas y Escalabilidad
    • DevOps y Cloud para Desarrolladores Web
  • English Academy
    • Inglés Básico A1
    • Inglés Básico A2
    • Inglés Intermedio B1
    • Inglés Intermedio Alto B2
    • Inglés Avanzado C1
    • Inglés para Propósitos Específicos
    • Inglés de Negocios
  • Marketing Digital
    • Fundamentos de Marketing Digital
    • Marketing de Contenidos y Redacción Persuasiva
    • SEO y Posicionamiento Web
    • Social Media Marketing y Community Management
    • Publicidad Digital y Paid Media
    • Analítica Digital y Optimización (CRO)
    • Estrategia de Marketing y Growth
    • Marketing de Marca y Comunicación Estratégica
    • Marketing para E-commerce
    • Marketing B2B
    • Inteligencia Artificial Aplicada al Marketing
    • Automatización del Marketing
    • Marca Personal y Marketing Freelance
    • Ventas y Experiencia del Cliente
    • Creación de Contenido para Redes Sociales
  • Inteligencia Artificial y Data Science
    • Fundamentos de Data Science y AI
    • Análisis y Visualización de Datos
    • Machine Learning y Deep Learning
    • Data Engineer
    • Inteligencia Artificial para la Productividad
    • Desarrollo de Aplicaciones con IA
    • AI Software Engineer
  • Ciberseguridad
    • Fundamentos de Ciberseguridad
    • Hacking Ético y Pentesting (Red Team)
    • Análisis de Malware e Ingeniería Forense
    • Seguridad Defensiva y Cumplimiento (Blue Team)
    • Ciberseguridad Estratégica
  • Liderazgo y Habilidades Blandas
    • Fundamentos de Habilidades Profesionales
    • Liderazgo y Gestión de Equipos
    • Comunicación Avanzada y Oratoria
    • Negociación y Resolución de Conflictos
    • Inteligencia Emocional y Autogestión
    • Productividad y Herramientas Digitales
    • Gestión de Proyectos y Metodologías Ágiles
    • Desarrollo de Carrera y Marca Personal
    • Diversidad, Inclusión y Entorno Laboral Saludable
    • Filosofía y Estrategia para Líderes
  • Diseño de Producto y UX
    • Fundamentos de Diseño UX/UI
    • Investigación de Usuarios (UX Research)
    • Arquitectura de Información y Usabilidad
    • Diseño de Interfaces y Prototipado (UI Design)
    • Sistemas de Diseño y DesignOps
    • Redacción UX (UX Writing)
    • Creatividad e Innovación en Diseño
    • Diseño Accesible e Inclusivo
    • Diseño Asistido por Inteligencia Artificial
    • Gestión de Producto y Liderazgo en Diseño
    • Diseño de Interacciones Emergentes (VUI/VR)
    • Desarrollo Web para Diseñadores
    • Diseño y Prototipado No-Code
  • Contenido Audiovisual
    • Fundamentos de Producción Audiovisual
    • Producción de Video para Plataformas Digitales
    • Producción de Audio y Podcast
    • Fotografía y Diseño Gráfico para Contenido Digital
    • Motion Graphics y Animación
    • Contenido Interactivo y Realidad Aumentada
    • Estrategia, Marketing y Monetización de Contenidos
  • Desarrollo Móvil
    • Fundamentos de Desarrollo Móvil
    • Desarrollo Nativo Android con Kotlin
    • Desarrollo Nativo iOS con Swift
    • Desarrollo Multiplataforma con React Native
    • Desarrollo Multiplataforma con Flutter
    • Arquitectura y Patrones de Diseño Móvil
    • Integración de APIs y Persistencia Móvil
    • Testing y Despliegue en Móvil
    • Diseño UX/UI para Móviles
  • Diseño Gráfico y Arte Digital
    • Fundamentos del Diseño Gráfico y Digital
    • Diseño de Identidad Visual y Branding
    • Ilustración Digital y Arte Conceptual
    • Diseño Editorial y de Empaques
    • Motion Graphics y Animación 3D
    • Diseño Gráfico Asistido por Inteligencia Artificial
    • Creatividad e Innovación en Diseño
  • Programación
    • Fundamentos de Programación e Ingeniería de Software
    • Herramientas de IA para el trabajo
    • Matemáticas para Programación
    • Programación con Python
    • Programación con JavaScript
    • Programación con TypeScript
    • Programación Orientada a Objetos con Java
    • Desarrollo con C# y .NET
    • Programación con PHP
    • Programación con Go y Rust
    • Programación Móvil con Swift y Kotlin
    • Programación con C y C++
    • Administración Básica de Servidores Linux
  • Negocios
    • Fundamentos de Negocios y Emprendimiento
    • Estrategia y Crecimiento Empresarial
    • Finanzas Personales y Corporativas
    • Inversión en Mercados Financieros
    • Ventas, CRM y Experiencia del Cliente
    • Operaciones, Logística y E-commerce
    • Gestión de Proyectos y Metodologías Ágiles
    • Aspectos Legales y Cumplimiento
    • Habilidades Directivas y Crecimiento Profesional
    • Diversidad e Inclusión en el Entorno Laboral
    • Herramientas Digitales y Automatización para Negocios
  • Blockchain y Web3
    • Fundamentos de Blockchain y Web3
    • Desarrollo de Smart Contracts y dApps
    • Finanzas Descentralizadas (DeFi)
    • NFTs y Economía de Creadores
    • Seguridad Blockchain
    • Ecosistemas Blockchain Alternativos (No-EVM)
    • Producto, Marketing y Legal en Web3
  • Recursos Humanos
    • Fundamentos y Cultura Organizacional en RRHH
    • Atracción y Selección de Talento
    • Cultura y Employee Experience
    • Gestión y Desarrollo de Talento
    • Desarrollo y Evaluación de Liderazgo
    • Diversidad, Equidad e Inclusión
    • AI y Automatización en Recursos Humanos
    • Tecnología y Automatización en RRHH
  • Finanzas e Inversiones
    • Fundamentos de Finanzas Personales y Corporativas
    • Análisis y Valoración Financiera
    • Inversión y Mercados de Capitales
    • Finanzas Descentralizadas (DeFi) y Criptoactivos
    • Finanzas y Estrategia para Startups
    • Inteligencia Artificial Aplicada a Finanzas
    • Domina Excel
    • Financial Analyst
    • Conseguir trabajo en Finanzas e Inversiones
  • Startups
    • Fundamentos y Validación de Ideas
    • Estrategia de Negocio y Product-Market Fit
    • Desarrollo de Producto y Operaciones Lean
    • Finanzas, Legal y Fundraising
    • Marketing, Ventas y Growth para Startups
    • Cultura, Talento y Liderazgo
    • Finanzas y Operaciones en Ecommerce
    • Startups Web3 y Blockchain
    • Startups con Impacto Social
    • Expansión y Ecosistema Startup
  • Cloud Computing y DevOps
    • Fundamentos de Cloud y DevOps
    • Administración de Servidores Linux
    • Contenerización y Orquestación
    • Infraestructura como Código (IaC) y CI/CD
    • Amazon Web Services
    • Microsoft Azure
    • Serverless y Observabilidad
    • Certificaciones Cloud (Preparación)
    • Plataforma Cloud GCP

Platzi y comunidad

  • Platzi Business
  • Live Classes
  • Lanzamientos
  • Executive Program
  • Trabaja con nosotros
  • Podcast

Recursos

  • Manual de Marca

Soporte

  • Preguntas Frecuentes
  • Contáctanos

Legal

  • Términos y Condiciones
  • Privacidad
  • Tyc promociones
Reconocimientos
Reconocimientos
Logo reconocimientoTop 40 Mejores EdTech del mundo · 2024
Logo reconocimientoPrimera Startup Latina admitida en YC · 2014
Logo reconocimientoPrimera Startup EdTech · 2018
Logo reconocimientoCEO Ganador Medalla por la Educación T4 & HP · 2024
Logo reconocimientoCEO Mejor Emprendedor del año · 2024
De LATAM conpara el mundo
YoutubeInstagramLinkedInTikTokFacebookX (Twitter)Threads

Comentarios (0)0 comentarios

    Aún no hay aportes en esta clase

    Escribe tu pregunta o comentario y sé la primera persona en participar en esta clase.

Recursos

Una experiencia de compra clara y completa empieza por entender el catálogo y elegir la navegación adecuada. Aquí se sintetizan las decisiones clave para UX en e‑commerce: cómo modelar categorías y listados, cuándo usar menú hamburguesa o barra inferior, y qué debe contener una página de producto para impulsar la conversión y llevar al usuario con confianza hasta el checkout.

¿Cómo modelar el catálogo y elegir la navegación en UX e‑commerce?

Conocer la naturaleza del catálogo es el primer paso. La anchura (cuántas categorías) y la profundidad (familias y subfamilias) condicionan la arquitectura, la navegación y las pantallas.

  • Analiza variabilidad del catálogo: tendencia, estacionalidad, cambios de proveedores y precio.
  • Ajusta UX al tipo de producto: fresco, moda, calzado, software o servicios.
  • Diseña para contextos: desktop y mobile deben considerarse desde el inicio.
  • Si el público tiene baja alfabetización digital, valora un breve onboarding visual.

¿Cuándo usar menú hamburguesa o barra inferior?

  • Catálogo ancho y profundo: menú hamburguesa. Ahorra espacio y escala en mobile y escritorio.
  • Pocas opciones (3–4): botonera inferior o bottom navigation.
  • Evita menú hamburguesa si el público no reconoce la metáfora. Un onboarding puede ayudar.

¿Qué deben lograr categorías, listados y SEO en e‑commerce?

Las páginas de categorías y los listados de producto impulsan el tráfico orgánico: generan contenido indexable y ayudan a posicionar. Úsalas cuando exista mínima anchura y profundidad; si el catálogo es muy reducido, pueden no ser necesarias.

  • Objetivos del listado: presentar productos a quien no los conoce, mostrarlos a todos y clasificarlos.
  • En listados, añade call to action (CTA) de compra cuando el producto lo permita.
  • La navegación en mobile exige opciones visibles y espacio para contenido.

¿Qué aprendizajes dejó la revisión de home reales?

  • Deja claro qué vendes y si es producto o servicio. Especifica si es para profesionales o público general.
  • Muestra producto en el primer viewport y explica beneficios sin ambigüedad.
  • Evita que sliders o banners automáticos dividan la atención o oculten info crítica (por ejemplo, delivery). Asegura la visibilidad de flechas y contraste de elementos sobre el background.
  • Incluye CTA en listados cuando aplique; si no hay compra, explica por qué (p. ej., sin stock).
  • Cuida consistencia visual: proporción de imágenes, alineación de precio y botones (select options, quick view). La coherencia facilita escaneo y reduce errores.

¿Cómo convertir en la página de producto y el checkout?

La página de producto es tu mejor comercial: aquí el usuario inicia y ejecuta su decisión. Debe reunir información completa, elementos persuasivos y CTAs inequívocos.

¿Qué información no puede faltar?

  • Nombre descriptivo: evita códigos internos.
  • Imágenes reconocibles, grandes y ampliables. Si el detalle aporta valor, que se vea.
  • Contenido original (fotos propias): Google prioriza lo original y sirve a tus objetivos.
  • Disponibilidad: si no hay stock, indica cuándo volverá y ofrece avisos por email.
  • Precio final: incluye promociones, impuestos y costes asociados.
  • Entrega: tiempos, quién entrega, peso y características del paquete.
  • CTA claro: añadir al carrito o ir a pago. Si usas one-page checkout, que sea evidente.

¿Cómo facilitar la comparación y la confianza?

  • Reviews, ratings y opiniones de clientes y expertos.
  • Información técnica detallada; si procede, PDFs descargables.
  • Soportes de decisión: comparativas y benchmarks cuando apliquen.
  • Guías de tallas y, si aporta, experiencias con realidad aumentada o virtual.
  • Considera vectores de contexto en mercado global: clima o campañas (p. ej., Black Friday, Navidad) afectan expectativas.

En todo el recorrido, el carrito debe ser visible y accesible. Señala su estado, no desaparezca, y permita continuar la compra con fluidez. Una experiencia de checkout clara define el éxito de la conversión.

¿Tienes dudas o quieres compartir tu avance, wireframes o prototipos? Deja tu comentario y enlace a tus entregables para recibir feedback de la comunidad.