2

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?

enter image description here

  • 1
    Could you provide an annotated screenshot of what you're referring to? Some of us don't want to click to YouTube, and seeing this question in the future might not make sense after YouTube's layout has changed. – Ken Mohnkern Sep 23 at 14:04
3

Welcome Carla!

I'm not sure of the prevailing principle (and that may vary by viewer anyway) but I think the principles being presented here are:

  • proximity
  • continuity (e.g. alignment)
  • similarity
  • 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:

enter image description here

Because of the alignment, it's made clear that the image and text are intended to be related:

enter image description here

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)

enter image description here

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.

  • 2
    You missed one thing in your analysis - although I don't know if it matters. The text is left aligned and wraps well before right edge of image. Look at Rocket Man in the sample. The word "Man" could easily fit in the first line. So there is actually an imposed gap in the text. – Jan Dorniak Sep 23 at 19:52
  • @JanDorniak - I think that's an important part of the readability in terms of not making it look like the text continues across to the next item. That, in turn, does help to separate the text of one item from the text of another, and so making it feel more connected to the image above instead. I'll add this to the answer because I think it all plays a part. Thanks for calling it out! – Roger Attrill Sep 23 at 19:58
  • 1
    glad to be of help. I was not sure since when it comes to UX I consider myself a hobbyist at most. – Jan Dorniak Sep 23 at 20:02
  • So, if I understood correctly, the proximity difference of the images from the text isn't enough to group the images together.Also, could closure be playing a part here with the text left aligned, becoming and invisble box with the text and image? – Carla Graça Sep 23 at 20:47
  • @CarlaGraça Correct. Closure in this case isn't really an important factor here. I mean, yes there's alignment and closure does rely on the implicit continuation of a line or shape that is incomplete, but it's basically just alignment in this case rather than an actual box. – Roger Attrill Sep 23 at 22:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.