How a simple animation can improve the UX of Instagram
I am not a big user of social media services like Facebook, Twitter or Instagram. But the first time I used Instagram, I saw a problem with the way it handles the image viewing experience. And this article, along with being my first article on Medium, is about fixing that experience.
Problem
If you have Instagram installed on your phones. Here is what I would like you to do.
- Navigate to a user profile.
2. You will be displayed a grid based layout of all the pictures that the user has uploaded. Click anyone of those.
3. Now click back button to return to the previous section.
Did you notice a problem? No? Okay, repeat the same thing with your default gallery application. And notice the animations that are happening during this process.
The problem here is that when we click the back button to return to the profile view, we are immediately taken to that screen. Which is not an ideal experience for multiple reasons.
- User has no idea which picture he/she was looking at earlier.
- User has to use undue mental effort to scan through the grid based layout to see the next picture. This becomes more difficult if the pictures are similar looking.
I was once travelling on a bus and a girl sitting in front of me was browsing through a certain Instagram profile which had quotes written on black background and white text. Every time the girl went back to see the next quote, I could see her struggle to find out the next picture which she had to see. She would click on a picture and suddenly go back realizing that she had already seen it earlier.
Probably the most famous book on UX design is “Don’t Make Me Think” by Steve Krug and this is exactly what is not being followed here. A task like viewing pictures should not involve so much mental processing and cognition.
Solution
The solution to this is extremely simple and it is used by almost all the gallery applications. Here, let me show it to you.
Did you notice the slight zoom out animation when we go back to gallery view? It basically shrinks down the picture to the exact location in the grid thus cleverly indicating the location of the picture which you were currently viewing inside the grid. It make it easier for the user to select the next one.
Thank you for reading my first article on Medium.Would love if I could get few claps from you :)
