En el frontend siempre buscamos la manera de mejorar nuestras interfaces para que los usuarios se sientan cómodos y les sea agradable usar la aplicación. Existen muchas técnicas o patrones de diseño que hablan sobre ello.
Hoy te hablaré sobre Optimistic UI, una técnica muy sencilla que puedes utilizar para mejorar la experiencia de los usuarios en tu aplicación.
Esta técnica consiste en reducir el tiempo de espera que un usuario experimenta al realizar un evento que pareciera poder ser inmediato, como al enviar un mensaje en un chat o darle click al botón de "me gusta".
Pero en realidad, esto toma un tiempo desde que el usuario realiza la acción, el cliente se comunica con el servidor, en el servidor se realiza un proceso y finalmente responde nuevamente al cliente con una respuesta.
En este proceso de comunicación puede ocurrir un delay de milisegundos o muy pocos segundos. Parecido a como lo vemos en el siguiente ejemplo.
Ahora, para un usuario se le haría raro que al presionar un botón de "me gusta", se tarde un tiempo en que la interfaz muestre un cambio de estado (por ejemplo que el botón haya cambiado de color) y eso es precisamente lo que el patrón de diseño Optimistic UI busca resolver.
Si sabemos que la respuesta a un evento como el "Like" a una foto o publicación casi siempre será positiva, podemos, siendo optimistas, cambiar el estado del componente UI, en este caso el botón inmediatamente después de que el usuario presiona el botón, ignorando el tiempo en que tarda el servidor en responder, porque al fin y al cabo estamos siendo optimistas en que la respuesta será OK. Así como vemos a continuación.
En un pequeño ejemplo de código, usando JavaScript esto lo podemos ver como
const likeEvent = () => {
const likeBtn = document.getElementById("like-button")
likeBtn.classList.add("liked")
fetch("POST", "dominio.com/api/like")
.then(response => console.log(response.json()))
.catch(error => console.log(error))
}
Como puedes observar, estamos cambiando el estado del botón, agregándole una clase css para que cambie su estilo, antes de enviar la petición al servidor con el evento. De esta manera, el usuario experimentará una sensación de inmediatez, sin darse cuenta que tras bambalinas, hubo un pequeño retraso mientras el cliente se comunicaba con el servidor. Es una técnica que juega más que todo con la psicología del usuario, pero no cambia nada en el rendimiento de tu aplicación.
¿Qué pasa si la respuesta es negativa?
Quizá ahora te estás haciendo esta pregunta. Si bien fuimos optimistas al pensar que la respuesta sería positiva, también podría fallar ¿no? En ese caso, podemos revertir el estado del componente UI una vez que recibimos la respuesta del servidor y ésta sea un error. Si sabemos que la mayoría del tiempo será positiva, es bueno igualmente tener un plan B para los casos en que no.
Usando el código del ejemplo anterior, podríamos hacer lo siguiente.
const likeEvent = () => {
const likeBtn = document.getElementById("like-button")
likeBtn.classList.add("liked")
fetch("POST", "dominio.com/api/like")
.then(response => console.log(response.json()))
.catch(error => {
likeBtn.classList.remove("liked")
console.log(error)
})
}
De esta manera, estaremos aplicando la técnica Optimistic UI, pero con un plan B en caso de que la respuesta del servidor sea negativa.
Para finalizar, quería mencionar que si quieres ver un caso de uso real, puedes fijarte en las interacciones de Facebook y el botón "Like" de Instagram. Son dos escenarios donde se aplica este patrón.
¿Qué piensas de esta técnica? ¿Crees que sí mejora la experiencia del usuario sentir inmediatez en sus interacciones con la aplicación?
Si no entendiste como funciona te dejo estos curso completamente gratis