I came across Shorts a while back when it was featured on Product Hunt. The app isn't quite for me, but I had fun trying it out and came away impressed with some of the interactions and design choices.
In today's post I'm also going to try and give critique where I think it's due - I understand that all products are a work in progress, but sometimes an outside viewpoint can be useful!
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.
When you first launch Shorts, the app immediately asks for notifications permissions. I'm struggling to understand why they prompt for permission here and not much further down the funnel.
It's jarring and confusing - at this point in time it's critical for an app to show what kind of value it will provide to a person, not the other way around.
See, once you get past the notifications request I can finally start to parse out what this app is and what kind of value it provides. "Follow people's camera rolls" sounds interesting, if not a bit on the extreme side of messaging. How will it work? Will I be automatically sharing my camera roll if I sign up?
I'm a bit hesitant, but continue on through signup.
As far as visuals go, Shorts has killed it. But that was no surprise once I realized the Highlight team is behind this product. Clean and simple with a bright and inviting color palette - nicely done.
The inline validation is nice, but I think the blue bar dropping in from the top is fairly heavy-handed when paired with a lightweight cross in the field.
Oops, Mrmrs just had to message me while I was recording!
The onboarding for shorts is interesting. Once you've entered your name and an optional profile photo you're shown a card-style UI. There's only two buttons on the screen and one of them is to teach me what's up, so I'll go down that road...
In this video I'm tapping the skip and share buttons. Lightweight popups help me reverse my decision and also give me feedback about the gestures. At this point I have one big problem: I have no idea what's going to happen when I hit share. I was really hesitant to tap the share button at first...what if my photo goes public? Can anyone see this? Sharing to where?
Those are a lot of high-friction questions this early in the flow.
I'm not super paranoid about these particular photos, so I move forward...
It's only by following the onscreen prompt to 'swipe up' that you can finally see your dashboard. This was a really interesting interaction: make your user perform the main action to get to the next view in the app. It's a great way to teach people the gestures and move them through a flow (despite being somewhat confusing - where are the rest of my photos!?).
At the bottom of my dashboard is a sticky prompt to keep sharing. Ironically I can't swipe it up to keep sharing, I have to tap. But at this point I'm getting the hang of the gestures required to use the app.
In terms of visuals, I found the transitions of the cards to be quite confusing. They change depending on if you're swiping the card or tapping on the bottom buttons, which is odd considering they are functionally the same. My gut says the team is probably iterating towards a cleaner Tinder-style card where tapping and swiping will move the entire object in a consistent way.
One of the best touches in Shorts is the commenting - rather than building a reverse-chron feed of comments, people can drag and arrange their notes exactly on the parts of the photo that catch their attention. It's a lot of fun to use and feels lightweight enough to encourage lots of engagement.
Tapping on a comment explodes a playful heart, a la Periscope. It's a fun interaction, albeit not that discoverable, which makes it all the more exciting to find!
This is a pattern I first saw in Tinder and has adopted well here. Navigating primary views in the app is a seamless transition - the view title and icons shift/fade accordingly, making the entire dashboard feel cohesive and quickly accessible.
I thought of doing a post on Tinder a while back to share this pattern; unfortunately that doesn't feel like the best app for video recording :D
Just a video looping through how fast the interactions are in Shorts. Really clean transitions, lightweight visuals and fast feedback are all thumbs-up in my book.
The empty state of the dashboard is smart; it seems like it's surfacing the best possible actions I would want to take, all in one screen. Sharing, inviting, searching...it's all there and super inviting with gorgeous colors.
My one qualm is the mix and match of native vs non-native UI. Adding by username shows an iOS alert, finding friends on the app shows a custom phone number field, and inviting a friend opens the iMessages composer. In this case, the Find Friends button is the odd-one-out, but the cleanest in terms of visuals and inputs.
For some reason I gave Shorts access to my location; I'm not quite sure why, but that big blue button was so perfectly placed and attention grabbing. Psychology, right?
In this discover feed I see a bunch of randoms; I understand that for people with no friends, Shorts wants something to show to keep them engaged. But it is super weird to be browsing random people's photos in this way - the best way to solve for this is to provide even just the smallest bit of context for why I'm seeing these people. "2 miles away" or "Recommended" or...anything, really...would help me feel safe and in control of my content. Instead, I'm suddenly concerned about if these people are seeing my photos.
One detail you'll notice deeper in the video: a longer swipe changes your message from 'like' to 'love' with a playful pop.
Empty state illustrations are all the rage and Shorts has definitely paid attention. Each of the app's illustrations were done by the talented Kris Mendoza, so props to him for crafting this beautifully consistent and fun visual style.
If you scroll, a hidden surprise awaits. Unfortunately it's cropped if you over-scroll; hopefully they can expand the illustration in order to complete the experience!
I'm sharing the introduction email just to showcase how consistent and clean the branding is for Shorts. I love the gif (although, I'm still struggling to understand what Shorts means...).
And one more video of the Shorts website to showcase the product's simplicity and consistency across the board.
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.