Microinteractions in Instagram

There are various microinteractions in Instagram, which enhance the quality of user experience. I observed them and looked at the effect they had on the users.

Feedback after adding to the collection

Animation where photos are stored in the profile tab. The user knows that collections are listed on the profile screen. Since the movement of the thumbnail temporarily stops, the line of sight is guided to it.

Account switch when holding down the Profile tab

For advanced users interaction, alternate operation is also possible on the profile screen. Since the entire screen moves to the back, it is transmitted to the user that it is structurally the switching operation at the highest layer.

Indicator in Stories

The indicator in Stories shows display time and cut number at the same time. The post will scroll from top to bottom, but Stories will scroll from left to right. The indicator also follows this lateral movement.

Transitions when Stories switch

Although it is an exaggerated impression transition, when including video, it tends to be hard to understand that it switched. Therefore, I think that this stereoscopic transition is effective.

Automatically display translation buttons in foreign language comments

Although many users may not use it, it is an important interaction for some users.

Indicator for switching multiple photos

Even if there are many pictures, the indicator fits into a fixed width. It implies that there is a continuation by gradually decreasing the size of the dot. The number of cuts is supplemented with the label on the upper right of the photo.

Comment posting is displayed immediately

The posted comment is displayed on the screen without waiting for response from the server. At that time, a label is displayed to indicate that it is being posted.

Deleted comments is hidden immediately

A confirmation dialog is not displayed when deleting a comment. Instead, a button to restore is displayed for a while. We omit unnecessary confirmation to the user, but there is a way to help users who accidentally deleted it.

Double tap on a photo will execute “Like”

For advanced users interaction, alternate operation is possible with another button. When you do “Like” by double tap, an animation showing a big heart at the center of the picture is displayed.

Haptic feedback on sliders to adjust photos

Haptic feedback occurs when the photo adjustment slider moves to the center. The operation to restore the initial value by them is assisted.

The point I noticed is like this. Since Instagram is a very well-made application, there seems to be microinteractions that has not been confirmed yet.