Reflection: The “They did it that way” Heuristic and the Art of Stealing

Should I put captions on the top or on the bottom? That should solely rely on how you want to weave the user journey, instead of just “do whatever others are doing”.

UI Designers frequently check how other competitors designed their user interfaces to avoid unnecessary labor or to achieve consistency in the same industry.

This heuristic is convenient because you borrow designs from others who did all the thinking for you. But this does not mean you don’t have to think carefully. Always remember, as designers, our job is to think.

Image captions on top or bottom?

The position of image captions relative to their linked images serves as a great example of how designers should think.

Image caption on the bottom (left) and image caption on the top (right). This is perhaps as serious as the tabs vs spaces war among developers.

Among all the news websites I’ve browsed through, most of them choose to put image captions on the bottom, with a few others that prefer captions on the top. The “caption-on-bottom” ones probably started that way probably because that is the tradition of print media.

But where do magazines get their idea to put image captions on the bottom?

Galleries, I guess.

Photo by Artur Matosyan on Unsplash

Paintings in museums and galleries are often so large that if you place that plaque on the top, it would be impossible for any visitors to read.

Now let’s analyze the similarities and differences between galleries, magazines, and web pages. All three involve some form of “images + captions” design. With galleries, visitors can either enjoy the art piece at a distance before walking up closer to examine details. With magazines, both texts and images are sized so that readers can easily read them all at once from a comfortable reading distance. With web pages, users are forced to read whatever shows up first. Plus, unlike the other two mediums, browser windows have a fixed width and height, and therefore users’ visual angles are limited to only their screen sizes.

So, should I put captions on the top or on the bottom? That should solely rely on how you want to weave the user journey, instead of just “do whatever others are doing”. Which one is more impactful, text or image? Should we implant a concept using text before we explain it visually using images, or should we splash people into the visuals before we introduce the details? Or maybe we can take advantage of the interactive nature of a webpage and make everything more dynamic?

This web page by Apple uses images first, but strategically catered for the user journey to tour users around details Apple wants them to memorize.

In the design world we often say “Good designers copy, great designers steal”. Even this simple example of how to place an image caption greatly illustrates the difference between plain copying and the art of stealing. While the “they did it that way” heuristic is convenient, designers must carefully evaluate the design before applying it to their own.