Micro interaction redesign, Instagram case-study
A Figma-based high fidelity prototype for discussion.
Project overview
Problems
The challenge is to visualize and prototype new possible alternatives to already existing microinteractions within Instagram. In this case, microinteractions are intended as the pattern of actions that a user has to perform in order to achieve a specific goal.
Methods
Prototypes for discussion;
High velocity prototypes.
Tools
Figma;
After Effects;
Illustrator;
Goals
The goal is to generate a discussion, within an hypothetical design team, concerning how possible alternative microinteractions could be implemented, how they could affect the user’s behavior and wellbeing, and the extent with which they can problematize the status quo of the application.
Personal academic project (2023).
Activate audio
Activate audio
Original microinteraction
Description
Instagram provides a “reel section”, in which only vertical video content (reels) are displayed.
In this section the user is just allowed to control the audio of videos (on/off), by tapping in any part of
the screen (except for buttons areas).
Variant 1 | Activate audio
Visible trigger (button)
Description
Video’s audio can be controlled through a visible button on the main page.
Pros
A visible trigger helps the user in understanding how to start the interaction.
The volume icon provides a feedback of the systems status (audio is on/off).
The “tapping on the screen” gesture could be available for other video controls (for example, play/pause).
Cons
The volume button partially covers the video below.
Variant 2 | Activate audio
Audio activation prevention
Description
Audio is disabled by default. The user can choose whether to activate audio or not before he navigates to
Reel section.
Then, in reel section, audio activation follows the already existing rules.
Pros
Especially in public places (for instance libraries), the user doesn’t risk to accidentally play videos with
loud volume.
Cons
Additional excise, that could be necessary just in specific situations (when active audio could be annoying) but unnecessary during the rest of the time.
Variant 3 | Activate audio
Audio activation within a hidden menu
Description
Audio controls are included into an overflowing menu, that is opened by clicking on the 3 dots icon.
Audio is activated by tapping a switcher, that becomes blue when audio is active.
Pros
No accidental audio activation by random tapping on any part of the screen.
Cons
No visual feedback of the system status (audio on/off) in the main screen.
Adding navigational excise might annoy the user, since audio could need to be rapidly activated (or
deactivated).
Posting a picture
Posting a picture
Original microinteraction
Description
Posting a picture is one of the main tasks that the user can accomplish in Instagram.
After pressing the “+” button on the home page, the user starts a sequential navigation through different
pages that correspond to different steps of the process (selecting the image, editing it, adding description
and other information) which eventually end with the publishment of the picture.
Variant 1 | Posting a picture
actions grouped in a single page + preview
Description
The interaction is initiated by the user by pressing the “+” button on the home page
Then, the user navigates to a page which contains a menu with all the main action that he can take before
publishing a picture.
Actions included in this page have the same hierarchy.
This variant introduces an additional excise task at every step of the process (downward navigation).
Pros
The user has the freedom to choose from which step to start, according to his needs.
The preview of the final post occupy a large portion of the screen, therefore it has an higher visibility.
It also helps in recovering mistakes that could happen in the initial steps (of the original sequential
navigation) and discovered just after having published.
Cons
More excise might slow down the process of publishing a picture.
The user could forget one or more steps, since he doesn’t have to follow a rigid sequential navigation.
Variant 2 | Posting a picture
“undo” option at the end of the process
Description
After the process of posting a picture has been completed, while the system is preparing the post for being
published, an overflowing preview of the post is displayed.
Here, the user decides whether to let the process going on or interrupt it by tapping on “Edit post” and
going back to the previous steps.
Pros
If the user has made some mistakes, he can recover them before actually publishing the post.
Cons
More excise might slow down the process of publishing a picture.
Variant 3 | Posting a picture
Smooth vertical flow
Description
In this variation, the steps of the process of posting a picture run in a single page, that is scrolled by
the user, from the top to the bottom.
Posting a picture is a smooth flow, in which every step is visually grouped within a card to avoid
confusion.
Pros
Seamless experience, from the initial steps to the publication one.
Cons
Visually grouping the steps within cards might not be sufficient to avoid confusion in the user, especially between the first 2 steps, that are presented in a quite similar layout.
Browsing stories
Browsing stories
Original microinteraction
Description
Stories are contents that are presented on the upper part of the screen. They can be browsed by dragging the
finger on them.
The user can open them (full screen) by tapping on the avatars.
Variant 1 | Browsing stories
Visible relationships + 2D scrolling
Description
In this variant, stories have been placed on the search page.
Stories’ spatial organization reflects people relationships. Indeed, people that are mentioned in the same
story (or both shared the same post) are close to each other.
By tapping on a profile, the story is displayed fullscreen. When a story is viewed, the avatar turns grey.
Pros
Connections between people are more evident for the user (people that are tagged in the same story are close
to each other).
Since the most recent stories are no more visible than others, users don’t feel the pressure to continuously
public stories.
Cons
Some stories could get lost, since the space in which they’re displayed is bi-dimensional and it’s harder to cover.
Variant 2 | Browsing stories
Alphabetical categorization
Description
Stories are organized in alphabetical order, based on the nametag of people.
The user can browse them through horizontal scrolling, from left to right.
Pros
Organizing stories by name helps the user in finding a specific person he’s looking for. For instance, if a
user, whose name start with “A”, isn’t present on the first chunk of stories, it means that he didn’t
publish at all.
Cons
The username’s first letter has a huge impact on this organization.
Variant 3 | Browsing stories
Preview
Description
On the upper part of the screen, stories are displayed as previews rather than avatars.
The user can browse them through horizontal scrolling.
When a story has already been viewed, its border becomes white.
Pros
While browsing stories, the user can immediately have an idea of the content of a specific story. The
author’s name, positioned below each story, helps the user in recognizing whose profile they’re.
Cons
This solution makes the stories appear more similar to ordinary posts, since it give less importance to the author’s visibility.
Navigation
Navigation
Original microinteraction
Description
Instagram provides a navigation menu (fixed) on the bottom part of the screen. The user navigates through multiple pages by tapping on the icons of the menu.
Variant 1 | Navigation
Hidden navigation menu
Description
The navigation menu, that usually is present on the lower part of the interface, is hidden.
To open it, the user needs to press on the icon of an arrow and then he can navigate.
The user can both leave it open or closed while browsing posts.
Pros
Contents can be displayed also on the bottom part of the screen, which usually is occupied by the
navigational menu.
Cons
Since the menu is placed on the upper part of the screen, it’s harder to reach with fingers (especially thumb).
Variant 2 | Navigation
Homepage
Description
In this variation, the navigation menu has been replaced with a homepage that displays buttons corresponding
to the different pages of the application.
The user, before navigating to any section of the platform, has to step on the homepage.
Pros
Some users may prefer to have an homepage where to manage different things, including navigation.
Cons
Adding a homepage adds excise to the navigation, because the user always need to go there in order to navigate on the app.
Variant 3 | Navigation
Single button navigation
Description
A single button, on the upper left corner of the interface, allows the user to switch from one page to the
other one.
The order is fixed (home, search, profile, add post, reel, home, search, and so on).
Pros
The lower part of the interface can display contents.
The user can quickly switch between pages by pressing a single button.
Cons
There’s no possibility to go back. The user needs to navigate through all sections before reaching the desired one (unless the page is the following one).
Variant 4 | Navigation
Tabs
Description
The interaction is activated by long pressing on any point of the screen.
In doing so, the user activates a “navigation mode” that lasts until he choose which tab he wants to enter.
Pros
Also this variant helps in saving space for media fruition, since the lower part of the interface is not
occupied by the navigation menu.
Cons
The trigger is invisible, therefore the user (especially at the beginning) might not know how to navigate.
