I have some galleries and some text (2 o 3 word pages) attached to each gallery. Until now I've had a gallery and the text in two different pages, with a link bar to switch between one and the other. In this way:

enter image description here

But I noticed that users watch the images, click on the text link, see a page full of annoying text, and switch back to gallery in less then few seconds. Because with this layout (two pages one with gallery, one with text, and a link menu for switching) - this is one way to read this common user behaviour - I give more relevance only to one.

So I'm wondering how to place text and gallery side by side and mixing them nicely.

  • Are these images and texts related? I.E. is there a roughly one-to-one relationship between these images and the text, or is it more that you have artwork in one gallery and stories in the other? Dec 19, 2012 at 0:37
  • the text explains the gallery (text is a story about the whole gallery). but there is no one-to one relationship like image-to-paragraph (i.e. no possible reduction to image description).
    – nkint
    Dec 19, 2012 at 0:40

2 Answers 2


You're never going to find a perfect solution -- people prefer images over text, and numerous studies back this idea up. This is why people in general prefer comics over novels, movies over comics, etc.

What you may end up having to do involves employing some common print design techniques to make the text more palatable -- for instance, since the images are only loosely related to the text, you could have a slideshow of images on one side cycling while the user reads the text, and use a scrollbar to both make the text and the images look like they're about the same size visually, and to better conceal the fact the text goes on for a few pages so they aren't scared off by a wall of text. For instance:


download bmml source – Wireframes created with Balsamiq Mockups

And then there's all sorts of standard copywriting tricks, like:

  • Include bulleted lists. (It works for Powerpoint, it'll work for you!)
  • Emphasize important sentences!
  • Break the text up into smaller paragraphs to provide a sense of cadence and improved readability.

It's not that people won't read, it's that they know most everyone else sucks at writing -- so if you don't improve the clarity of your writing, they're less likely to even give it the chance.


As sometimes happens in technology, an implementation detail bring me to a new conceptual solution.

I have found this jquery plugin: jquery.expander, and i have adopted a solution that consists in hide a part of text and place it at the top of the gallery. A similar solution is used here


download bmml source – Wireframes created with Balsamiq Mockups

ps. I don't really know how to name this solution but i am sure some ux guru could name it!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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