Proportion: The Pattern of Three

Writing code is both a science and an art. The science is making it work and the art is making it better. The art part is hard to put into words but when I see an artfully written code, I’m inspired.

A while back while writing some code, I was inspired by the idea of proportion. There is something attractive about looking at a well proportioned code or thing. I wonder if there is a general guideline that’s pleasing to the human eyes. Personally I don’t know, but I can draw on my experience with photography.

In photography, there’s the rule of thirds, which I use as a guideline when I’m snapping pictures. I divide the view into a 3 x 3 grid and then I put the subject at the intersection of the lines. What it creates is a sense of calm and space. If I move away from the rule of thirds, the image produces a sense of tension. The picture below shows the primary subject and the secondary subject (further back) located on the intersections giving it a sense of naturalness and space. The photo was taken by Shawn Phelps.

So how does this apply to coding? Let’s see. Assume we code our method in one big block. At first glance, it’s not very exciting and not communicative. It’s a blob and feels overwhelming.

What if a method has two code blocks? It feels like the two blocks are somehow unrelated, making it hard to read the code. This is because I’m mentally trying to make these blocks relate. This is an effort above and beyond trying to understand the code itself.

What if a method has three code blocks? I find there is a sense of ease and flow, because I can map the first block as the beginning, the second block as the middle and the third block as the end. The mental mapping process happens quickly and it frees my mind to concentrate on understanding the code. Unlike the two block example, I don’t have to do two things in my mind at the same time.

What if a method has four code blocks? It’s too much for my eyes because it’s hard for me to group them. It feels like the second block is more related to the first block versus the third block. The two middle blocks feels like they are not related, so it makes it hard to concentrate on the code.

What’s the pattern? It seems that if I divide the method block into three sections, the code provides better readability. I think this ties back to how we are taught to think—that everything has a beginning, a middle, and an end.

I think the process of recognizing patterns happens quickly and subconsciously. If the pattern is pleasing, we’re more relaxed and taking in new information is easier. Conversely, if the pattern is chaotic, the mind has to work hard to process it, so taking in new information will be difficult.

I think the pattern of three is one of many patterns out there that can help to make code more pleasing to look at and easier to understand. From my experience, debugging a well-proportioned code results in a more successful outcome.

It's only fair to share...
Share on FacebookGoogle+Tweet about this on TwitterShare on LinkedIn

Leave a Reply