How Pinterest Uses Gestalt Theory for UX

When I first saw Pinterest, it was a shock to my system.

At first, I thought there was too much, but I I quickly realized I could scan many photos at once. Somehow, the layout flowed.

How the UX Works

Pinterest uses our good old friend Gestalt Theory to create its Interaction Design.

See Gestalt Theory in action

Similarity — Although the photos are radically different, they are contained in a rectangular frame. They also share the same format: photo on top, byline and small profile photo. The consistent shape creates order.

Continuation — To create continuation, Pinterest takes advantage of a vertical layout. The photos are vertically staggered so one image is always higher than the next. This keeps your eye leading down where the endless content continues to reload every time you scroll.

Proximity — The photos are all very close together, creating another reason your mind groups them together.

Adaptations in the Design Community

Recently, Tumblr has tried to adapt to Pinterest’s new UX. They use a consistent square shape so the eye groups the images. In addition, they have one large photo alternating from left to right to keep your eye flowing down the page. The photos on Tumblr give enough variety to keep the scanner entertained.

Twitter also uses some of the same basic concepts as the other sites, but it is text-driven. In this case, each post has it’s own line so each tweet can be read one at a time. This layout works because the length of tweets is so short that people can still scan quickly.

Missing the Mark

Places where this UX does not work is on websites with many mediums of content. I keep seeing these sites show up in my CSS gallery feeds. They combine, photo, video, text stories etc. on the page. At this point, I’m just having sensory overload and can’t take in anything on the page. Unlike Pinterest, they do not keep the consistency of shape to keep the design clear.

Other sites such as Dribbble are still using this design, but they haven’t quite nailed the concept. Pagers kill the whole idea. People do not want to wait for page loads, nor should they have too. Going to a new page temporarily ends the viewing experience. As people get used to auto-loaded images and content, their patience will be quickly gone for the old way of pagers.

Another interesting place to see this UX is for shopping. Etsy has taken on the new design. Brands will have to question whether Pinterest’s UX works best to show their products. If it is a formal furniture store, they may want to stay with a wide shot of the furniture with consistent photo sizes.

The next player to take on the new UX needs to be search engines. The image search would great improve with vertically staggered images instead of the flat rectangles that are harder to read. I think it is only a matter of time before this happens.

Close, but no cigar.

Bing is beginning to take this approach, but is using a varying horizontal width. I do not think this is as effective for continuation as the vertical design.

Pinterest has opened people’s eyes to the possibilities of using image display as a creative endeavor. I look forward to seeing what new ways we view content.


Originally published at veerkampvisuals.com.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.