| Preloader

Background

Several digital resources embedded within a health organisation’s learning modules were relatively memory- and bandwidth-intensive. This meant that resource loading times were often longer than desired, which led to a ‘break’ in the user experience and immersion of the learner, and on occasion, learners skipping content and no visual cue was present.

Approach

To allow for visual and experiential continuity, I researched and tested some initial ideas for a preloader to appear while more resource-intensive content loaded in the background. As such, it would need to be visually in-line with the branding of the learning, engaging enough to identify that a process was occurring in the background, but not so large that it could not be rapidly loaded, and therefore defeating its purpose.

Solution

I used Adobe After Effects to combine and animate several shapes and SVG files in a simple yet engaging way. Once output as a composed GIF, I placed this into the coding of the modules to allow it to appear while the main content loaded ‘behind’ this. The full animation sequence was 10 seconds and I designed it such that a seamless loop could occur should loading times take longer than this (e.g., due to low bandwidth).

Impact

Learners reacted positively to the use of this preloader and resources were no longer skipped. This strategy was also adopted in other modules, and I gave a series of short tutorials on how to use After Effects to produce this and similar preloaders.

⥪ Return to portfolio homepage