The Thinking Face of Software
All custom spinners: https://github.com/zmcartor/ThinkingFaces
“Now give it a second, it’s thinking..” was the first advice my Dad gave me after demonstrating how to insert a gigantic, three-inch floppy disk into the new computer.
“The little light blinking means it’s doing something.”
Watching the disk light, I was hypnotized by the chaotic flickering. In my young mind, the rapid sequences of light and dark was a foreign language describing what was going on inside the mysterious contraption. A long period of light seemed to say “I’m conjuring up data, be there soon!”
Nowadays, the blinking light has evolved into the ever-present activity spinner.
There is a sublime comfort watching an animated form repeat itself over and over. This zen feeling lasts about 3 seconds, then turns to white-hot rage as I wonder “what in the name of fuck is taking so long?”
The academic and practical reasons for having a ‘spinner’ is to provide the user with continual feedback. Humans require constant reassurance that their request has not been lost, and the machine is dutifully handling it. The most basic progress indicator of all is the human face.
A verbal request to another human elicits a response that is in proportion to its gravity and subject matter. As the person’s expression changes, we know two important things:
- They speak our language and understand our request.
- Preparing a response, give it a second.
A furrowed brow, pouted mouth and body language act as waypoints into the internal thought process. I call this thinking-face. It’s an unsettling experience to speak to someone without any facial expressions.
(As aside — psychopaths supposedly do not have emotions, and mimic the facial patterns of ‘normal people.’ It can be said that software which doesn’t offer user feedback is psychopathic as well!)
While conditioned through cultural norms, facial expressions associated with thinking-face are unique to every person.
I think it’s appropriate to call an ‘activity spinner’ the application’s ‘thinking-face.’
As a human gives feedback to another while preparing a response, an application can use its thinking-face to craft a consistent personality and form a relationship with the user.
Sorry, I’ll stop the hand-wavy design wankery and dig into exactly what a consistent personality means in regards to software.
In modern design, the most widespread thinking-face comes from Apple’s iOS UIActivity Spinner.
There are many riffs on this design, but it’s basically the same idea. Steady motion and gently fading hands evoke a feeling of control, high quality and, craftsmanship. Forms rotating in a circle evoke clock hands winding around, passing the time. Adding or subtracting petals creates a variety of interesting shapes.
A long time ago, both Apple and Microsoft used pixely timepieces for their thinking-faces. (Apple, system 1 and Microsoft up until Windows XP.) A visual cue to “give it a second” is easy to imply through a timepiece. But showing for too long is a visceral reminder of wasted time.
More Rotating Circles
Windows 8 introduced the abstract blue circle with rotating highlight:
Much like the iOS spinner, it gives the feeling of designed control. The opaque, circular track isn’t as artistic as UIActivityIndicator on iOS, but it does convey predictability by moving clockwise. (It could also imply a front-load washing machine.)
Twitter, Youtube, Gmail, and many other websites use a derivation of this design to communicate control and predictability. Each site also adds their own affordances that dynamically communicate a personal touch depending on the context.
Google sticky circle
More dynamic than controlled rotation, this thinking-face feels intelligent and organic through the use of complementary rotation and expansion speeds. The added motion differentiates it from the more robotic rotating-solid-circle and gives a follow-on feeling of ‘AI fairy dust’ to whatever data is shown after.
I’ve made a slightly modified version of this spinner that ‘thins out’ as it wraps around the circle like an inchworm. The color and other parameters can be tuned.
Rotating circles offer fun constraints for a thinking-face. To go even further, colors, opacity, rotational rate, thickness and other attributes can be changed over the course of the animation to fine-tune the personality.
The Physics of Personality
Going further, modeling physical forces other than smooth rotation offer a richer set of constraints and more interesting faces.
Still a circle, but the playful stop-and-go rotation of the planets is a funny change from smooth motion. It’s reminiscent of a mechanical gumball machine. Authentic and precise. This would be appropriate for a game, or light-hearted social media app.
Even more interesting, combining simple shapes along a path gives the impression of a self-propelled sphere rotating the square knob on an abstract machine. This thinking-face (I think) would be appropriate on an app that converted video, or compressed data. The motion feels industrial, like a junkyard compacter smashing a large hunk of steel.
Beyond Clockwise
The next animations disregard circular motion entirely, and instead keep temporal rhythm through more abstract means.
Animating vertically invokes the motion of the sun, rising and setting. The feeling of time passing through a single axis is a fun design constraint. The motion of each form follows a custom timing curve that can be tuned to fit the app’s personality.
The primordial rhythm of time is our own heartbeat. A consistent pulse of energy is another interesting constraint; a whole class of thinking-faces could be created just from this concept. A heart-rhythm design would fit (I think) with any medical, or professional services oriented app like a bank or insurance. The design isn’t too abstract and can be accomplished with just a single color.
Thanks very much for reading! Researching and programming the various spinners made me notice all the little tricks digital and analog devices use to keep us engaged and offer feedback. Hopefully, it will make the next time you wait for software slightly more interesting. :)
If you’d like to talk more about apps and animation, let’s get in touch.
