Analyzing Instagram using Shneiderman’s “Eight Golden Rules of Interface Design”

Tripti Rajput
7 min readMay 1, 2020

--

A image showing eight golden rules of interface design using common interface elements.
Eight Golden Rules of Interface Design

Following Ben Shneiderman’s ‘Eight Golden Rules of Interface Design’ results in great designs, productive and frustration-free user interfaces. Apple, Google and Microsoft are among some of the highly successful companies whose well-designed products reflect Shneiderman’s rules. The characteristics derived from Shneiderman’s golden rules can be recognized in various user interface guidelines produced by corporate giants like the companies mentioned above. The visual embodiment of these rules is even more evident in the resulting popular interfaces they produce.

This article will analyze the Instagram application using the following eight golden rules:

1. Strive for Consistency:

Strive for consistency by utilizing familiar icons, colors, menu hierarchy, call-to-actions, and user flows when designing similar situations and sequence of actions.

The instances where Instagram handles the rule well:

  1. The appearance of all the pictures in the user’s own profile occurs in a consistent grid with three columns and squares of equal dimensions.
  2. The Instagram mobile application and the Desktop web browser are consistent with respect to each other in the following ways:
    • Double-tap on the picture likes the picture.
    • Scrolling enables seeing the most recent posts.
    • Can view the Stories. Tap and hold on the story pauses it.
    • Can edit the profile.
Comparing the desktop Instagram screen to that of mobile Instagram screen
Instances where mobile interface and desktop interface are consistent

The Instances where Instagram does NOT handle the rule well:

1. The Instagram Music is inaccessible in a few countries and people cannot view the stories of the user in the same way as people from other countries can rendering the use of adding a music feature inconsistent throughout its users.

2. The Instagram mobile application and the desktop web browser version are inconsistent based on functionality in the following ways:
a. Adding stories
b. Adding Posts
c. Go Live feature
d. The direct message

Comparing the desktop Instagram screen to that of mobile Instagram screen
Instances were mobile interface and desktop interface are NOT consistent

2. Seek Universal Usability

The instances where Instagram handles the rule well:

Instagram does allow to add Alt Text to the images and video and thus cater partially towards universal usability. This feature provides user’s with visual impairments an easier way to enjoy the platform. With Alt text, anyone using a screen reader will be able to hear the description of the image in detail. There is also a feature to auto-generate the alt text.

The Instances where Instagram does NOT handle the rule well:

The Instagram Application on the desktop as well as mobile does not have any voice feature activated which would allow people universal usability. The activation of voice feature to search and like the videos or a picture would be a step towards the universal usability.

3. Offer Informative feedback

The need to keep the users informed of what is happening at every stage of the process. This feedback needs to be meaningful, relevant, clear, and fit the context.

The instances where Instagram handles the rule well:

Firstly. When multiple pictures are uploaded in a post, it is indicated with the presence of small dots at the bottom of the post signalling to swipe and see more of the uploaded pictures.

A Screenshot of Instagram offering informative feedback by showing a New Post notifcation.

Secondly, when uploading a story on Instagram, the user’s own story is reflected by a colorful border around the profile picture of the user. By this, the application offers feedback about the story of the user.

The Instances where Instagram does NOT handle the rule well:

While displaying a video on Instagram, the user does not have an idea of the amount of time required to load the entire video. No feedback is offered in terms of the wait time and the user have to wait until the video loads. There is no playback control or navigation bar such as the one exists on YouTube.

4. Design dialogues to yield closure

Sequences of actions need to have a beginning, middle and end. Once a task is completed, give some peace of mind to your user by providing them informative feedback and well-defined options for the next step if that’s the case. Don’t keep them wondering!

The instances where Instagram handles the rule well:

While blocking a user, a dialogue box appears on the screen, confirming the action of blocking. It ensures that the user is aware of the action being performed and demands confirmation.

While uploading a picture, just before the last step of uploading if the user decides to navigate back, a dialogue box appears asking the user if the post needs to be saved as a draft to make sure that the post is no longer going to be uploaded now.

The Instances where Instagram does NOT handle the rule well:

While scrolling through the article, in-case I decide to press a back button the feed scrolls back to the top on the page to the first post making the browsing and finding the last post tedious. A dialogue box which confirms that the user wants to get back to the top of the feed would be a helpful feature and would offer closure.

5. Prevent errors

A good interface should be designed to avoid errors as much as possible. But when errors do happen, your system needs to make it easy for the user to understand the issue and know how to solve it. Simple ways to handle errors include displaying clear error notifications along with descriptive hints to solve the problem.

The instances where Instagram handles the rule well:

While tagging another user in the comments or the story, the Instagram application offers suggestions of the names to be tagged, thus avoiding the error of tagging someone else and easing the entire process of tagging.

The Instances where Instagram does NOT handle the rule well:

In a chat, a message cannot be referred to while replying, which sometimes leads to confusion in the conversation. A referencing of messages like what can be done in WhatsApp will help reduce confusion.

6. Permit easy reversal

It’s an instant relief to find that “undo” option after a mistake is made. Your users will feel less anxious and more likely to explore options if they know there’s an easy way to reverse any accidents.

The instances where Instagram handles the rule well:

Until a recent update, removing of the followers was not an option. Once a user starts following you, the only way to hide the posts and stories was to block the user. The recent update allows the user to remove a follower from their follower’s list.

The feature to “Like” the picture when double taped and unlike when double-tapped again enables easy reversal feature.

The Instances where Instagram does NOT handle the rule well:

In case of profile setup, when a user changes their profile picture, there is no way of getting back to the old profile picture. Once a profile picture is removed, the only way to get that picture back is to upload the profile picture using the original images again. There is no option to undo this action of removal of a profile picture.

7. Keep users in control

It’s important to give control and freedom to your users so they’re able to feel they’re in charge of the system, not the other way round. Avoid surprises, interruptions, or anything that hasn’t be prompted by the users. Users should be the initiators of the actions rather than the responders.

The instances where Instagram handles the rule well:

The user is put in control of the volume of the video in the feed. If the user wishes to see the entire video with audio enabled, the user can tap on the video and the audio begins otherwise the video continues in a mute mode.

Users have an option to mute the stories of specific user/ followers. Giving users control of whose stories to view.

The Instances where Instagram does NOT handle the rule well:

While uploading a picture on Instagram, the picture size has to be a standard Instagram size and it does not allow the user to change or fit it into the standard Instagram size. A third application (like Insta-square) must be used to resize the picture and upload it on Instagram. Also, when uploading multiple pictures, the control of zoom in / zoom out the picture while uploading is lost.

8. Reduce short term memory load

Our attention span is limited and anything we can do to make our users’ job easier, the better. It’s simpler for us to recognize information rather than recall it. Here, we can refer to one of Nielsen’s principles describing “recognition over recall”. If we keep our interfaces simple and consistent, obeying to patterns, standards and conventions, we are already contributing to better recognition and ease of use.

The instances where Instagram handles the rule well:

While sending a post, the most frequently interacted followers are suggested at the top relieving the user from the burden of remembering and focus on recalling which is easy.

Also, the new feature of adding close friends relieves the user from remembering the close group of people who receive frequent stories. As a result, the story can be sent to all the individuals in one tap and the user does not have to remember the names of multiple friends/followers

The Instances where Instagram does NOT handle the rule well:

When opened a link from the Instagram add ( which occurs between the stories), the link opens up in a browser that is different from the normal browser used on the phone (Example: Google chrome) which increases the cognitive load as opening the same page in the browser involves copying the link and pasting it in the browser.

A screen shot showing the options available after opening an advertisement from Intagram application
The available options when a link is opened from an advertisement on Instagram

--

--

Tripti Rajput

All the articles are reflections of my personal learnings and have no affiliation with any organization.