How I Design — The skeleton
While taking a walk, or driving around, when you look up at the sky, you ever noticed the clouds and wonder, ‘Oh wow! That one looks like a dog. And the other one’s shaped like a turtle!’? How can a random fluffy white cloud look like an animal? Also, when you look at a screen, do you look at every inch of the screen and read every single word from top to bottom, to know the story that the website is telling you? Ever wondered how your brain processes the information everywhere around you?
We oftentimes associate shapes and patterns around us to a past memory which helps in easier recognition and understanding of our surroundings. This is because our ancestors did not know the entire wild and when they see a new fruit, new animal or even a new person, associating it with a previous experience helps them make the next decision of consuming the fruit, hunting/avoiding the animal, or trusting the person, which played a major role in their survival. Hence, before processing the finer details of things, our brain always first registers the shape, size, and position of the object we are looking at.
Similarly, when you look at the screen, the brain first comprehends the layout, then groups the content according to the layout, and lastly, reads and processes the information on the screen. And all this happens in the very first few seconds of the object coming into your view. Remember, the longer it takes for the user to look around and understand what’s going on, the higher are the chances of them abandoning your page, and we don’t want that.
My objective while designing is to make the user easily consume the information provided, and to achieve this, planning the layout, and grouping the content efficiently is crucial. Gestalt’s principles serve the very purpose and have helped me organize the information I want to convey, better. So, read along for a few basic Gestalt’s principles along with some fun examples.
Similarity
Do tigers and leopards look similar? I’m not talking about the stripes and the spots, as those are the finer details, but are both big cats? Should you just keep a safe distance from both or just end up being their dinner?
Identifying similar shapes and sizes creates a sense of association and automatically groups them together in the first glance. Taking the example of Netflix, all of the boxes with the movie poster create an association in your brains to immediately know that every single box of the same shape and size, is a movie that you can watch. Instagram is another example where all boxes are either photos or videos and all circles on the top are stories.
Using the same shape, size, or color for similar objects creates an easier sense of association and familiarity among the users.
Proximity
When we see a bunch of people sitting together at a table, at a cafe, we instantly group them together as friends. We don’t personally know them but we do group them because they are sitting at the same table. They are in close proximity to each other and hence are considered a single group. This law was also used to easily distinguish different tribes for our ancestors based on the geographical region.
Taking the example of Netflix again (because it has almost every single principle applied in its design), when you land on the homepage, without reading the headings, you know that each strip of videos, belongs to a particular category, be it genre/recommended/language list. At the very first glance, even before you read the category title, and before you process the movie name, you know the list is one single collection of movies.
When things are placed in close proximity and though they do not share any similarities, they are associated as a single entity by our brain and helps in an easier grouping and aids in further decision making.
Common Region
A box of toys, a school bag, a desk, a room, etc are all a group of multiple things and the things could be absolutely anything, differing in shape, size, color, and even purpose. The bed, the nightstand, the lamp, and the paintings together placed in a common space enclosed by four walls is a bedroom. You differentiate areas of your house by the space shared by different items as a living room, a kitchen, a bedroom, or a balcony. These areas are distinguished by boundaries whether it is using walls or using carpets.
Netflix, again, makes excellent use of this principle, when you click to see the details of a movie. The title, trailer, description, actors, genre, and everything else you see, are enclosed in a big box to group them as movie details.
Multiple things varying in shape, size and other features can be easily grouped together using common regions.
Continuity/Connectivity
While driving, you keep following the path that the road takes you to the destination. The road is one continuous line that your eyes follow. Continuity creates a flow and guides your eyes to the destination. Continuity is created by connecting different elements together. Connecting two roads creates one continuous path from your home to the movie theatre.
Coming to examples, you guessed right, Netflix! Remember the long horizontal list of multiple movies grouped in a category that I mentioned while discussing proximity? You scroll horizontally on that list to see more and more options. The scroll creates continuity and the horizontal line is the path that your eye subconsciously follows looking for movie options.
Now, do you remember the movie details section we discussed as an example of a common region? When you click on the movie box to see more details, the thumbnail box that you clicked is highlighted and is connected to the details section using a tiny directional arrow. This is an example of connectivity which helps the eye associate two things together and guides your eye in the direction of the arrow.
Connectivity and continuity together create a flow and guides the user across the screen with minimal effort of consciously searching for something.
Closure
Do you know how the human eye and brain work together? Our brain receives two separate images from each eye and processes them together to form a continuous image. But there are multiple blind spots present while overlapping the images and the brain just fills in the blind spots with appropriate details and thus making us believe that we have a greater field of vision than we actually do. We have closure.
This interesting principle, of your brain filling in the gaps, is mainly used in iconography where there is an intelligent use of negative space and minimal detail to make the image less cluttery. Your brain fills in the gaps and associates the object you are looking at, to a past memory/experience, and helps identify it. The logos for FedEx, NBC, and Adobe are some of the best examples of how closure can be used tastefully.
Speaking of icons, here is a question for you. You must have seen the icon with three tiny horizontal lines stacked one above the other, usually used to denote ‘Options’, all over the web and mobile apps. It has a name. Ever wondered what it’s called?
It’s called a hamburger icon. The name came to be because it resembles a hamburger patty stuffed between two buns!
Naming the icon so happened because of its resemblance and association with a popular fast food item. See how our brain recognizes patterns and shapes and associates it with a past memory? Look around and you’ll notice more such things and the stories behind their naming. The world just keeps getting interesting!
Happy Learning!
