Fixed some UX flaws in the Instagram

I fixed this UX flaw in the Instagram Mobile App: Here is the whole process and story behind it

I have been using Instagram for the past 8–10 years now and it has improved a lot.

I would like to say that the most favorite part for Instagram’s UX researchers is changing the position of buttons in the user interface very frequently. Sounds like they are not even satisfied with their own decisions.

Never mind, we are not here to criticize their previous work. But, I am here to tell you a story that triggered me to change the UX of an Instagram reels section.

Frustrating UX flaw in Instagram reel

Let’s suppose that you are scrolling through reels in your Instagram app and suddenly you find a reel that is very interesting and has some sort of steps mentioned in the caption or description section of the reel.

The red circle marks the area of three dots (…)

Now, you try to expand the description by clicking on three dots (…) at the last of the description section. And it gets expanded.

Till this part, it is a quite decent process. As they are truncating the long description after a certain number of characters in the description.

But the most frustrating thing in this is when you try to scroll the text to read the whole description, it automatically scrolls up that particular reel or it forcefully scrolls the reel frame instead of scrolling the text. Right?

Expanded part of the description that shows more text to scroll

It is frustrating.

Then you precisely touch an area and try to scroll a little bit of pixels to check whether you touched the proper scrolling part of the description or not.

This is one of the UX flaws that most Instagram users are facing as of now, even me.

So here I am going to tell you my own researched and calculated method that could solve this problem and let users digest the description and content without being more frustrated.

Understanding the user behavior behind the action

The user thinking about his emotions and actions

First, let us understand that why and when a user wants to expand the description. There should be some reason that makes a user do this action.

Why and When

1. If a reel is asking users to check the caption to read more about the content that is being showcased in the video.
2. If a user finds a reel knowledgeable and wants to take a screenshot of the steps or information from the description.

In addition to these factors, let us also assume that the user wants to read the whole description and has expanded the text already. Now, we can have two scenarios here:

1. The user does not want to watch the reel again he just wants to consume the text.
2. The user wants to watch the reel and description both together at the same time. Because he wants to perform the given steps along with the video.

The solution to the Problem

After thinking about multiple aspects and solutions I finalized three solutions that can solve this problem for most of the users.

Description in Comment Section

Before and after implementing the solution

Before: We have a normal comment section where a user can see all the comments.

After: We can convert this bottom sheet into two tabs Comments and Description (as shown in the image above).

This will make it easy to read the description without any difficulty.

As we know upon opening the comment section it takes almost 70% of the video frame to show the content. So, we can leverage this section.

What do you think about this approach?

Long Press Description Lightbox

Before and after implementing the solution

Before: We have to click on the three dots to expand the description and scroll through it.

After: The user can long press on the description (highlighted with purple color in the image above) and it will open a lightbox overlay that shows the whole description on the full screen.

After releasing the long press or touch it will automatically close the windows.

So, you can say this is something where the user has to keep his press on the screen to read the description.

Additionally, we can mute the reel or we can pause the video the moment the lightbox opens.

Expanding interactable area in the default text box

Before and after implementing the solution

Before: We have to click on the three dots to expand the description and scroll through it.

After: Instagram can change the interactable area of the default expanded text field to even more better. They can show a scroll bar on the left side that shows how long the description is.

They can also add a micro-animation that shows it is the end of the description if a user tries to force scroll at the end of the text (as shown in the second image in the After part)

This solution will keep their entire interface as it is. I mean there would be very less changes in comparison to the other solutions I represented above.

Yes, I know that they are doing the same but they are not guiding users on where the scroll starts and where it ends. Users have to blindly try and test whether the scroll is happening or not. Most of the users swipe to the next reel accidentally while scrolling through the text.

What do you think about all these solutions? Which solution do you think can be more useful and can be more impactful to the users?

Tell me in the comment section below. You can also follow me on my Instagram by clicking here or you can search for @techo_aj on Instagram.

Happy Designing.