Spinners vs Skeletons en pantallas de carga
Contenido del curso
Optimización de imágenes
Paginación
Almacenamiento local
Bonus
Próximos pasos
Spinners vs Skeletons en pantallas de carga
Spinners vs Skeletons en pantallas de carga
Contenido del curso
Una pantalla esqueleto (skeleton screen) es esencialmente una estructura de la aplicación. Son un reemplazo para el spinner de carga tradicional. Estos ayudan a mejorar la experiencia de usuario, haciendola ver con un mejor performance.
Mi propuesta
Mi repositorio GitHub del proyecto: Click Aquí
Mi repositorio GitHub del commit del feature: Click Aquí
Mi repositorio GitHub de los cambios: Click Aquí
. .
Anexos:
Buen trabajo 👍
encontré donde dice el tiempo que tarda en cargar todo.
Ese momento incomodo en el ke el prosor habla de los tiempos de espera para los usuarios y se lagea el video del curso, y me dan ganas de irme a la competencia, pero luego recuerdo ke se me fue la mitad del sueldo en la suscripción y se me pasa...
En ajustes del video puedes escoger entre el servidor A,B o C para mejorar la carga
Incluso cambiando de servidor, los videos de Platzi muchas veces van lento en comparación con YouTube, donde todo carga rápido.
loading Spinner VS loading skeletons
Good characteristics of the loading screens:
We have tow principal strategies to handle loading screens:
A quí, les recomiendo que vayan a tomar los cursos básicos de Marketing. Porque, hablan sobre éste tema.
Sobre todo si tú, planeas hacer un E-commerce, te ayudará a comprender cuánto perderías por cada usuario que se va al no tener una carga rápida además, de la accesibilidad ( UX/UI).
Eso explica porque es una eternidad cuando la barrita de carga llega al 99.99% 😅
¡Qué cool! Hasta esta clase no sabía que las "plantilla de carga" que usa youtube se llamaban Loading Skeletons, je je. · En mi caso, tras terminar el curso anterior (el práctico de consumo de apis) decidí colocarle unas pantallas de carga a mi aplicación de PlatziMovies: Específicamente un Loading Spiner bonito que entré por internet y que además tenía el mismo colorcito morado de la app 💜. Pero tras ver esto, ahora intentaré implementar un loading skeleton ya que pienso que se ve mucho más bonito, je je je, 😊. · Dejaré por aquí un ejemplo de cómo carga ahora mismo mi versión de PlatziMovies con el loading spiner que le coloqué~
!Ey!, ¿Cómo que esas barras son mentira?
Qué tonto fui. 😪
Loading Skeletons == Wireframes
Les comento un caso en donde la velocidad de carga extremadamente rápida incluso es contraproducente.
Los buscadores de vuelo, buscadores de cotizaciones de seguros y otros buscadores similares que desde nuestra perspectiva deberian analizar gran cantidad de datos para arrojarnos una respuesta, si la misma es instantanea nos da la sensación que no analizaron nada y por lo tanto la respuesta es de baja calidad. Por eso despegar, kayak, etc aumentaron el tiempo de respuesta.
Se puso potente con el English :v
Para la barra de carga con un porcentaje, se me ocurre hacer una logica en la que le pases x recursos por ejemplo la carga de 3 js, son 3 recursos y es un 100% que significa que ya esta cargado dividimos ese 100 en 3 vamos haciendo una carga lenta de 0 a en este caso 33% y cuando ya esta cargado rapidamente que lo lleve al 33% y asi por cada uno de los recursos/ peticiones
Que peeeedooo con los tiempos de carga de mi app en slow 3G 😱 terribleeee!! jajaj
Te gano XD
¿Me estás diciendo que este LOADING es hardcodeado? 🤯😨
Ejemplo de Loading spinner:
Las pantallas de carga existen porque la información no llega al instante y los usuarios odian perder el control. Si una página tarda más de 3 segundos en cargar, el Bounce Rate (abandono) aumenta drásticamente.
Principios fundamentales
Estrategias de carga