1

The site I'm working on is basically a brochure showing prospective job candidates about our non-profit organization and our city.

I've done some research and cannot find any relevant information that tells whether users prefer all the images one one side (with text on the other) or breaking up the text by alternating images left and right.

The information I have found usually is about e-commerce sites or blogs.

Being a brochure site, it is a simple, one-column WP layout with no sidebars.

Is there a generally accepted best practice for image placement OR resources you know of that discuss this?

Thank you.

1
  • Quite probably "users prefer" is not really useful task metric i.e. One layout may increase readability of text while another may increase scanning speed of images and section titles. Each would have it's place. UX is not fundamentally about being 'pretty' but rather most effective. What do you need to achieve or improve?
    – Jason A.
    Jan 6, 2015 at 9:15

3 Answers 3

1

I partailly agree with considering reading patterns but these are only part of the answer. I think you need to consider the overall structure of the page in a way that is meaningful both at informational and visual levels. Equally I don't think the placement of an image or any other visual attribute should follow a rule but rather be determined by the context and the overall intention of the design.

There are two aspects that could influence how the design works:

Visual Weight- The perceived weight of a visual element. It’s a measure of how much anything on the page attracts the eye of your viewer.

and

Visual Direction – The perceived direction of the visual forces. It’s the direction we think an element should be moving if it was given a chance to move based on the forces acting on it.

There are a number of useful factors to consider when dealing with each of these aspects, for more details, I highly recommend reading the 19 Factors That Impact Compositional Balance. below is an example:

enter image description here

Incorporating visual weight and direction in your design also allows you to optimise your design for eye movements. There is an interesting article about Understanding the Split Layout in Web Design, which you could find useful.

This might seem a lot to go through but most designers do that naturally so what matters the most here is being both explicit and critical of your own design decisions.

Hope that helps

0

Hope this helps...

http://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/

Now that we have a clue of the pattern of reading web content, it's your call for the image placement.

IMO, I will "think" that aligning all the image one 1 side is better as it will not interrupt the flow...

1
  • This is off-topic, but look how much attention the search-box got on the Google page to the right. Do you think it's a research methodology issue? Perhaps the participants were presented with just the results page and they were looking for the original search query?
    – Navot
    Dec 7, 2014 at 11:21
0

If alternately repositioning the images is purely to differentiate one set of information from other then it would be better if you avoid doing that.

Everytime a readers move from one set to the other the orientation of the information will be changing and they will have to constantly switch adaptation to the way the it is displayed and the position of various pieces of information. Which may cause reluctance from reading further.

Instead you can keep the images and information aligned on the same side and alternate the background color(not very highly contrasting colors) to give a subtle distinction in the change of information set while keep the orientation of the information constant throughout. Its highly likely once the user gets comfortable (with the information positioning) he/she may read longer since it will be easier to locate the information that interests them.

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.