Design Details: Secret for iOS

Secret is the latest app making waves on the web, already being coined as Silicon Valley’s latest obsession.

While I don’t see myself as a user for this type of app, I thought that this would make for another excellent Design Details post. Secret does several things quite well, making sure to keep the interface and interactions super lightweight and wonderfully minimal.

Follow me at @brian_lovin for tweets about design, startups and technology.

Get emailed with future Design Details posts: Subscribe by Email

Here are a few of my favorites design details within Secret for iOS:

1 Viewing a secret

Tapping a secret to view the comments section has a wonderful little animation – the card slides to the top of the screen, gently pushing the status bar out of sight.

Hover + hold to play and loop the video Share this Detail:
2 Scrolling on a secret

When viewing a secret with just a couple comments, we get a nice preview of what happens when you start to scroll. The image starts to fade, the text blurs, and the ‘rubberband’ tightens up, giving the user an almost physical resistance to the scroll.

Hover + hold to play and loop the video Share this Detail:
3 The full scroll

Here’s the same interaction as above, but this time we get to see the full effect. As we scroll through the comments, a tiny piece of the secret is blurred out but remains at the top of the screen – a subtle reminder of what content the user is looking at.

Hover + hold to play and loop the video Share this Detail:
4 The composer – colors

I really like what Secret has done with the composer. The traditional approach here would have been to add toggles or dropdowns for users to select background colors or textures. Secret does away with this completely, making the background color change with a horizontal swish of the finger.

Hover + hold to play and loop the video Share this Detail:
5 The composer – textures

Swiping up and down within the composer lets users toggle the texture for their post. Again, I love how this visual preview is so tactile, doing away with traditional sliders or toggles.

Hover + hold to play and loop the video Share this Detail:
6 Slide to blur

I thought that this detail was quite clever, and something that could have easily been overlooked. If you upload a photo for your post’s background, sliding horizontally with your finger allows you to adjust the blur of the photo. This is a nice way to add subtle, artistic touches to your posts.

Hover + hold to play and loop the video Share this Detail:
7 Slide to saturate

Along the same lines, sliding vertically within the photo view allows you to quickly adjust the saturation of your photo. Why don’t more photo editing apps have these little details?

Hover + hold to play and loop the video Share this Detail:
8 Post options

When you first use Secret, the app guides you through many different interactions and walks you through all the different buttons and their meanings. Tapping on the ellipsis, next to the comments and hearts, brings up a window to hide or report that specific post.

I found that this same window can be activated by swiping horizontally along the post, rather than tapping the ellipsis. I love how the post itself is blurred out in the process, helping you to focus on the current dialog.

Hover + hold to play and loop the video Share this Detail:
9 Liking a post

Swiping from the left, alternatively, lets you quickly like a post. I love the interaction here – the app lets you over-swipe, moving the heart off-center to the right of the post. Once you release your finger though, the heart snaps into place before dropping down into the like count. The movement and gestures here are fluid and snappy.

Hover + hold to play and loop the video Share this Detail:
10 Activity view

I wanted to showcase this detail to highlight a different approach to view switching in iOS. Here, Secret has created a subtle animation in the title bar to indicate a view change. It’s a nice touch to have the activity view bounce lightly off the bottom of the screen, although it admittedly doesn’t feel quite natural – perhaps some easing tweaks here could help make the bounce feel more realistic.

Hover + hold to play and loop the video Share this Detail:
11 Settings

This last detail shows how a user brings in the app settings. I love the way the settings cog spins in the background before being blurred out of view. It’s the movement and subtle touches here that bring life into a part of the app that could easily have been overlooked in favor of static comps.

Hover + hold to play and loop the video Share this Detail:

That’s all for now! If I missed any details, don’t hesitate to tweet at me.