Human Computer Interface
Name: Jaimin Patel
Roll No.: 22BCE248
Practical 1: Human Perception and Information Presentation
Section 1: Interface Analysis and Gestalt Principles
Objective: To analyze how core human perception principles are used in real-world
interfaces.
Interface 1: Instagram
Instagram's mobile app is a prime example of using Gestalt principles to organize a
vast amount of dynamic content into a coherent and easily digestible format.
Analysis of Gestalt Principles:
● Proximity: This is most evident in the main feed and the Stories section.
○ Stories: The round icons for "Your story" and those of other users
are placed close together at the top of the screen. This small distance
groups them together, creating a clear visual cue that they are all part
of the same feature, the Stories reel. The brain automatically
understands that these are a set of related items, separate from the
main feed content below.
○ Main Feed: Within a single post, the user's profile picture, name,
and post options are all clustered together at the top. Below the
image, the like count, user comments, and the comment box are also
grouped closely, visually separating them from the next post. This use
of proximity helps users quickly identify which elements belong to
which post.
● Similarity: This principle is crucial for navigating Instagram's features.
0 Bottom Navigation Bar: The icons for Home, Search, Reels,
Notifications, and Profile are all styled similarly (thin lines, simple
designs) and are located at the bottom of the screen. This visual
similarity signals to the user that they are all navigational tools with a
consistent purpose—to take the user to a different main section of the
app.
○ Icons and Buttons: All "Like" buttons on posts and Reels, all
"Comment" bubbles, and all "Share" icons have a consistent
appearance. When you see a heart icon, you know its function,
regardless of whether it's on a picture or a video. This consistency, or
similarity, makes the interface highly predictable and easy to learn.
● Continuity: This principle helps guide the user's eye through the interface.
○ Scrolling Feed: The continuous, vertical scrolling nature of the main
feed creates a sense of a single, unending stream of content. As you
scroll, the bottom of one post flows seamlessly into the top of the
next, encouraging a continuous viewing experience.
○ Stories Reel: The horizontal scrolling of the Stories at the top of the
screen creates a clear, linear path that the user's eye follows from left
to right. This design suggests a continuous series of stories to be
viewed.
● Figure-Ground: The contrast between the content and the background
helps the user focus on what's important.
○ Main Feed: The white or dark-gray background (depending on the
theme) provides a consistent "ground" against which the user's posts,
with their images and text, are the "figure." This clear separation
makes the content the primary focal point.
○ Pop-ups and Modals: When a user taps on a notification or wants
to perform an action (like deleting a post), a pop-up modal appears
with a semi-transparent overlay on the rest of the screen. The modal
becomes the "figure" and the content underneath becomes the
"ground," directing the user's full attention to the new, critical
information.
Interface 2: Netflix
Netflix's web and TV interface excels at using Gestalt principles to manage an
overwhelming library of content and present it in a personalized, manageable way.
Analysis of Gestalt Principles:
● Proximity: Netflix uses proximity to group related titles and makes content
discovery intuitive.
○ Content Rows: The homepage is organized into horizontal rows
with titles like "Trending Now" or "Because you watched [a specific
title]." Within each row, the individual movie or show thumbnails are
placed close together, creating a clear visual group. This proximity tells
the user that all the titles in that row are related to the row's category.
The space between the rows separates these groups, so the user
doesn't confuse a "Trending Now" title with a "Sci-Fi & Fantasy" title.
○ Hover States: When you hover over a movie, a small pop-up
appears with more details (title, rating, brief description). The close
proximity of this information to the thumbnail it describes ensures the
user understands that the information is directly linked to that specific
content.
● Similarity: Netflix uses similarity to create a predictable and organized
experience.
○ Thumbnail Design: All movie and show thumbnails have a
consistent rectangular shape and size within a given row. This visual
similarity ensures that the user recognizes each item as a distinct
piece of content. The consistency makes it easy to scan the rows and
quickly identify the different titles available.
● Continuity: The principle of continuity is critical to Netflix's main user
interaction.
0 Horizontal Scrolling: Like Instagram Stories, the horizontal scrolling
within each content row creates a strong sense of continuity. The
user's eye is guided along the line of thumbnails, and the presence of
partial thumbnails at the edge of the screen signals that there is more
content to the left or right, encouraging the user to continue scrolling.
● Figure-Ground: This principle is used dynamically to bring content to the
forefront.
0 Homepage: The background of the Netflix homepage is a simple dark
color, creating a "ground" against which the colorful and vibrant
thumbnails and banners stand out as the "figure." This design choice
ensures that the content itself is the primary focus.
○ Hover and Play: When a user hovers over a thumbnail, it often
enlarges and a short video clip may play. This animation brings the
selected thumbnail into the "figure" state, while the rest of the
interface fades into the "ground," directing the user's full attention to
the content they are considering.