Path

Path wastes no time delighting new users with their popup design language. The light bouncing in and fading out makes these modals feel so alive. Just wonderful – we’ll see a few more instances of this style being used in all parts of the app. +1 for consistency!

This onboarding flow is so slick! No extra fuss or unneeded messaging – just a few simple steps to get started, the modal fades away, then users are greeted with this simple interface and tooltip on the main share button. You can tell how much time the designers put into the small details here – especially the language on the tooltip.

Create a moment – this introduces new users to this process of sharing moments, not fluff. This isn’t where you share your latest score on Candy Crush, no – it’s a place to share moments with your friends. I like that.

I remember when Path first came out – this popout sharing button captivated users and designers alike. I remember staring at the screen just asking how on Earth did they do this!? Path’s most recent update brings some minor changes to this design detail, but the feel remains very much the same.

Tapping the ‘+’ button opens a flyout menu of all the various types of content you can share on Path. The icons playfully bounce outwards, spinning simultaneously. Sure, it might take a bit longer to cycle through the animations here, but the added delight it provides new users is invaluable.

Path has some really beautiful detail here on these walkthrough modals. These show up for new users when you first view a new tab, providing some context to that area of the app. This helps users become more familiar and comfortable with Path as a whole, a difficult task that any product designer out there understands and respects.

Again: don’t miss the subtle way the modal plays off the screen – it happens in a split second, but adds so much to the overall experience.

I’ve seen more and more apps adopt this scrolling + fading technique over time – it’s a beautiful interaction that works so well here on Path. As you begin scrolling down your profile, a few elements on the screen lightly fade away, gradually replaced by a simple header: “Me”

Be sure to note the small touch here of having my cover photo display directly behind the iOS status bar – what a nice feeling to have your photo fill up the screen!

Path has a friendly, playful way of letting people interact with their friends’ moments – pixel-perfect stickers to convey an emotional response (most of these stickers are available for purchase). Notice the way my stickers just bubble into place as I tap on the <3 icon on a post – lovely.

This one just makes so much sense, but could be so easily overlooked. Tapping anywhere in your profile header prompts you to change your profile picture or background picture. You don’t have to fumble around with a settings tab or some crazy options panel – nope, just tap what you want to change and move through that task with no extra cognitive effort. I love it!

I just wanted to add this detail in to highlight the unwavering consistency of the interactions and animations on modals across the app.

There are two cool things to take note of on this view:

• The back icon is Path’s signature ‘P’ logo. This is so cool to me – the most obvious answer here for any designer would be to include a simple ‘back’ or ‘close’ text line. But having the logo there (while maybe cognitively less obvious) adds some flavor and personality to the app.

• Notice all the moving parts here as I spin the map around: The beautifully-designed compass twists so lightly as the text swirls in and out of view. It’s the small things like this, folks…

Pardon the flash of black screen halfway through this recording – not quite sure what went wrong :)

It’s really fun to look at all the pieces of the search view coming to life in Path. As I tap the frosted-glass search bar in the main app view, a few filtering options bubble to the screen, inviting me to tap and explore. I’d really love to see the data here on how many users interact with the search suggestions on this view – it might say a lot about the current search solution on 99% of websites.

Ah man, I love this one. As I turn on nearby search, we can see this wonderful loading indicator pop into view. I want to stress here how amazing it is that the designers were able to totally skip the obvious solutions here – a spinner, progress bar or loading text – and build their own playful loading solution that fits in so perfectly with the design language of the app as a whole.

In this view I’m adding a friend to my “close circle” by starring his name. This detail is so small, but not to be overlooked – note the way the star bounces in and out as you add and remove a friend.

Oh man, where to start with this view…

I’d say the first thing to take note of is how the sharing button interacts when tapped. In this case, I’ve selected a quote to share – the quote icon scales up, fading simultaneously. It’s a really slick transition effect that I see more and more apps using recently (looking at you, Twitter!).

Once I land in the composer view, I toggled the ‘close circle’ and ‘private’ options – the context indicators that slide into view are quite beautiful. The motion here is super fluid, never skipping around or glitching unintentionally.

Ah, you didn’t think I’d miss this one, did you? I so clearly remember the first time I used Path, this detail totally blew me away – as you scroll through the newsfeed, a clock tooltip appears on the right side of the screen. Continuing to scroll adjusts the date and time dynamically based on which post is underneath it on the view. The hands of the clock spin so fluidly, and the date changes fade in without a hitch.

It’s worth downloading Path if only to learn from the pros about how to delight users with something so simple and clear.

Note: I probably should have just taken a screenshot here, so ignore the mov file here :)

I just wanted to point out this small detail that only appears at the end of a user’s news feed: a small, lightly debossed ornament illustration placed lightly in the center of the screen. It takes a lot of focus to remember these rarely-seen parts of the app – props to Path for this one.

I look at something like Path’s pull-to-refresh and am in awe at how much time and effort someone put in to make this totally irresistible. There aren’t too many interfaces out there that match the fluidity, bounciness and overall feel that Path’s interactions possess. It’s probably worth noting here that a lot of these touches have been around long before Facebook’s Paper :)

Ah, yes, these guys get it! I really doubt Path gets a whole lot of traffic to their main site, but damn did they nail it here. Their team has managed to create an equally delightful, playful and engaging experience on the web – even for something as small as a landing page for the app. Definitely check out Path.com for some gorgeous web design!