If you're the kind of geek who takes delight in - or even notices - the animated graphics that accompany error messages, you may be interested to know it takes an entire work week for motion designers at Indonesian web giant Gojek to create one.

That tidbit was revealed in a blog post about the design process behind the cartoons used in the popular Gopay app.

Senior designer Jean Dsouza revealed in a conversation with head of motion design, Binoy Cyriac, that she spends around 70 percent of the time it takes to create an image just thinking about it.

"If I spend four days thinking about it, I can finish multiple animations in one day," explained Dsouza.

Among the cartoons is an "unable to proceed" animation in which a little boy rocks back and forth on his bicycle in front of an orange cone, a word bubble containing a scribble emanating from his head.

Another includes a sighing boyish-looking male figure tapping his feet and playing with a fidget toy as his device experiences a connection error. His body can be seen contracting during the exhale.

Dsouza stated her method for producing the images relies on physically or mentally rehearsing behavior related to the inconvenience or failure.

"When my Wi-Fi isn't working I'm super restless and my foot begins to shake to release that restless energy," offered Dsouza.

Ramping up or down the movements of the animation sets the tones, added Dsouza - who described Gojek's tone as "quirky and cute."

During the bulk of her prep time, Dsouza also plans how to execute the animation. Doing so helps her create in a smart way that will reduce time and effort when it comes to actually making the image using tools like Adobe After Effects.

For example, separating out a leg can allow it to be rotated instead of animated frame by frame - a design decision that can shave off a load of time.

Before the motion designer can set to work, they receive assets from an illustrator. Those assets may be a collection of facial expressions, body positions, and perhaps changing states of any accessories - for example, a vehicle wheel getting inflated from flat to perfect to perhaps overinflated and popped in six different images.

A thoughtful illustrator might think about separating that aforementioned leg out for rotation as well, thus reducing the motion designer's headache.

The motion designer takes the assets from the illustrator and creates the animations before sending them to the developer for deployment on the app.

Cyriac confirmed to The Register that an animated graphic like the ones in Gojek's failure modes take about a week - "more or less."

As for what it does for the user, the motion designer feels they are impactful.

"We have considerable statistically significant data to prove that motion design gives our users a better experience. This has resulted in increased user engagement and conversions," Cyriac told The Reg

"While the most common use of motion is to bring some life and delight to the user's experience of navigating through user interfaces, it can also help prevent blindness to change and reduce cognitive load,” reads a description of the role of motion designer on a Gojek job ad.

A wordless animated image may also be a clever way for a business that operates in five different countries - Indonesia, Vietnam, Singapore, Thailand, and Philippines, all with different and sometimes multiple official languages - to get a point across.

Vignesh Ilangovan, creative director at Singapore-based animation house Triken Studios agreed that the motion design is essentially a visual, more intuitive form of communication.

He confided that "motion designer" is in some ways just a new way to say "animator." The difference is that the format and style has changed over the years.

In the past, animations were heavy on being verbal explainers. "They used to have a character and say things like 'this is Bob …', but they don't do that anymore. Higher-end studios prefer something more abstract," he explained.

Apple, for example, has taken this approach - or
outsourced this approach [VIDEO] - for over a decade.

Developers that forgo the artwork may find their product looks unfinished - not visually reflecting the high level of tech that lies underneath the metaphorical hood.

Ilangovan's studio has been called in before to make artwork for an app facing that exact dilemma. A few illustrations ultimately gave the user the confidence that the product was well thought out - as proved during beta testing.

As for Gojek's images, he explained that the animation loops are there to keep users entertained while waiting with the knowledge that something was actually happening.

"It goes back to ten to twenty years ago when we surfed online and there was nothing to tell you if a website was loading. Then they introduced a preloader - a bar that progressively was filled in, so visually the user doesn't think the browser is hung," mused the creative director. "This is the natural progression of trying to connect to the user's emotion and show we know the feeling and you'll have to wait a bit more."

"It's today's web preloader," he added. ®

https://www.theregister.com//2024/02/20/gojek_failed_state_error_designs/