Instagram

Let’s start nice and simple – this is probably one of my favorite pieces of the Instagram app. When you scroll the top menu bar gets out of the way, scaling nicely back into the distance.

I could see an argument both ways for adding the same treatment to the bottom tab bar, but I suppose a focus on UX might mean keeping the bar perma-present.

If you press + hold the search icon in the bottom toolbar it will spring you straight to the search input. It’s a nice way to save users an extra tap, but more importantly it means people don’t have to readjust their hands in order to tap the search bar. It’s the small things, everyone.

Don’t underestimate how far subtle touch responses can go to make a UI feel great. In this case the follow buttons bounce and scale ever so slightly on-press which gives users a nice tactile response and feeling of depth.

Of course, if you’re going to make certain buttons behave and interact with user touch in a certain way, you better make sure the pattern is consistent app-wide! Nice touch here!

I’d also like to mention that from a growth perspective, Instagram’s “Suggested” people to follow is insanely powerful. I’ve probably followed 100+ people through this rabbit hole of follow->discover->follow. It’s a crazy powerful loop – I wish they could share more about how impactful this design pattern has been for engagement!

Protip: If you tap + hold on a username in the comments thread it will open up a comment form pre-filled with that person’s username. This is one of the most subtle interaction patterns I’ve found. But once you find it there’s no going back to the old way of replying.

When you’re in the photo-taking mode you can either tap the video icon or swipe to the left to switch modes. I quite enjoy the way a shutter closes and expands during the transition here; while there are definitely benefits of having UI feedback like this, I also wonder if they had to do this for some technical reason – anyone know?

Super subtle, this detail. There’s a tiny flashing sliver of white on the progress bar when you’re not taking a photo. I think that this is a nod to old camcorders that would have a flashing “standby” circle on the screen. Nice touch!

If you try to tap the record button a tooltip pops up to guide you through the proper interaction: press + hold to record. I can see this being a tricky one because Instagram is trying to introduce a somewhat-counterintuitive design pattern here.

In the iOS camera, tapping the record button, well, records things. But here, Instagram is trying to show users that they can actually stitch together multiple clips together by pressing + holding at the right moments. I can’t quite remember if Insta has a walkthrough for this feature when you first use the app, but regardless it feels like the tooltip here does a fine job of helping users to adjust their expectations.

If you record a clip, the camera icon suddenly turns into a delete icon. It requires a second confirmation tap to actually delete the video, turning both the icon and the progress bar red as fair warning to the user.

I think at some point I’ll do a comparison post here of how different apps handle video recording (thinking Vine, Twitter and Instagram right off the bat). It would be cool to compare some of these subtle UX flows which can result in a totally different feeling during the recording process. It seems that different apps are arriving at different conclusions for how this style of video recording should work (Twitter’s is especially impressive).

Nothing too crazy here, but I do like the pulsing focus rings when you tap somewhere in the viewport while taking a photo! For whatever reason the pulsing ring feels slightly too fast for my taste – it seems to have an entirely different energy from every other transition/animation throughout the app. I wonder what it would feel like with a slightly more lethargic pulse?

If you press and hold on a photo while you’re editing and applying filters, you can quickly compare your current edits to the original shot. If you’re in a specific tool, in this case saturation, pressing and holding on the photo will compare your photo with and without that specific tool.

In one of the more recent updates Instagram introduced a way to reorder and hide different filters so that people could save time whenever they consistently use a handful of favorite filters. The interaction here is really nice and feels super crisp to use.

My only thought on ways to improve this would be to add some sort of feedback when hiding a filter: Where does it go? Can I get it back? Do I have to drag it exactly onto the ‘hide’ square, or is there breathing room?

Here’s a subtle one, but I think this adds a lot to the editing experience in Instagram: When you are customizing a photo with a specific tool or filter, it doesn’t instantly apply that change to the photo. Instead it quickly flashes your original and then animates the slider to offer a quick glimpse into the direction (and intensity) of change.

I had to sit here and watch this video about 20 times before I felt like I understood everything going on. There’s quite a lot of subtle motion going on here that adds a whole lot of life and interactivity to the tagging view on Instagram. The small things – like a semi-transparent background when searching for users, to the springy pop of a tag when it’s dismissed – all come together to make this feel so good; well done Instagram!

I was hesitant to even include this one here because I figured most people have used this feature before. But hey, +1 for thoroughness right?

When you’re about to publish a photo you can tap on the thumbnail in the composer to get one last look to make sure everything looks good. I use this feature every time I post something to Instagram as a last-second check to make sure I’m happy with the photo.

It’s 2015 and most apps are finally getting good at this, but I can’t stress enough: continuity in app navigation is crucial to helping people understand where they are and where they’re going within a set of views or flows. Instagram does a supreme job here of reversing their way through the photo editing flow if a user decides to backtrack.

Protip number two: press + hold on the camera icon to jump straight to your camera roll. I have to admit I only discovered this interaction this morning while hunting down different design details, but this will be my new default way of adding photos to Instagram. Save one tap and make a user feel clever in the process? That’s a win in my books.

When you’re logged out, the welcome view background slowly ebbs and shifts colors over time. This happens quite slowly, and I admittedly almost missed it the first time I was logging in/out.

Over the years I can recount at least 3 different Instagram welcome views – each one has had a completely different feel and style. This latest one is certainly playful, but for whatever reason it just doesn’t quite feel in line with Instagram’s overall aesthetic anywhere else in the app or on the web. If anyone at Instagram is up for sharing the decision behind this new color-blob-changer, I’d love to learn more!

The folks at Instagram pinged me about this little detail, and it’s a good one! If you import a clip longer than 15 seconds into the video editor, the app shows a bouncy scissors icon to indicate that your video has been clipped. You can then tap the scissors to edit the clip range. I love the subtle use of motion here to grab a person’s eyes and guide them towards an action!