análisis comparativo · scroll y layout

Cómo se comportan dos interfaces al hacer scroll

Inspección de un sitio web de salud (CCDM) y una plataforma de video (YouTube), usando las herramientas de desarrollador del navegador para observar qué elementos quedan fijos, cómo se distribuyen las columnas y qué cambia en la versión móvil.

Sitio web

CCDM — Centro médico

ccdm.cl

estructura — versión escritorio

Header · logo, tabla de contenidos, iniciar sesión fijo
Carrusel de imágenes introductorias cambia c/5s
Barra de reserva · exámenes / consultas, médico o especialidad interactivo
Servicios en línea · 7 accesos con pictograma estático
Información de la clínica · 4 botones estático
Convenios estático
Novedades / noticias estático
Footer · contacto y ubicaciones fijo
Bloque estático Contenido dinámico

movimiento en scroll

¿Qué partes se mueven y cuáles quedan fijas?

Bajo el header hay un carrusel que cambia cada 5 segundos, alternando presentación del centro médico, atención al paciente, la app para descargar, horarios, y accesos a agendar, rescate e imagenología. El resto de la plataforma permanece fijo, aunque interactivo, priorizando siempre la opción de agendar hora médica.

distribución de columnas

¿Cómo se distribuyen las columnas?

La página se organiza en horizontes apilados: header, carrusel, barra de reserva (con selección de médico desplegada verticalmente), un bloque de 7 servicios en cuadrícula, 4 botones informativos sobre la clínica, convenios, novedades y finalmente el footer con contacto y ubicaciones.

comportamiento responsive

¿Qué cambia en la versión móvil?

El header reduce el logo (sin texto) y deja un único botón para reservar hora más un menú desplegable. El carrusel desaparece. Los servicios se muestran solo como texto, sin sus botones de acceso directo. El resto conserva el orden, pero en una columna más angosta.

valoración

¿Son apropiadas estas decisiones?

Sí: la distribución funciona bien, sobre todo porque la barra de reserva de horas aparece de inmediato, que es la razón principal por la que la mayoría de los usuarios entra al sitio.


Plataforma web

YouTube

youtube.com

estructura — versión escritorio

Header · logo, buscador, crear contenido, cuenta fijo
Chips de temáticas sugeridas fijo
Menú lateral izquierdo · secciones fijo
Grilla de videos (3 por fila) + shorts y anuncios preview al pasar el mouse
Bloque estático Contenido dinámico

movimiento en scroll

¿Qué partes se mueven y cuáles quedan fijas?

Nada se desplaza con el scroll salvo que el mouse pase sobre un video: ahí comienza a reproducirse una vista previa sin necesidad de entrar a él. El resto de la interfaz permanece fijo.

distribución de columnas

¿Cómo se distribuyen las columnas?

El header agrupa logo y buscador a la izquierda, y botones de crear contenido / cuenta a la derecha; justo debajo aparecen chips de temas sugeridos. El menú lateral izquierdo despliega las secciones de navegación. El cuerpo muestra videos en rectángulos horizontales, 3 por fila, en scroll infinito, con shorts (verticales, 5 por pantalla) y anuncios intercalados.

comportamiento responsive

¿Qué cambia en la versión móvil?

La estructura se mantiene, pero el menú lateral pasa a una barra inferior fija durante el scroll vertical. Los videos dejan de mostrarse en grilla de 3 columnas y pasan a 1 por fila.

valoración

¿Son apropiadas estas decisiones?

Sí, aunque se podría sumar un horizonte introductorio con segmentos cortos de los videos sugeridos, para que el usuario escuche un fragmento de interés antes de decidir entrar.