Summary: UX animations should emulate the cartoon physics of Bugs Bunny | AI animation overload looms | Misadventures in image generation | Most-liked UX postings on LinkedIn
UX Roundup for January 2, 2024. Happy New Year from all of us at UX Tigers (which is still only Jakob Nielsen). Leonardo.
User Interface Animations Should Emulate Cartoon Animation
The physics of classic animated cartoons is not real-world physics. If you run off a cliff, your descent will follow the curve of a parabola: continued linear horizontal velocity stemming from your run, coupled with an ever-faster drop in the vertical direction, accelerated by gravity.
That’s not what happens when Wile E. Coyote runs off the edge of a cliff in pursuit of the “Beep Beep” Road Runner. Initially, he just keeps running in the same direction, even though he’s running on thin air that couldn’t support him in the real world. Only when he looks down and realizes that he has no support does he drop. And then he drops straight down, not following the parabola dictated by real-world physics.
Classic cartoon animation has many such deviations from the real world, all introduced because they look better to the audience and attract attention to the action. Many of these ideas are taken to absurdity in the movie Who Framed Roger Rabbit? Watch it (again?) with an eye toward learning some tricks for UI animation.
Because cartoon animation directs attention and looks good, we should apply many of those principles in UI animation. You might expect me to be against animation in the user interface, and I am indeed against gratuitous animation, slow animations (taking longer than ~0.5 s), and animations that outstay their welcome by repeating too often. However, proper animations can enhance usability by drawing attention to important changes in the system state. Usability heuristic #1 is “Visibility of System Status,” and we can interpret this as making sure that important state changes are not just visible but noticeable. (Obviously, a corollary is that unimportant changes shouldn’t be flashed at the user.)
A great example of useful animations was recently posted by Justin Volz, who is a Senior Motion Designer at Google. I love that UX has expanded its remit such that this is now a legit job title.
This boy will not fall to the ground until he looks down and discovers that he’s running in thin air. Also, notice the poof behind him, which visualizes his speed and where he came from. Cartoon physics was designed for usability in addition to humor. (Dall-E)
Animation Overload Looms
I was experimenting with animating some AI-generated images (honoring my UXtigers.com website). This new capability of several image-generating AI tools is not ready for prime time, according to this example, where I used Leonardo’s animation feature to add movement to the hero image for one of my forthcoming newsletters. Notice how the hind leg vanishes halfway through.
Walking tiger, as animated by Leonardo.
Of course, it's impressive to get any animation at a single click of a button, and also that the AI deduces that good animation would be to make the tiger walk (and not, say, jump). Furthermore, these are still early days: the feature launched a few days ago. Give it a year, and bye-bye, Pixar.
Since Leonardo’s animation feature seems to perform better with realistic images, I tried a more naturalistic tiger in a natural setting, even though this is not my preferred illustration style. Probably better than the neon tiger, but it still has trouble with the legs.
My real worry is that we will be inundated with animation across websites and social media feeds, purely to attract eyeballs, even when the animation adds no value. Mark my words, we're in for a serious user experience setback, similar to the dot-com excesses of blinking banners and the like!
Any individual animation can’t be deemed a dark design pattern since it doesn’t fall into any of the 12 categories of dark patterns and is only slightly annoying. But the compound effect of all the distractions we will soon suffer across all sources will be sheer agony.
Incoming! Users will soon be bombarded with AI-generated animations everywhere they turn on the Internet in a desperate fight for eyeballs. Eyetracking research has long demonstrated that movement attracts attention. Oh, the curse. (Midjourney)
Misadventures in Image Generation (1)
You have no doubt seen the popular #MakeItMore meme where people keep prompting an AI image generator to make something more, and more, and more characteristic of something. If not, check out Alex S.’s attempts to visualize a UX designer, getting more and more extreme versions of this character.
Many of these more-and-more renderings ask for people of a certain nationality. All in good fun, of course, but we often get to see what stereotypes are common on the Internet, since that’s where the AI got its training data.
I tried this exercise for my own native country of Denmark. The results are an epic fail, showing the downsides of coming from a small country. The Internet can’t even be bothered to have stereotypes of us Danes.
Here are the 6 images I got from Dall-E after asking it to show me a Dane. First, it gave me a dog (a Great Dane). After specifying that I wanted a human Dane, it did give me a guy who could realistically be encountered during a stroll in Nyhavn (the Copenhagen neighborhood in the background).
Images 3-6 didn’t work at all. That’s where I prompted to make him more Danish, even more Danish, super-Danish, and the ultimate Dane. The images do incorporate the Danish flag, but the costumes are not characteristic of the country. If anything, the outfit in image 4 (lower left) is Norwegian. Image 5 features a Russian church, and the last image seems set in the Netherlands.
Misadventures in Image Generation (2)
For a recent article on the large productivity gains office workers realize from using AI, I wanted an illustration to symbolize AI being a superpower for knowledge workers. Here’s one of the first images I got from Dall-E:
I didn’t think I could use it in that article for copyright reasons, because of the Superman logo on that empowered office worker. (I’m showing the image here because I am now using it in a critical context, which allows fair use, not as a standalone illustration in its own right.)
“Simple,” I thought, “I’ll just edit the prompt to ask it to avoid Superman.”
New prompt: “Please produce a few more cartoons about AI use to enhance the productivity of office workers in the style of an action comic book, but do not include characters with a Superman costume.”
No deal. This put Dall-E into full censorship mode. It responded: “I'm unable to generate images based on your latest request due to content policy limitations.”
My assumption is that asking to avoid a copyrighted character by naming that character triggered OpenAI’s censoring instincts. The silly thing is that Dall-E produced copyright violations on its own but that its overly sensitive “guardrails” prevented me from getting a legit drawing when I explicitly asked it to avoid copyright-violating characters.
I am still able to outsmart AI, so I got what I wanted with this prompt, which avoided naming any characters:
“Please try again, with several different variations of action comic book illustrations of office workers using AI to enhance productivity, but make sure not to include costumed superheroes or to include the chest badge of a superhero.”
Why are such workarounds necessary? AI (and computers in general) should do as they are told by humans (Isaac Asimov’s 2nd Law of Robotics) and not act as censors or nannies. If I violate copyright in my newsletter, it should be on me, not them, and they are not in a position to judge whether my use will be fair use.
Happy New Year Prompting
Here’s a small case study to show how Midjourney has improved from version 5 to version 6 Alpha. I often like to prompt with a broad term as an ideation step to see where the AI can inspire me to go. For this week’s UX Roundup newsletter, I wanted to celebrate New Year, and so I issued the broad prompt “Happy New Year” without any further specifications or elaborations.
The top image below (a woman with a hat) is what Midjourney 5 returned. I have no idea how “Happy New Year” sparked that image (maybe she dressed up to go to a party). While it’s a beautiful image that might inspire the editor of a fashion magazine, it did nothing for my New Year’s thinking. (As you can see at the top of this newsletter, I turned to Leonardo for this week’s feature image.)
When Midjourney v. 6 Alpha was released a few days ago, I decided to try the same challenge: the simple prompt “Happy New Year.” The middle image below is the result. This image looks like a New Year’s Eve party and evidences a dramatic increase in prompt adherence. The face of the clock ticking down to midnight is not completely correct, though.
Finally, since Midjourney 6 can now spell (somewhat), I asked for the bottom image, requesting the words “Happy New Year” (in quotes) spelled out as fireworks. Reasonably successful, though I have seen better fireworks.
Three “Happy New Year” images from Midjourney. Version 5 (top image) vs. version 6 (bottom two images).
Most-Liked UX Postings on LinkedIn
I already posted the list of my most popular UX articles of 2023, according to the traffic analytics. Interestingly, this is not the same as my most-liked postings on social media. I almost only post on LinkedIn, though I also maintain an Instagram with my UX images and illustrations. Thus, the following list is based solely on the “likes” I received on LinkedIn in 2023.
All these 10 postings received more than a thousand “likes” on LinkedIn. Interestingly, only 3 of these 10 items were also on the list of my most-read articles, evidencing less than 1/3 overlap between social media likes and traffic. As I mentioned in my article Website Survival Without SEO in the Age of AI, social media is a weak leg on the 3-legged stool for Internet success.
Users are fickle with their social media “likes” for social media posts, but I did receive almost 100K likes on LinkedIn in 2023 where I also passed 100K followers. (Midjourney)