all micro contact rss

A Step Towards the Visceral

I surprised myself last week by working up yet another new version of x2y. I thought it would be a few months before I had a chance to finish up the optimizations and polishing I wanted to do for 1.5. But another project required me to do some research into animation in UIKit, and thus I couldn’t resist bringing some of that fun into x2y as well.

A short while ago, Foster from Mysterious Trousers wrote a nice piece about the “visceral” elements of some apps. The little unnecessary but delightful things that speak to our gut when using software.

I believe when properly done, a visceral app actually causes your body to release endorphins.

(via mysterioustrousers.com.)

Reading his article, I couldn’t help but think of all the examples of this in the apps that I love most. And I immediately thought that perhaps this was something missing in x2y. Sure, the app looks good and functions perfectly, but could it do a better job of “surprise and delight”? Always.

I had actually thought of adding one particular animation early on in the development of x2y, but I thought it would be way too hard and complicated for someone relatively new to Objective-C to implement. When the swap values button is tapped, I thought it would be cool to have the values actually slide over to their new positions, rather than just immediately change in place. That movement from left to right, right to left, would not only look cool but also serve to make clearer to the user exactly what was happening. Much like the “Genie Effect” in OS X with minimized windows, the motion would actually convey meaning, not just be a cool whiz bang effect. Later, I thought when tapping the double and half buttons it would be cool if the numbers “flexed” a bit, growing slightly and then coming back down for doubling, and shrinking slightly and then growing back up for halving. Reinforcing to the user which values had changed.

x2y animations on the iPhone from Joe Cieplinski on Vimeo.

I thought for sure all of this would be a major undertaking, but UIKit makes this far simpler than you’d expect. And so after a lot of experimentation and fine-tuning to get everything just right, I had managed in a day or two to get all the animations going just the way I wanted. I even added a fun animation for when you add a new Common Aspect, which is particularly nice on the iPad.

x2y animations on the iPad from Joe Cieplinski on Vimeo.

Once I had these cool animations on my iPhone and iPad, I couldn’t wait to get them into the shipping app. I found myself just tapping on the swap button for fun, rather than because I wanted to actually swap the values. It was speaking to my gut, which was a good harbinger of how my customers might react. So I hunkered down and did all the optimizations I wanted to do. I managed to shrink the overall file size of the app back down to under 6MB, and I tightened up some of my code after analyzing it a bit.

The result: an earlier than expected maintenance release, with a few added extra surprises. Not bad for a few weeks’ work.

Hope you enjoy the more “visceral” x2y. I know I do.