Hyperlapse

What better way to onboard someone into a new app than to instantly share some of the beautiful creations they’ll be able to make? Hyperlapse nails this part, highlighting the function of the app in a concise and tasteful way.

My only negative note here is that the dots at the bottom of the screen (which indicate your current page) are really hard to see. I can imagine some folks getting stuck here waiting for something to happen without realizing they need to swipe left.

Also of note: pay attention to the rounded corners of the app, throughout. A very small and subtle touch (that admittedly looks much sharper against the bezel of the iPhone) which adds a tasteful splash of character.

Blurring and springy physics (as we’ve come to expect from any Facebook-affiliated app) are a common thread that weave their way through the entirety of the Hyperlapse experience. Here, we initiate the app by giving permission to access the camera (which I’ve done prior to this recording).

Note the responsiveness of the button to my touch, the way the video pauses and blurs, and of course, the way the tutorial tooltip springs into action.

I hope a developer/designer at Instagram might chime in here and shed light on this particular detail: when the camera hits a certain field of view, the ring around the record button switches from black to a colorful rainbow. This change is a bit obscure; I’m not sure why the color is changing at all.

I found the ambient light sensor to frequently flash this tooltip, even though I’m clearly pointing at a well-lit environment (in this case, I’m outside in the afternoon). For the sake of this post, however, I’m glad to see this error – the contextual tooltip that shows can serves as a friendly guide to help users get the most value from the app.

Pay attention here to the times at the bottom of the screen. During my first run-through of the app I wasn’t quite sure what was going on down there. As I came to find out, the times represent the original recording time versus the post-processed video length (which defaults to 6x, hence the time change at the 0:06 mark).

This is another one of those obscure interaction designs that a user could only possibly know after using the app once or twice. For the first timer, the experience might be confusing.

My apologies if these recordings make you dizzy – I tried my best!

This is actually one of my favorite details in Hyperlapse; it’s quite clever indeed. As you change the timelapse speed, a transparent black overlay flashes on the screen with stenciled-out text to show the current multiplier. This is a lovely touch, considering most users’ fingers will be covering the button itself.

This is one of those hidden interactions that you might only come across by accident (or in my case, by following Mike K’s Twitter). Pressing and holding on the video during the review process lets you quickly compare the stabilized vs. unstabilized versions. There’s not much utility here, except to highlight the improvements that Hyperlapse was able to provide.

This one is slick, another nice touch from the design team at Instagram: when you delete a hyperlapse, the clip flings away to the top-right, replaced by the soft-blurred background of your previous frame. It’s a smooth, seamless transition from one app view to another, and the motion here brings a certain playfulness to the product.

Once you’ve saved your first hyperlapse, you’ll be greeted with this slick, minimal ‘next-steps’ view. The video here highlights the details of each button press, but it’s also worth paying attention to the way the entire interface plays with your video by blurring the frames in the background.

Tap and hold anywhere on the screen in the record view to lock your focus on a particular spot.

My last detail here shows the process of saving a hyperlapse for future editing. Hyperlapse does a wonderful job of using motion, color and the now-familiar image blurring to bring life and energy to this flow.