Open up your hand-sized glowing rectangle. traverse a glorious landscape of stories, messages and photography anywhere in the universe. It’s really quite Incredible.
Taps, swipes and drags take us anywhere we want to go. However, these views, navigation structures and transitions are still organized analogous to how we interact with paper, windows and physical objects.
Pull to show the refresh spinner hidden behind the Instagram photos. Tap on a Twitter link to add a layer on top of the feed. Drag your homescreen to the left to show more apps on the right. We know the content is not actually behind, on top of or beside one another.
We once needed skeumorphic graphic design to help us understand digital interfaces. That’s also how I see today’s designers relying on animations and transitions to do the same. That’s not to say this a wrong thing to do, it’s where consumers cognitively are today, but still is the case none-the-less. Let’s look at some apps I’m into these days that are handling transitions and animations quite well.
Moves step counter and distance tracker
Scroll down to travel the path of your day. As you tap on the green circle, it bounces and responds to the impact of your tap. Doing that changes the display to time, calories, steps or distance. I love this little animation detail, it feels good and transitions me between unit types which could otherwise be data overload.
If I swipe down hard, the circle hops up into a calendar view. I can then pan left and right to compare progress. It’s delightful and helpful. This is a remarkable app all around.
Secret posts for and from people you know
This itty bitty app is a scrolling feed of secrets from friends, friends of friends and saucy strangers. Here I can share a private tidbit about my life to a big audience. It’s fun, too. The apps says 16 of my friends have joined but I don’t know which.
This app is not only about the secrets about about how it feels to tell them. The screens and letters fade in, giving a ghostly and invisible feeling. When posting a photo I can swipe to right to blur photos. This is a nice example of interaction design that doesn’t rely on an analog from the physical world (like smudging your screen to create a blur effect, for example). Nicely done. Look for my secret from today 😉
Paper stories from your friends
Facebook’s launch of their news reader is exciting. We cannot critique the quality of a social app on the day of its release. How it feels to use it will emerge over time and only then can we make a sound judgement.
However, the designers here use a navigation style similar to Moves, where we travel up and down to move in and out of the detail of content and from left to right to traverse across content. They also have some animations that I’m seeing other folks call “flipboardy”, which is, I think, a good thing. I can be easy to lose context of where you are in this app, but there are escape hatches everywhere in case you can’t find your way home.
Automatic device to help you drive better
This little guy plugs into a port on my car and lets me know the location of my car and how I’m driving. It also makes a little beep when I break or accelerate too hard. Also like the Moves app, I travel down a stream that is my timeline of activity. In fact, a little car drives down the timeline. When it’s next to an activity post, the car’s headlights turn on. It’s a very tiny detail that’s easy to miss and some people may even find cheesy. But in the age of cold, flat, graphicless interfaces, I find it endearing.
