I'm a bit confused on what law is being used on the video thumbnails, in the main page of youtube. The thumbnails are closer together then they are from the 4 lines of text below them, yet I see a group composed of image and text and not see all the images together as a group. Shouldn't the elements closer together, in this case all the images on the horizontal row be seen as a group? Also, if proximity isn't the prevailing principle here, what is?
I'm not sure of the prevailing principle (and that may vary by viewer anyway) but I think the principles being presented here are:
- continuity (e.g. alignment)
- Prägnanz (~orderliness)
- past experience
Yes, the images are closer to each other than they are to their text, but the text is left-aligned with the image, accentuating their connection with the images. You'd actually have to move the text quite a way from the image before you started seeing the text in their own horizontal groups:
Because of the alignment, it's made clear that the image and text are intended to be related:
The proximity of the images (as the widest element) still plays a role in that you see a connected group of groups. Each sub-group is very similar in structure, and itself aligned to the next, even if not the same actual image or text. This creates an orderly structure that is easily afforded (the Prägnanz aspect)
Note that while horizontal images can be separated by a small margin, horizontal blocks of text need to be separated by a larger margin to make it clear that there is multi-line text wrapping to the next line, rather than continuing on below the next image. Although this is primarily about readability, this bigger horizontal gap between the text helps to distance the texts from each other, thus promoting the relationship with the image above instead. This means that the text could even have been centered without ambiguity (although then the principle of symmetry would come in too!!)
Finally...add into the mix that most of us are very familiar with text being underneath a related image, so familiarity is also playing a part towards meeting expectations from the layout. We also come to expect a reasonable amount of whitespace between text and related objects in order to keep the text easily legible.
While this seems like a complicated set of principles all working together, the brain does a wonderful job of subconsciously assigning importance to each aspect of the design in order to make sense of it. As mentioned at the beginning, you'd have to break things quite a lot in order to introduce ambiguity into this layout.