3

I've read on previous questions here that it's generally better to have this order when organizing photos and relevant text together.

[photo] [text describing photo]

I don't have a problem with the above. It does make sense to me.

My question is, does this apply if you would have multiple photos such as:

[photo] [photo] [photo] [text describing set of photos]

Or would it be better to have the following:

[text describing set of photos] [photo] [photo] [photo]

I feel that having the text above when it's a set of photos is better so that they can have the context/additional info in mind while scrolling through the set of photos -- as opposed to learning "Observation A" after scrolling past multiple photos and having to scroll back up to see it in context with the photos.

This, however, becomes a problem if you have a mix of the two situations above because then the placement of the text and the relevant photo changes.

[photo] [text describing photo] [photo] [text describing photo] [text describing set of photos] [photo] [photo] [photo]

Is it better to just have the following: (?) And can someone explain why it's okay for the text to follow after a set?

[photo] [text describing photo] [photo] [text describing photo] [photo] [photo] [photo] [text describing set of photos]
Improve this question

2 Answers 2

Reset to default
1

How about this?

[photo] [A guy in a park] [photo] [A bird in a bush] [photo] [text describing set of photos in a way that makes it clear that it refers to the entire set] [photo] [photo] [photo] [text describing photo]
Improve this answer
4
  • could you explain how this is a good solution? it could be misinterpreted in that the 4th and 5th photo don't have a description Commented Apr 29, 2014 at 9:18
  • Same concern as Dave. If the text after the 3rd photo isn't written properly, I'm worried readers might think the text only applies to the 3rd and the author simply forgot to put space between the text and the 4th photo. Commented Apr 29, 2014 at 9:20
  • Yes, this relies on the text being written properly. I think that in terms of layout this is the least misleading option. If you put the text below the entire set, then at first they encounter photos with no description, and only then do they see the description. So they will definitely think that there are photos without description. But if you do it this way, they just might think that - if they haven't read the text, or if it's not a good description. This layout reduces the likelihood of the mistake but doesn't eliminate it. Commented Apr 29, 2014 at 9:27
  • Thanks for responding (wish I could upvote your comment)! It is a good argument :) I'll probably discuss this with the team and see how they take it. Commented Apr 29, 2014 at 11:17
1

Does your layout have to be vertically stacked as in your examples? You might want to consider floating the text relating to the group of images so it is always visible either at the top or bottom of the screen while the user is scrolling them.

There are many different ways to illustrate the togetherness of text and photo(s), but it all boils down to the Gestalt laws of perception. If you solution holds to these laws you can be reasonably sure the user will understand how individual elements relate to each other.

Improve this answer
6
  • Hiya, thanks for the link, I'll check it out. And yep, the photos are being displayed at full width so they will have to be vertically stacked. Can't use thumbnails or float them side-by-side, unfortunately :( Commented Apr 29, 2014 at 11:14
  • @Arkuen You can still float the text at the bottom though, right? Or is that also not an option? Commented Apr 29, 2014 at 11:26
  • At the bottom of the photo? I can do that, though isn't that more of a caption-type styling? I can't imagine how to do that with the set of photos. (Or am I misunderstanding you? Sorry!) Commented Apr 29, 2014 at 11:32
  • I mean that the caption text will be in a little panel that, when you have multiple photos, follows you to the next photo (sticking to the bottom as you scroll through the set it belongs to). Kind of like the way the the sidebar in this jsfiddle sticks to the top as you scroll, except at the bottom and across the whole screen: jsfiddle.net/WaypointArts/pn37C Commented Apr 29, 2014 at 11:51
  • Interesting! Perhaps I can use that -- though I'm concerned about two things: how it will work on mobile (could be solved by having the sticky effect disabled on smaller screens) and what if the "caption" becomes a paragraph/s (that's a little more difficult I think) Commented Apr 29, 2014 at 12:05

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.