Mejorar el flujo de usuarios a través de las transiciones de página

 

 

 

  • Clase magistral de diseño para una interfaz de usuario compleja, con Vitaly Friedman
  • ¡Registro!

  • Índice
    1. Ejemplos
      1. Obtener la página
      2. Cambiar la URL actual
      3. Analizar y agregar el nuevo contenido
      4. ¡Animar!
    2. Yendo aún más lejos
      1. Usando un caché
      2. Animar la página actual
      3. Precargando la página siguiente
      4. Partial Output
    3. Wrapping Up

    Las transiciones entre páginas pueden mejorar la experiencia al retener el contexto del usuario, mantener su atención y brindar continuidad visual y retroalimentación positiva, al mismo tiempo que son estéticamente agradables y divertidas y pueden reforzar la marca cuando se hacen bien. En este artículo, Luigi De Rosa creará, paso a paso, una transición entre páginas. También hablará de los pros y los contras de esta técnica y de cómo llevarla al límite.

     

    Cada vez que se interrumpe la experiencia de un usuario, aumentan las posibilidades de que se vaya. Cambiar de una página a otra a menudo provocará esta interrupción al mostrar un destello blanco sin contenido, tardar demasiado en cargar o sacar al usuario del contexto en el que se encontraba antes de que se abriera la nueva página.

    Las transiciones entre páginas pueden mejorar la experiencia al retener (o incluso mejorar) el contexto del usuario, mantener su atención y brindar continuidad visual y retroalimentación positiva. Al mismo tiempo, las transiciones de página también pueden ser estéticamente agradables y divertidas y pueden reforzar la marca cuando se hacen bien.

    En este artículo, crearemos, paso a paso, una transición entre páginas. También hablaremos de los pros y los contras de esta técnica y de cómo llevarla al límite.

    Ejemplos

    Muchas aplicaciones móviles hacen buen uso de las transiciones entre vistas. En el siguiente ejemplo, que sigue las pautas de diseño de materiales de Google , vemos cómo la animación transmite relaciones jerárquicas y espaciales entre páginas.

    y es posible debido a la naturaleza de propagación de eventos de la API HTML DOM.

    Obtener la página

    Ahora que hemos interrumpido el navegador cuando intenta cambiar la página, podemos recuperar esa página manualmente usando Fetch API . Veamos la siguiente función, que recupera el contenido HTML de una página cuando se le proporciona su URL.

    function loadPage(url) { return fetch(url, { method: 'GET' }).then(function(response) { return response.text(); });}

    Para los navegadores que no admiten la API Fetch, considere agregar el polyfill o usar el antiguo XMLHttpRequest.

    Cambiar la URL actual

    HTML5 tiene una API fantástica llamada pushState, que permite a los sitios web acceder y modificar el historial del navegador sin cargar ninguna página. A continuación, lo usamos para modificar la URL actual para que sea la URL de la página siguiente. Tenga en cuenta que esta es una modificación de nuestro controlador de eventos de clic de anclaje previamente declarado.

    if (el) { e.preventDefault(); history.pushState(null, null, el.href); changePage(); return;}

    Como habrás notado, también hemos agregado una llamada a una función denominada changePage, que veremos en detalle en breve. También se llamará a la misma función en el popstateevento, que se activa cuando cambia la entrada del historial activo del navegador (como cuando un usuario hace clic en el botón Atrás de su navegador):

    window.addEventListener('popstate', changePage);

    Con todo esto, básicamente estamos construyendo un sistema de enrutamiento muy primitivo, en el que tenemos modos activo y pasivo.

    Nuestro modo activo se usa cuando un usuario hace clic en un enlace y cambiamos la URL usando , mientras que el modo pasivo se usa cuando la URL cambia y el evento pushStatenos notifica . popstateEn cualquier caso, llamaremos a changePage, que se encarga de leer la nueva URL y cargar la página correspondiente.

    Analizar y agregar el nuevo contenido

    Normalmente, las páginas por las que se navega tendrán elementos comunes, como headery footer. Supongamos que usamos la siguiente estructura DOM en todas nuestras páginas (que en realidad es la estructura de Smashing Magazine):

    var main = document.querySelector('main');function changePage() { // Note, the URL has already been changed var url = window.location.href; loadPage(url).then(function(responseText) { var wrapper = document.createElement('div'); wrapper.innerHTML = responseText; var oldContent = document.querySelector('.cc'); var newContent = wrapper.querySelector('.cc'); main.appendChild(newContent); animate(oldContent, newContent); });}

    ¡Animar!

    Cuando el usuario hace clic en un enlace, la changePagefunción busca el HTML de esa página, luego extrae el cccontenedor y lo agrega al mainelemento. En este punto, tenemos dos cccontenedores en nuestra página, el primero perteneciente a la página anterior y el segundo de la página siguiente. Blog de divulgación científica

     

    La siguiente función, animate, se encarga de fundir los dos contenedores superponiéndolos, desvaneciendo el antiguo, desvaneciendo el nuevo y eliminando el contenedor antiguo. En este ejemplo, estoy usando la API de animaciones web para crear la animación de desvanecimiento, pero, por supuesto, puedes usar cualquier técnica o biblioteca que desees.

    function animate(oldContent, newContent) { oldContent.style.position = 'absolute'; var fadeOut = oldContent.animate({ opacity: [1, 0] }, 1000); var fadeIn = newContent.animate({ opacity: [0, 1] }, 1000); fadeIn.onfinish = function() { oldContent.parentNode.removeChild(oldContent); };}

    El código final está disponible en GitHub .

    . Esta técnica funciona plenamente como una mejora progresiva . Las páginas aún se muestran y son accesibles de la forma habitual, y el sitio web seguirá funcionando normalmente cuando JavaScript esté deshabilitado.

    Si está utilizando un marco SPA, considere usar la navegación PJAX en su lugar, solo para mantener la navegación rápida. Al hacerlo, obtiene soporte heredado y crea un sitio web más compatible con SEO.

    Yendo aún más lejos

    Podemos seguir superando el límite de esta técnica optimizando ciertos aspectos de la misma. Los siguientes trucos acelerarán la navegación, mejorando significativamente la experiencia del usuario.

    Usando un caché

    Al cambiar ligeramente nuestra loadPagefunción, podemos agregar un caché simple, que garantiza que las páginas que ya han sido visitadas no se vuelvan a cargar.

    var cache = {};function loadPage(url) { if (cache[url]) { return new Promise(function(resolve) { resolve(cache[url]); }); } return fetch(url, { method: 'GET' }).then(function(response) { cache[url] = response.text(); return cache[url]; });}

    Como habrás adivinado, podemos usar un caché más permanente con la API de caché u otro caché de almacenamiento persistente del lado del cliente (como IndexedDB).

    Animar la página actual

    Nuestro efecto de fundido cruzado requiere que la siguiente página esté cargada y lista antes de que se complete la transición. Con otro efecto, es posible que deseemos comenzar a animar la página anterior tan pronto como el usuario haga clic en el enlace, lo que le brindaría retroalimentación inmediata, una gran ayuda para el rendimiento percibido.

    Al utilizar promesas , manejar este tipo de situaciones resulta muy fácil. El .allmétodo crea una nueva promesa que se resuelve tan pronto como se resuelven todas las promesas incluidas como argumentos.

    // As soon as animateOut() and loadPage() are resolved…Promise.all[animateOut(), loadPage(url)] .then(function(values) { …

    Precargando la página siguiente

    Usando solo la navegación PJAX, los cambios de página suelen ser casi dos veces más rápidos que la navegación predeterminada, porque el navegador no tiene que analizar ni evaluar ningún script o estilo en la nueva página.

    Sin embargo, podemos ir aún más lejos al comenzar a precargar la página siguiente cuando el usuario pasa el cursor sobre el enlace o comienza a tocarlo.

    .)

    Partial Output

    In our loadPage function, we are fetching the entire HTML document, but we actually just need the cc container. If we are using a server-side language, we can detect whether the request is coming from a particular custom AJAX call and, if so, output just the container it needs. By using the Headers API, we can send a custom HTTP header in our fetch request.

    function loadPage(url) { var myHeaders = new Headers(); myHeaders.append('x-pjax', 'yes'); return fetch(url, { method: 'GET', headers: myHeaders, }).then(function(response) { return response.text(); });}

    Then, on the server side (using PHP in this case), we can detect whether our custom header exists before outputting only the required container:

    if (isset($_SERVER['HTTP_X_PJAX'])) { // Output just the container}

    This will reduce the size of the HTTP message and also reduce the server-side load.

    Wrapping Up

    After implementing this technique in a couple of projects, I realized that a reusable library would be immensely helpful. It would save me time in implementing it on each occasion, freeing me to focus on the transition effects themselves.

    Thus was born Barba.js, a tiny library (4 KB minified and gZip’d) that abstracts away all of this complexity and provides a nice, clean and simple API for developers to use. It also accounts for views and comes with reusable transitions, caching, prefetching and events. It is open source and available on GitHub.

  • Designing In The Transition To A Multi-Device World
  • Providing A Native Experience With Web Technologies
  • Getting Started With Neon Branching
  • (rb, ml, al, il, mrn)Explore more on

    • Coding
    • UX
    • Mobile
    • JavaScript





    Tal vez te puede interesar:

    1. ¿Deberían abrirse los enlaces en ventanas nuevas?
    2. 24 excelentes tutoriales de AJAX
    3. 70 técnicas nuevas y útiles de AJAX y JavaScript
    4. Más de 45 excelentes recursos y repositorios de fragmentos de código

    Mejorar el flujo de usuarios a través de las transiciones de página

    Mejorar el flujo de usuarios a través de las transiciones de página

    Clase magistral de diseño para una interfaz de usuario compleja, con Vitaly Friedman ¡Registro! Índice

    programar

    es

    https://pseint.es/static/images/programar-mejorar-el-flujo-de-usuarios-a-traves-de-las-transiciones-de-pagina-897-0.jpg

    2024-04-04

     

    Mejorar el flujo de usuarios a través de las transiciones de página
    Mejorar el flujo de usuarios a través de las transiciones de página

    Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

     

     

    Top 20