As a user (and designer), I noticed one small, but a really frustrating issue with consuming videos on the feed. I started researching all the data to validate my assumption.

I end up with a conclusion that there is a place for improvement so naturally, I decided to design it and share with you in this article, but before we will jump into the details let me ask you a few questions.

1. Have you ever wanted to rewind the on the Instagram feed? 
2. Have you ever watched a video on Instagram which turns out being boring or stupid?
3. Have you ever wanted to show a part of a video on Instagram to a friend but you had to wait because a moment you wanted to show was at the end of the video?

Yeah, no worries — me too. I asked the same question to a group of 30 heavy Instagram users and turns out 24 of them answered “Yes” to at least two questions I’ve asked.

This was a moment when I decided it might be a small but also cool opportunity for me to solve some real-life scenario problem for Instagram, which I am a huge fan of. This got me very excited so I started thinking what would be the best solution in this case.

Video player in the Netflix mobile app

I started my work from reviewing Instagram current navigation and gestures. Turns out the whole mobile app is incredibly smooth and you can navigate through all the screens just by using swipe gestures. Almost every screen contains some kind of to navigate between different type of content but for me, the most important one was a feed and post view.

On the feed, you can swipe left to jump to messages, by swiping right you jump straight away to the camera where you can add a new post to your Instagram Stories.

I quickly realized it’s a totally different than Netflix’s or YouTube’s mobile apps, where content is long on you have a bunch of controls. It has to be something simpler and smaller. My main challenge was to design elegant solution that will not only solve the main problem but also will fit the entire flow of an app and will be as natural as current solutions, which are familiar for Instagram users.

I did several tests and I created a simple gesture maps that helped me understand which parts of the screen let you jump into different screens using left & right swipe gestures. Yellow areas are the one that lets you swipe to move to a different screen. Blue areas are the ones that are designed to support horizontal scroll which lets you exploring more content on the screen like Stories at the top of the feed.

A solution which came up to my mind was simple, let’s just add a swipe gesture that lets you rewind the video. For me, it seems to be the most obvious because that’s what people get used to, but currently, in most of the video players, they do this using a slider, not swiping on the entire screen. I was thinking about how I can duplicate this familiar experience without breaking current app flow. Turns out I needed just a simple trigger which changes the gesture areas on the screen.

Just simply by holding an area of the screen where the post is displayed you can change the gesture support from a default (yellow) state to the one which is triggering video control (blue).

Long press is important here because I wanted to be sure there will be no such situation where the user accidentally trigger video control while jumping to a different screen just by swiping.

I build a prototype in Framer and in my opinion, it might be potentially a good solution for this kind of problem. I am not 100% sure about the timing for the long press because I never had a chance to talk with designers and engineers from Instagram.

Okay. That’s it.

I was talking about it with a friend of mine on Friday and decided to give it a go on Saturday evening when I didn’t have anything better to do. You might ask why? Because designing is fun.

Thank you.



Source link

LEAVE A REPLY

Please enter your comment!
Please enter your name here