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.
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.
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.
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.
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.
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.
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.
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.
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?
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.
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.
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.
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.
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.
Paper by Facebook
Copyright whenever. This isopen source.