Hyperlapse

March 1, 2016 · 11 details

Hyperlapse is the latest and greatest app to hit the App Store; many of you have already tried it, I’m sure. Yesterday’s Wired piece likens the app to a $15,000 video setup in the palm of your hands – a bold label, indeed.

In this post I will explore the wonderful level of polish and style that Instagram’s designers have poured into Hyperlapse. The app is beautifully simple – almost to the point of confusion, where one might ask themselves: “Is this it?”

Yes, this is it. And that’s the point.

Let’s dive in…

Listen while you read

Design Details is also a podcast, a weekly conversation about design process and culture. Listen to the latest episode while you read, or subscribe in your favorite app.

Design Details Podcast
Loading...Grabbing the latest episode
Apple PodcastsOvercastPocketcastsGoogle PodcastsCastroBreakrerRSS Feed
Onboarding

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.

Signing in

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.

Button context

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.

Brightness

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.

Length context

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.

Rate changing

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.

Unstabilized

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.

Deleting

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.

Save and share

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.

Lock focus

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

Save and edit

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.

Design Details Podcast

Design Details is also a podcast, a weekly conversation about design process and culture. Listen to the latest episode while you explore more posts, or subscribe in your favorite app.

Design Details Podcast
Loading...Grabbing the latest episode
Apple PodcastsOvercastPocketcastsGoogle PodcastsCastroBreakrerRSS Feed

Copyright whenever. This isopen source.

Apple PodcastsOvercastPocketcastsGoogle PodcastsCastroBreakrerRSS Feed