User interface sugar crash

I think about some aspects of interface design as sugar.

This is how you adjust the photo in Photos app in the previous version of iOS:

And this is the same view in the current version:

The difference is in the delayed/​animated falling of the notches.

I don’t think it’s great. It’s “delightful” in a rudimentary and naïve sense, but like sugar, you cannot just add it to your daily diet without consequences. This extra animation serves no functional purpose, and the sugar high wears off quickly. What remains is constant distraction and overstimulation, the feeling of inherent slowness, and maybe even a bit of confusion.

It pairs nicely with the previous post about avoiding complexity and rewarding simplicity. I often see this kind of stuff as related to designer’s experience. Earlier on in your career, you are proud you’ve thought about this extra detail, you’ve figured out how to make this animation work and how to fine-tune the curves, and you’ve learned how to implement it or convince an engineer to get excited about it.

Later in your experience, you are proud you resisted it.

“It’s beautiful and kind of mesmerizing.”

I’ve learned recently that “rubber banding” can mean at least three different things in the context of UI/UX design:

  • whatever happens at the edges of your scroll container when you’re using elastic scrolling, which started on the first iPhone and have spread more widely since
  • in videogames, balancing the difficulty in real-time so that inexperienced players stand a chance and good players are not bored (a classic example in any racing game is computer-controlled cars slowing down if they are running too far ahead, as if held by a rubber band, to give you a chance to catch up)
  • in multiplayer experiences (mostly videogames, too), the experience of snapping back and forth (example) during gameplay when your connection speed is low and the game has to reconcile your predicted position with your real one

Each one is interesting in its own way. (Each one is also controversial, although for a different reason!) But what I understand they all have in common is – well, obviously – the specific mechanics of rubber banding.

I imagine many reading this are familiar with basic interpolation between A and B using curves like ease in, ease out, and so on. But in gaming and I think increasingly in UI design, that’s not enough. When coding stuff related to movement – imagine dragging an elastic scrolling view near its edge – the challenges compound:

  • the object might already be in motion
  • its destination might also be in motion
  • the load or framerate can vary, so calculations have to take that into account

With that in mind, I found these two videos helpful and informative:

The videos together start with basic lerp (linear interpolation), then move to lerp smoothing, and then arrive at frame-independent lerp smoothing. There’s light math/​physics here, but that’s to be expected, as all these experiences are meant to feel like real-life objects would.

I found especially lerp smoothing where you feed a lerp into itself particularly conceptually beautiful.

Three iOS 26 transitions

This first one – in response to pressing the volume buttons – feels world-class. Subtle responses to buttons being pressed, nice haptics, good physics:

This one – stretching of the control center – made me incredulous. The performance and physics of it all are good and fluid, but this feels like absolutely the wrong thing to do here. I think it’s as designed, but it feels buggy to me. Maybe I’m oversensitive to stretching type and shapes like this, but I can’t stand how icky it feels. I am not sure I have seen another place in iOS 26 where elements would stretch in such a cheap way:

And this one – tapping on the album cover to make it show and hide – is bad in perhaps every possible way. It feels designed poorly and engineered poorly, like an HTML approximation of a real thing. All sorts of bad curves and sudden switches, slight reorientations of UI, even some flickering of interface elements at the bottom. It feels so rough I would probably just do a hard switch, no transition, until I got this right. After all, no animation is better than bad animation, and this is not responding to fingers in real time (when the user controls the “speed,” and you absolutely need a transition):

Ultimately I don’t know if this is “as designed,” or rushed, or what are the causes. But It’s interesting and a bit hard to realize that these days even animations in iOS 26 – once, I believe, a staple of good design and execution – are all over the place.

A Japanese word for “cat”

When I was in Hong Kong a few months ago, I noticed that a lot of intercoms have this particular animation of a cat sleeping and chasing a fly, on a loop:

It was actually kind of fun to see it all over Hong Kong on LCDs of varying quality.

Turns out this was Neko! A “screenmate” application from the late 1980s that made its way to various software platforms and apps since.

I liked the idea that somewhere in the intercom factory someone wanted to add a little delight to a very pedestrian (no pun intended) surface, and that’s why now we have Neko all over Hong Kong.

(I liked it so much I recreated it and added to the bottom of my site.)

“Strangely primitive against the backdrop of the slick user interface”

Forgot about this cute little story:

It used to be that when you dragged an item off the Dock and dropped it, the icon would disappear in a puff of smoke and make a satisfying noise. The animation was strangely primitive against the backdrop of the slick user interface of what used to called Mac OS X.

I too wondered why that animation was weirdly amateurish, almost like a placeholder. Well,

One of the most talented engineers on the team took out a piece of paper. I wish I could say it was a napkin to make the story better. ¶ On the piece of paper, he drew a series of five frames. The intention of the designer was that these drawings would stoke further discussion. That it would get cleaned up and refined later. ¶ But that never happened. It shipped as is. And the rest is history.

Also when looking it up, I found a mention of a fascinating bug that exposed the origin of the animation as a sprite.