ENCARGO 03
Análisis del comportamiento de dos interfaces web, considerando el desplazamiento de sus elementos, distribución de columnas y adaptación a distintos tamaños de pantalla.
¿Qué partes de la pantalla se mueven y cuáles quedan fijas al hacer scroll?
¿Cómo se distribuyen las columnas, usando las herramientas de desarrollador del navegador?
¿Cómo reacciona ese layout cuando la pantalla se reduce al tamaño móvil?
¿Les parecen apropiadas las decisiones tomadas? ¿Harían algún ajuste?
01 / SITIO WEB
SCROLL
Al realizar scroll, el contenido principal de la página se desplaza verticalmente, permitiendo recorrer las diferentes secciones del sitio. El Header de la página y el menú de accesibilidad es lo único que queda fijo.
MMDH — comportamiento de la interfaz durante el scroll.
ESTRUCTURA
Para analizar la distribución de las columnas se utilizaron las herramientas de desarrollador del navegador. Se observa cómo se organizan los diferentes contenedores y elementos del sitio, jugando también con la distribución de imágenes.
MMDH — análisis de estructura.
ESCRITORIO
En la versión de escritorio, el sitio utiliza el espacio horizontal disponible para organizar sus contenidos y generar una jerarquía visual entre textos, imágenes y diferentes secciones.
MMDH — vista de escritorio.
RESPONSIVE
Al reducir el ancho de la pantalla, los contenidos se reorganizan para adaptarse al espacio disponible. Las estructuras horizontales pueden pasar a una disposición vertical y los elementos de navegación ocupan menos espacio.
MMDH — adaptación de la interfaz a formato móvil.
EVALUACIÓN
La organización del sitio permite recorrer diferentes contenidos mediante una estructura de secciones. La adaptación a diferentes tamaños de pantalla permite mantener la jerarquía general de la información.
Como posible ajuste, se podría revisar la cantidad de información visible simultáneamente en algunas secciones para facilitar la lectura y navegación en pantallas pequeñas.
02 / PLATAFORMA
SCROLL
Al hacer scroll, las miniaturas y tarjetas de videos se desplazan verticalmente, permitiendo explorar una gran cantidad de contenidos. Algunos elementos de navegación permanecen visibles durante el recorrido, como preferencias, filtros, búsqueda y suscripciones, entre otros.
YouTube — comportamiento de la interfaz durante el scroll.
ESTRUCTURA
Los videos se organizan mediante una estructura de rejilla. La cantidad de contenidos que aparecen horizontalmente depende del espacio disponible y del tamaño de la pantalla.
YouTube — análisis de columnas.
ESCRITORIO
En escritorio, YouTube aprovecha el ancho disponible para mostrar varios videos simultáneamente. La interfaz separa la navegación del contenido principal, permitiendo explorar diferentes opciones.
YouTube — vista de escritorio.
RESPONSIVE
Al disminuir el ancho de pantalla, la cantidad de columnas se reduce y los contenidos se reorganizan para adaptarse al espacio disponible. La navegación también se simplifica para priorizar el contenido audiovisual.
YouTube — adaptación de la interfaz a formato móvil.
EVALUACIÓN
La estructura de YouTube está pensada para presentar una gran cantidad de contenidos manteniendo una navegación constante. La utilización de una rejilla permite aprovechar el espacio disponible y modificar la cantidad de columnas según el tamaño de la pantalla.
Como posible ajuste, se podría revisar la cantidad de elementos que aparecen simultáneamente para reducir la saturación visual en determinadas vistas.