How to place text and a gallery side by side without giving more relevance to one or the other?

Question

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:

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.

Answer 1

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.

Answer 2

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!