I felt like one of the last people to finally download the new Path app for iOS the other day. It seemed like everyone on my twitter feed thought this app was the coolest thing ever, but the “It’s like a social network!” aspect of it turned me off. I don’t need another social network in my life. But… since everyone praised the UI, it was time to give it a try.
I still don’t know if/how this app would fit into my regular usage, but I won’t talk about that today. The app is an absolute joy to use, and I think this is entirely because of its UI, and the hard work that went into all of the details. The screenshots don’t do it justice, because it’s the interactions and animations that make it shine. I’d only give it a “above average” as far as pure looks go.
A lot of these UI ideas are going to get copied into apps, just like pull-to-refresh did. One of them was redone using CSS. The + button, this is one of my favorite parts of the app. I could play with that button all day long, but the CSS version brings no such joy.
I want to make something perfectly clear before I go on… I think what Victor Coulon has done is really cool, and I applaud him for taking the time to try to replicate this control using CSS. I think it’s using CSS beautifully to do what CSS should do: presentation of elements. So no… this isn’t a rant about how this doesn’t belong in CSS.
The CSS version doesn’t feel as fun as the original because it tries to be just like the original and fails at it. It’s in uncanny valley.
So let’s go through where they differ.
Event Triggering
Path’s + button actually gets triggered on touch-down as opposed to touch-up-inside. This is a departure for from most buttons. At first I wasn’t sure I liked this, but I’ve decided that in this case it’s completely appropriate. What’s the harm in accidentally triggering this button? None. It doesn’t bring you to another screen, it’s never destructive, it doesn’t put you in another mode. Accidental tapping in this case can very easily be undone by either re-tapping or tapping anywhere else on the screen (so actually it is modal, I lied). Having it occur on touch-down makes it feel faster than most buttons. It’s false, but that doesn’t matter.
Victor’s CSS version gets triggered on click, which is equivalent to touch-up-inside.
Animation Timing
UI animations need to be fast, otherwise they get tiresome after a while because the user can work tap faster than the UI can construct itself. The animation duration of the CSS version is way off. On the open animation, I’d guess it’s about 25% slow. On the close animation I’d guess about 50% too slow.
This accentuates the fact that the close animation isn’t quite like the original in how the rotation of the x back into + is timed against the rolling back in of the other elements. They feel completely separate on the CSS version, but in Path they feel related, if not synchronized.
Key Frame Animations
There are two major components to this key frame animation: Spinning, and Movement (translation).
In the original, you can clearly see that the elements spin upon opening. This might be the case the CSS version, but it ends up looking like a blur because the movement part is inaccurate. What’s clearer is that there’s excessive spinning upon closing in the CSS version. I think the original does either 1, 1.25, or 1.5 revolutions upon closing (likely the same upon opening, but it’s harder to see). The CSS version looks like it’s doing over 2 revolutions. I’ll note though, that being starts, it’s particularly hard to track that.
The movement feels very iOS-ish in Path. It’s similar to elastic scrolling. When the elements roll out they bounce into place. The CSS version has the elements smashing against a wall. Upon closing, the CSS version seems to exaggerate the pull back before they return. The distance that they pull back seems about right, but the proportion of time during the pull back versus the return is off which makes it feel more like a slingshot than the original.
Details Details Details
I think this is a great example of why details matter. This is essentially the same control, as far as functionality goes, but one feels like a treat and the other feels like a gimmick.
I don’t mean to pick on Mr Coulon’s work. I’m sure if he spent more time on it, he could get it looking (err… WORKING) almost exactly like the original. But that’s my point : details take time. Details are exhausting, and require a ton of trial and error. I spent at least 5 minutes last night just tapping Path’s button again and again looking at the animation to try to figure it out exactly, to figure out why it felt so right. Recreating it would take me much longer than those 5 minutes. This exhausting trial and error is how you can manage to create things that not only look good, but feel fantastic.
